How to have a different hero image per node?

Question

What we want: Users should be able to choose an image, add call to action links, and a few other options when setting up a hero for the specific page they are creating. We have three different content types we allow this on currently, basic pages and two custom content types we've created.

Current solution: We have a paragraph with the fields they can change such as layout (how they want the image, call to action links, etc. to be styled), which image they want to use, the links (if any) to be rendered on top of the image, heading, caption, and a few others. This paragraph is referenced on the content types by an entity reference field and then when they create whichever content type, they change all the fields as usual. We have different twig templates and css files to render the images, links, etc. different based on the layout they choose. Since we want the hero image to render in a different part of the page, not within the content of the node, we are using node.field_name within the page.html.twig template to render it in the section of the page we want.

Current problem: The hero is dynamic per page and is rendering as expected but the changes are not showing in the node revisions. The published version of the page shows the correct hero, the /latest version of the node is showing the updated/correct hero when a draft has been created, but when we go to the node revisions and click the latest draft there (links such as node/31366/revisions/1623918/view), it is showing the same hero settings as the published revision.

Related modules we are using: Content moderation, entity_reference_revisions, paragraphs

I added an image of the editing experience, I couldn't get the entire paragraph but that is most of it. I also added an image of what the paragraph looks like rendered, the full image was too large to upload here so it is a smaller version than what is actually shown on the site but too large to attach here.

I've researched current issue with paragraph revisions and node revisions but can't seem to find a patch or any fixes to the issues we're having. If someone could help me with a better solution or sees something that we're doing wrong, we'd really appreciate help/advice. Thanks!

Answer 1

You are asking for a better solution, this would be a hero block instead of hard-coding the hero image in the page template. If your block is using the node route context it automatically loads the node revision.

If you want to get the current solution working, try this code in a preprocess hook:

mytheme.theme

function mytheme_preprocess_page(&$variables) {
  $node = \Drupal::routeMatch()->getParameter('node_revision');
  if ($node) {
    $variables['node'] = $node;
  }
}