@ismael-abujadur alerted me problems with rendering some of the card variants in some of the content types, and this showed me that I'd missed some crucial config and templates when I did the last round of card updates.
Having had chance to rethink this, I've slightly changed things so that all content types use the same three card variant designs (teaser, feature_card, horizontal_card), rather than there being a weird special case for Articles.
A project can easily change this by making a node--[TYPE]--[VARIANT].html.twig template with customised markup (or use Twig include to pull in a custom component from the component folder).
As this PR contains changes to installation config, some manual steps are required on the WaterUK project. I can talk these through with @ismael-abujadur
Extra info on how all this works
When you create the Card grid paragraph, you can populate it 1 or more Content teaser card paragraphs, which each contain a reference field to a specific node and a selector of which view mode to display it in.
paragraph--content-teaser-card.html.twig contains code which delegates the rendering of the Content teaser card paragraph to specific view mode that matches the name of the node's selected view mode - i.e. paragraph--content-teaser-card--[VIEW-MODE].html.twig
In the view display configuration of the Content teaser card paragraph, each paragraph view mode is configured to render the node reference field in the corresponding view mode - i.e. paragraph horizontal_card is configured to render node horizontal_card. This causes the node reference field to output the node via the correct template - i.e. node--[VIEW-MODE].html.twig or node--[CONTENT-TYPE]--[VIEW-MODE].html.twig.
This all works by setting up named view modes of the paragraph which precisely match the view modes of node cards. If they don't match, paragraph--content-teaser-card.html.twig would have to be changed to use a switch statement (or similar) to map between the different view mode names.
@ismael-abujadur alerted me problems with rendering some of the card variants in some of the content types, and this showed me that I'd missed some crucial config and templates when I did the last round of card updates.
Having had chance to rethink this, I've slightly changed things so that all content types use the same three card variant designs (
teaser,feature_card,horizontal_card), rather than there being a weird special case for Articles.A project can easily change this by making a
node--[TYPE]--[VARIANT].html.twigtemplate with customised markup (or use Twigincludeto pull in a custom component from thecomponentfolder).As this PR contains changes to installation config, some manual steps are required on the WaterUK project. I can talk these through with @ismael-abujadur
Extra info on how all this works
When you create the Card grid paragraph, you can populate it 1 or more Content teaser card paragraphs, which each contain a reference field to a specific node and a selector of which view mode to display it in.
paragraph--content-teaser-card.html.twigcontains code which delegates the rendering of the Content teaser card paragraph to specific view mode that matches the name of the node's selected view mode - i.e.paragraph--content-teaser-card--[VIEW-MODE].html.twigIn the view display configuration of the Content teaser card paragraph, each paragraph view mode is configured to render the node reference field in the corresponding view mode - i.e. paragraph
horizontal_cardis configured to render nodehorizontal_card. This causes the node reference field to output the node via the correct template - i.e.node--[VIEW-MODE].html.twigornode--[CONTENT-TYPE]--[VIEW-MODE].html.twig.This all works by setting up named view modes of the paragraph which precisely match the view modes of node cards. If they don't match,
paragraph--content-teaser-card.html.twigwould have to be changed to use a switch statement (or similar) to map between the different view mode names.