Implement hero images to match designs

Just to be sure things don't get confuse: the only "hero" is the one in the homepage. The rest are "featured images" that take the full grid.

To be more specific, this is the Featured image:

And this is the Hero:

On a styling/grid perspective you can see they take a completely different number of columns. Not sure for which of them this issue is for, but they should be treated different.

@ckrina thanks for pointing that out! I’m looking at both cases and I’ll update the title and description to reflect it.

I think we might be able to implement this way:

Check in the node template whether we are on the front page and conditionally display the featured image above the title with the full width hero or below it with the contained image.

I'll look to try that approach and we can review it. I'm open to other suggestions.

@tonypaulbarker we are not displaying the page title on the home page so no need for any logic there. This is noted in https://www.drupal.org/project/drupal_cms/issues/3491815#home 📌 Implement designs for basic page display within Olivero Active but it's kind of hard to spot :)

@pameeela I’ve been experimenting with our options for the hero, setting up configuration and testing.

Although we may not need a switch to achieve the hero visually, without a switch of some sort it leaves us with the same field and thus same responsive image style for the contained version of the image and the wide version.

We can put switches in templates, but we’d require twig tweak to set a different image style and it will break when the theme is switched so I think those options are potentially messy and complex.

A path I’m not keen to go down is considering using JavaScript to manipulate things, as these images should be eagerly loading and affect many pages including the home page so should load cleanly.

If I were to recommend a solution, it would be a separate ‘section home page’ content type so there was full control of this and any other things that should be presently differently on the home page and section home pages. Given the project structure considerations of adding another content type I’m not sure it’s an option to turn that around rapidly.

The best compromise I can think of is to only allow the hero to expand to some sensible width and then to become elegantly spaced.

I am pursuing this last approach for now and welcome any guidance.

@tonypaulbarker this is very much a temporary setup; eventually we will use XB for the home page, so we definitely don't want a new content type for this that will soon be obsolete.

The images are not that different in size, I would say we should just use the same image style for both. I think it's very unlikely that real sites will use our node as the home page, it's just the best option we've got at the moment. So a quick and easy (if not the most elegant) fix is definitely the preference!

tonypaulbarker → changed the visibility of the branch 2025_w1_featured_image_config_front_end to hidden.

The configuration is ready for review.

I went with 5:2 because this very closely matches the images in the designs and calculates nice round numbers. On mobile I went with using 16:9 image styles already in place, which gives the images a little more substance when the image is small.

@tonypaulbarker should the MR be in draft or is it ready?

@pameeela we use draft state for merge requests at Annertech until something is approved to merge. The reason for that is that it is a safety measure against accidentally triggering a merge. It needs review.

The reason for that is that it is a safety measure against accidentally triggering a merge.

Not a problem for us since only @tim.plunkett, @thejimbirch, and I have commit access. :)

@phenaproxima even the best of us make a mistake or have a slip of the finger. If that happens our CI can deploy the code to a production site, also mitigated here by tagged releases.

@tonypaulbarker I think these fails are legit, seems like there is some missing config?

Hmmm @pameeela is it only the pipelines? did you get to have a look around or did you see problems?

I see some block plugin was not found warnings in the logs, e.g. "The "field_block:node:project:field_content" block plugin was not found" but I don't see a problem editing content or on the front end. Will investigate more tomorrow.

No, it's just test fails on missing schema:

In ConfigSchemaChecker.php line 98:

Schema errors for core.entity_view_display.media.image.hero with the follow
ing errors: core.entity_view_display.media.image.hero:third_party_settings.
layout_builder missing schema

I'll ask Adam if he knows what this is about.

Comparing with other similar config I will delete lines referencing layout builder and try again.

I see you beat me to it. Thanks!

Whew! Green.

Merged into 1.x, thanks!

Automatically closed - issue fixed for 2 weeks with no activity.