One of my clients is migrating a Drupal 7 site to modern Drupal, and a particular challenge is moving from Views that use field collections to using paragraphs.
One paragraph type, linkcollections, is themed differently on different types of pages. On pages aimed at kids, the links get icons and are color coded; on pages aimed at older readers, there are no icons, and all the entries are the same color.
It took some experimentation to figure out how to set things up to accommodate both kinds of collections.
The linkcollection paragraph fields have multiple fields: the link text, the link URL, a short description, a category, and an image field for the icon.
The linkcollection paragraph field is a multi-value field, so each Article node can have several linkcollections, like this:
Article page: Fun in Kansas City
linkcollections:
| link text | URL | description |
| The American Jazz Museum | https://www.americanjazzmuseum.org/exhibits | The American Jazz Museum showcases the sights and sounds of jazz throughout its history. |
| Union Station | https://unionstation.org/about-union-station-kansas-city/ | Built in 1878, the beautiful and historic station now hosts Science City, a planetarium, and several other attractions. |
| The National Museum of Toys and Miniatures | https://toyandminiaturemuseum.org/exhibits-collections/ | One of the world's largest collections of historic toys. |
The different theming is tied to different Views displays, so my first thought was to try a views-view-field template keyed to the view, the field, and the display, which would operate similarly to how it worked in the Drupal 7 version of the site. That would mean template suggestions like this:
views-view-field--linkgroups--block-8--field-linkcollection.html.twig
or:
views-view-field--[viewid]--[view-display-id]--[fieldid].html.twig
However, I realized that the theming of each individual linkcollection was happening at the paragraph level, so I needed to use the paragraph templates instead.
Paragraph templates do allow you to specify a view id - or at least, this seemed to work:
paragraph--linkcollection--views-linkgroups.html.twig
paragraph--[type]--[views-view-id].html.twig
I had hoped I might somehow be able to pass the View display info to the template suggestion system - something like this:
paragraph--linktile--linktile-simple-list.html.twig
but I couldn't get that to work.
But as I thought about it more, I realized that I could probably use a different view mode (a Paragraph view mode, similar to a node view mode; these are different from Views displays).
So I created a new view mode by going to
https://www.mysite.com/admin/structure/display-modes/view/add/paragraph
I called this first display mode Link with Icon.
Then I went back to my view and clicked the linkcollection paragraph field in the Fields section of my view, and on the Configure Field popup, I chose my new Link with Icon option under View Mode.
Finally, I created a twig template file to use with this view mode:
paragraph--linkcollection--link-with-icon.html.twig
or
paragraph--[paragraph-type]--[view-mode].html.twig
I saved my view, cleared my caches, and reloaded the page -
and it worked!
So, if you'd like to theme paragraphs differently within views, you can do that using custom paragraph twig templates:
- create a paragraph view mode
- apply that view mode to the field within your View
- create a twig template using the naming pattern paragraph--[paragraph-type]--[view-mode].html.twig
- clear your caches and reload the page