Recommended way of assigning different image sources for responsive hero images

Hi there,

background images are added using CSS, so there is no srcset or other image meta ( such as its orientation ) to work with.

But there are some workarounds, if the image was loaded dynamically.
Would the hero background image be the featured image of the page ?

Or do these features of GP Premium you speak of for hero images etc. make my idea more trouble than it’s worth?

It is not worth the trouble.

it’s recommended to use the page-hero block element, but I’m not sure this way is more user friendly than just writing raw CSS

Using the block element – page hero is indeed more user friendly. As you can change the images with in the UI without touch CSS.

In this particular case I’m just looking to place two large images on the homepage that won’t really work for phone and tablets. So I guess I don’t really mind how it’s applied (featured image, or otherwise) if that’s what you’re asking.

You can add two image block to the block element – page hero. what will the layout be? Two images side by side or be stacked?

The real two images in question are the landscape and portrait versions that will essentially need to occupy the same block; and the browser will choose between them based on the width of the viewport.

WP generates different sizes of image when you upload an image to media library, and WP chooses the image srcset based on the image size and view port width.

The default srcset WP generates are Thumbnail, Medium, Large, you can change the width/height for each size at settings > media.

Hopefully it generates the size you want, and WP will automatically choose the most fit size based on screen sizes.

But be note, the setting will apply to all images.

If you just want the two specific images to have this setting, it might be easier to use background image, and use CSS to change the background image to portrait version on mobile.

I would say from my many years experience of helping several thousand users and having viewed at least as many thousands of sites, in the context of support, design and development, i would guess at least 20-30% of hero sections don’t have content over the images.
It’s generally a good design decision to not overlay content if the image is important content and not just for presentation.

As to your request, although you may feel is a commonly asked question and a super common modern web design requirement, i can say from my experience that this is not a common requirement at all. And it comes with several complications that need to be considered.

Ask yourself this – is it the image that will define the aspect ratio of the Hero, or is it the content that sits over the image ? Its a hypothetical question btw, but it will most probably become really relevant at a later point.

So to build a Page Hero:

1. Storing a separate Portrait image
WP doesn’t provide this as a built in option. So it will require you to add a Custom Field to store the portrait images in the single post meta.

Of the many ways to adding custom fields, the easiest is to use the ACF plugin.
It does a lot of the grunt work and has a nice UI.

https://wordpress.org/plugins/advanced-custom-fields/

2. Adding the custom fields:
Add the ACF plugin, and in its settings you can create a Field Group for your Posts.
2.1 add a new Field for the Portrait Image.
2.1.1 Give it a name eg. Post Portrait Image
2.1.2 And make a note of the Field name eg. post_portrait_image
2.1.3 Set the Return Value to Image ID
2.1.4 Set the Rule to Display on All posts

See here for reference:
https://app.screencast.com/hOtagGWrzkGs6

Once that is done you should see the Portrait Field Option in your single Post.

3. Adding the images.
In your single post use the Featured Image to add your Landscape Image.
By using the featured image for this, that image can be used on any archive pages or elsewhere eg. an SEO plugin needs it for its OpenGraph Meta.
Then add the Portrait image to your new Custom Field.

4. Create the Page Hero using a Block element.
For this you will require the FREE version of the GenerateBlocks plugin:
https://wordpress.org/plugins/generateblocks/

4.1 Appearance > GeneratePress, activate the Elements Module:
4.2 in Appearance > Elements -> Add New -> Block
4.2.1 In the element settings sidebar choose the Page Hero

https://docs.generatepress.com/article/block-element-page-hero/

4.2.2 And set its Display Rules

then you can build your hero inside the block element

5. Building the hero
whilst in the element editor open the List View just for reference:
https://wordpress.org/documentation/article/list-view/

Using GenerateBlocks you will create the following layout starting with a Container Block and the GB Blocks inside:

Container Block #1
---- GB Image Block #1
---- GB Image Block #2
---- Container Block #2
---- ---- GB Headline Blocks for your overlay content

Container Block #1
In Advanced > Additional CSS Class(es) add: custom-hero

Container Block #2
In Advanced > Additional CSS Class(es) add: custom-hero-content

GB Image Block #1 & GB Image Block #2
https://docs.generateblocks.com/article/image-overview/
All GB blocks have dynamic data built in – see here:

https://docs.generateblocks.com/article/dynamic-data-options-overview/

For both blocks you will enabled the Dynamic Data
Image Block #1 will have its Image Source set to Featured Image
Image Block #2 will have its Image Source set to Post Meta and in the field provided add your custom field name ( see 2.1.2 ) eg. post_portrait_image

GB Headline Blocks for your overlay content
You can use GB Headline Block and its dynamic data to display content such as the Post Title.

Once all blocks are set Publish the Element.

6. the Hero HTML and custom CSS
At this stage you’re single post hero will return the following ( simplified version of ) HTML:

<div class="custom-hero">
    <figure><img landscape></img></figure>
    <figure><img portrait></img></figure>
    <div class="custom-hero-content">
        .... other blocks here
    </div>
</div>

Now it require some CSS:

6.1 Absolute position the custom-hero-content over the hero:

.custom-hero {
    position: relative;
}
.custom-hero-content {
    position: absolute;
    inset: 0;
    z-index: 1;
}

6.2 Show / Hide the relevant image

/* if the orientation is landscape hide the portrait img */
@media (orientation: landscape) {
    .custom-hero figure:nth-child(2) {
        display: none;
    }
}
/* if the orientation is portrait hide the landscape img */
@media (orientation: portrait) {
    .custom-hero figure:nth-child(1) {
        display: none;
    }
}

The CSS may need some tweaking but the rest of the responsive behaviour can be handled using the settings on each of the GenerateBlocks.

I hope that helps

1. By using the featured-image as the backbone of this strategy, if I go through all this, then I still will only be able to do it once per page, correct?

that is correct.
Although it would be possible to modify the above if necessary to use elsewhere on the page using more custom fields.

However if there were no overlay requirements then simply use a Image Block to display the image.
And if you wanted to have variant for landscape and portrait images then:

i). Add this CSS to your site:

/* if the orientation is landscape hide the portrait img */
@media (orientation: landscape) {
    .is-portrait {
        display: none !important;
    }
}
/* if the orientation is portrait hide the landscape img */
@media (orientation: portrait) {
    .is-landscape {
        display: none;
    }
}

ii) Add a block each for the Landscape and Portrait variants.
And in the blocks settings Advance > Additional CSS Class(es) field, you can attribute a CSS Class to the blocks HTML. Here you can add is-portrait or is-landscape depending on the image orientation.

2. GenerateBlocks Pro, currently provides a method of swapping ONLY static CSS background images based on different screen-sizes, and considering your specific requirements this would not be a good solution in my opinion.