PHPackages onedrop/cardlists - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. onedrop/cardlists ActiveNeos-package[Utility & Helpers](/categories/utility) onedrop/cardlists ================= 0101JavaScript Since Jul 11Pushed 8y ago2 watchersCompare [ Source](https://github.com/1drop/Onedrop.CardLists)[ Packagist](https://packagist.org/packages/onedrop/cardlists)[ RSS](/packages/onedrop-cardlists/feed)WikiDiscussions master Synced 4w ago READMEChangelogDependenciesVersions (3)Used By (0) CardLists ========= [](#cardlists) The purpose of this Neos package is to help you create lists of cards similar to the ones at [DP Architekten](https://www.dparchitekten.com/projekte.html). The package contains two types of lists: the basic card list, and the filterable card list. Installation ============ [](#installation) 1. Download and unzip the package under app/Packages/Application. 2. Run composer install and npm install. 3. For a basic card list, use `Onedrop.CardLists:List` and `Onedrop.CardLists:Card`. 4. For a card list with a filter and a list view, use `Onedrop.CardLists:FilterableList` and `Onedrop.CardLists:FilterableCard`. Onedrop.CardLists:List ---------------------- [](#onedropcardlistslist) For a basic card list, you need one NodeType for the list itself and one for the cards. 1. Create a yaml file for the card: ``` 'My.Site:Card': superTypes: 'Onedrop.CardLists:Card': true ui: label: i18n properties: text: type: string defaultValue: '' ui: inlineEditable: true aloha: placeholder: 'Text' ``` 2. Create a yaml file for the list: ``` 'My.Site:List': superTypes: 'Onedrop.CardLists:List': true ui: label: i18n childNodes: cards: type: 'Neos.Neos:ContentCollection' constraints: nodeTypes: '*': false 'My.Site:Card': true ``` 3. Create a fusion file for the card: ``` prototype(My.Site:Card) < prototype(Neos.Neos:Content) { sectionName = 'Main' image = Neos.NodeTypes:Image { @context.node = ${node} maximumWidth = 512 maximumHeight = 512 } id = ${node.identifier} } ``` 4. Create a fusion file for the list: ``` prototype(Onedrop.IbReitberger:TeamMemberList) < prototype(Onedrop.CardLists:List) { listTitle = ${Translation.translate('listTitle', null, [], 'Templates/List', 'My.Site')} } ``` 5. Create a fluid template for the card: ``` {image -> f:format.raw()} ``` 6. Create a fluid template for the list: ``` {listTitle -> f:format.raw()} {cards -> f:format.raw()} ``` 7. Create translation files. The package contains an example implementation of the basic card list (`Onedrop.CardLists:ExampleList`). Onedrop.CardLists:FilterableList -------------------------------- [](#onedropcardlistsfilterablelist) The filterable card list is an extension of the basic card list, and differs from it in the following ways: 1. The title bar contains dropdowns which are used to filter the cards by properties 2. The title bar contains two buttons for switching between the grid view and the list view (while the basic card list has only the grid view) 3. Each card can be assigned a category, by which it can be filtered 4. Each card can be assigned a group, which is used for grouping elements in the list view The steps for creating a filterable card list are similar to the ones for creating a basic card list, with the following adjustments: 1. The card inherits from `Onedrop.CardLists:FilterableCard`, not from `Onedrop.CardLists:Card`. 2. The list inherits from `Onedrop.CardLists:FilterableList`, not from `Onedrop.CardLists:List`. 3. In the fusion file for the card, add the line `id = ${node.identifier}`. 4. In the fusion file for the list, create a `Neos.Fusion:RawCollection` called json: ``` json = Neos.Fusion:RawCollection { collection = ${q(node).children('cards').children('[instanceof Onedrop.CardLists:Card]')} itemName = 'listItem' itemRenderer = Neos.Fusion:RawArray { name = ${q(listItem).property('name')} id = ${listItem.identifier} group = ${q(q(listItem).property('group')).property('name')} category = ${q(q(listItem).property('category')).property('name')} property = ${q(listItem).property('property')} link = Neos.Neos:NodeUri { node = ${listItem} } } @process.json = ${Json.stringify(value)} } ``` For each item in the collection, the JSON object passes the name, the id, the group, the category, and any other properties which should be filterable. 5. In the fluid template for the card, set the card's id to `grid-{id -> f:format.raw()}`. 6. In the fluid template for the card, mark the properties which should be visible in the list view by giving them an id beginning with `list-property-`, e.g. `list-property-name`. Make sure that the suffix of each id is identical to the name of the corresponding property defined in the fusion or yaml. 7. In the fluid template for the list, extend the title bar by the select dropdowns and the view-toggle buttons: ``` Category Remove filter Property Remove filter ``` - Make sure that the select ids begin with `filter-select-`, and that the suffixes are identical to the names of the properties by which the cards should be filtered. - Note that the first option defined in the select is the name of the filter, and the second option is for deleting active filters and needs to have the class `d-none` for the filter to work properly. All other select options will be added dynamically. 8. In the fluid template for the list, add the configuration options for the groups and categories: ``` Categories (only visible in backend): {categories -> f:format.raw()} Groups (only visible in backend: {groups -> f:format.raw()} ``` The package contains an example implementation of the filterable card list (`Onedrop.CardLists:ExampleFilterableList`). Page Lists ---------- [](#page-lists) It is possible to list pages using the Onedrop.CardLists Plugin. You can build a page list like this: - Create a List NodeType and a Card NodeType as described above, but set the supertype of the List to `Onedrop.CardLists:PageList` or `Onedrop.CardLists:FilterablePageList`. - Create a page NodeType which inherits from `Onedrop.CardLists:Page` or `Onedrop.CardLists:FilterablePage`. - In the fusion for the List, set the template path to `resource://Onedrop.CardLists/Private/Templates/NodeTypes/PageList.html` or `resource://Onedrop.CardLists/Private/Templates/NodeTypes/FilterablePageList.html`, or, if you want to create your own template, set the partial path to `resource://Onedrop.CardLists/Private/Templates/NodeTypes/Partials`, so that you can use our extension of the Flowpack.Listable:Listable template in your template. - In the fusion file for the list, let NEOS know that the list elements should be cards. You do this by adding a block of code to the bottom of the file which looks something like this: ``` prototype(My.Site:ListablePageShort) < prototype(My.Site:Card) { link = Neos.Neos:NodeUri { node = ${node} } } ``` Sliding Cards ------------- [](#sliding-cards) This package also contains JS and CSS for the dropdown-cards used on the [DP Architekten](https://www.dparchitekten.com/projekte.html) website. To use these, adjust your card template in the following way: 1. Replace the `card` classes with `sliding-card`. 2. Add the following fluid code to your template, just below the card header: ``` ``` ### Health Score 22 — LowBetter than 21% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity9 Limited adoption so far Community10 Small or concentrated contributor base Maturity44 Maturing project, gaining track record Bus Factor1 Top contributor holds 66.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/c9981d7d0fbccdbcdcabb31ab1c3db179c18de527d2f9cb73a8fc347a6b00bc9?d=identicon)[onedrop](/maintainers/onedrop) --- Top Contributors [![caora](https://avatars.githubusercontent.com/u/6938413?v=4)](https://github.com/caora "caora (6 commits)")[![htuscher](https://avatars.githubusercontent.com/u/5076356?v=4)](https://github.com/htuscher "htuscher (3 commits)") ### Embed Badge ![Health badge](/badges/onedrop-cardlists/health.svg) ``` [![Health](https://phpackages.com/badges/onedrop-cardlists/health.svg)](https://phpackages.com/packages/onedrop-cardlists) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)