[Resolved] Responsive image in hero header

[KEVIN]

Hi guys,

First of all, thank you i really like your work.

As an IT engineer and professional in Web Performance I’ve got a huge issue.

Indeed, there are no possibility to chose a specific image / have an auto resizing image for mobile on the hero header.
We can chose between Custom Image or a Featured Image but if we chose a really beautiful image of for example 1920x800px (180Ko) for desktop it’s ok, but the same image is loading for mobile and that’s really not ok…

Indeed there is an impact directly to the Largest Contentful Paint (and other loading time metrics) on mobile which is now really important to optimize for SEO and UX.

So i found one of David solution doing a specific css :

@media(max-width: 768px) {
    .page-hero.mobile-hero {
        background-image: url(full_url_to_your_image_goes_here);
    }
}

But it’s ok only for one image, and i’ve got a specific image on all my pages/posts. It would be a lot of css to add…
I thought about a Featured Image specific for mobile we could put on each pages / post… and / Or maybe for you giving the possibility to put a Custom Image for mobile… but that doesn’t not solve so solution to be “automatic”. So why not crop / resize the image we import for mobile by your side ?

Do you have maybe another great solution ?

Thank you

Kevin

[Elvin]

Hi Kevin,

Here’s a PHP snippet that can automatically fetches image URL for single posts’ featured image and makes a CSS entry for it:

add_action( 'wp_head', function() {
    if( is_single() ) {
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium'); 
        echo '<style>
        @media(max-width: 768px) {
            .page-hero.mobile-hero { background-image: url('.$featured_img_url .');}
        }
        </style>';
    }		
});

But if it’s for custom image then just take the custom image’s URL page and do the CSS manually. You can use a Hook element to insert the custom CSS for you and match its display rule with the Header Element that uses custom image.

Or you can also add in the custom image’s custom CSS by adding the <style>..</style> containing the CSS within the Header element’s code area.

[KEVIN]

Hi Elvin,

Thank for your really quick answer 🙂
Your snippet is really good thank you. What is the condition for apply this to Pages too ?

The only problem i’ve got now is that the image is very blur (300px) but I suppose this is because of the Medias Setting in WordPress for “medium” thumbnail… (Or is it somewhere else ?) What do you recommend for thumbnail, medium and large ?

And for custom image, indeed i will make a specific code for those one. Thank a lot

[David]

Hi there,

in the code Elvin provided change: 'medium' to 'medium_large'

[KEVIN]

Hi David,

thanks indeed it’s much better, is “medium_large” a add_image_size you add with the theme ?

And what about the condition for apply the snippet to Pages too ?

PS : What do you recommend for dimensions of a home hero image / feature image ? (thinking about UX and SEO)

[David]

1. No, the medium_large is a size generated by WP – its 768px wide – there just isn’t an option to change it in the media settings.

2. In the code Elvin provided change this line:

if( is_single() ) {

to:

if( is_singular() ) {

Size of the image – really depends on your layout. If you’re using a Full Width Header Element then 1920px is great if you want the image to be high quality, but it comes at the cost of file size.
If the image is being overlayed with a color and/or text and not as visible, then reduce its size where the quality is still acceptable. e.g 1024px or 1200px.

Feutured Images that are displayed within the page, again depends on the layout, generally a post with sidebar will only require an image of around 768 – 900px wide…

[KEVIN]

Hi again,

Thanks a lot guys, it’s clear, I really like your team 🙂
It’s much better for me now thanks to this code ^^
I’ll continue testing but i can mark this support topic as resolved.

See you and thank you again

[David]

Glad we could be of help

[Author]

Posts