[Resolved] Make page hero retina-ready

[mkjj]

This question has been asked before, but I’m not sure if anything changed. It becomes more important these days to provide images for retina or 4k displays. I’ve never been very fond of this idea. But since I own a 4K display, I can better understand why some customers insist on this. It’s perfectly fine to provide the high res images via a media queries. However, it’s not the most elegant way if you use many header elements. Is there a built-in function to do this? If not, this would probaby a good idea to add to the elements feature. For me, it’s not a problem at all to change the CSS. However, many less experienced user would be very happy about it. Additionally, it would help to keep all relevant data in one place.

[Elvin]

Hi there,

At the moment, the way to go is still by CSS for retina display.

See short discussion here – https://generatepress.com/forums/topic/loading-a-retina-res-hero-image/

But I agree, at this point, it may be a good idea to have this option. I’ll tag Tom to this and see what he has to say. 😀

[Tom]

Hi there,

Have you considered using SVGs, instead? That way they’re retina-ready and you’re not needing to upload two completely separate images.

[mkjj]

Hi,

I use SVGs as much as possible. Unfortunately, this is often not possible for the page hero images. Don’t get me wrong, I love everything about the elements feature. However media queries can become a bit tedious if using many different header images. In addition to that, it is simply not editable for most user. I hate bloated themes, but this might be a quite useful addition, since large retina displays are more common now.

[mkjj]

Thanks, Elvin. I had already found and read the discussion. Sorry for not having mentioned this in my post.

[mkjj]

Sorry to bother you again. Just to make it clearer why I would prefer a built-in feature for retina images. For multiple headers I have to make the media queries very specific. Something like:

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
	.page-id-746 .page-hero {
		background-image: url('/wp-content/themes/generatepress_child/img/doris-kirch-header-lp1-lg.jpg');
	}

While this is perfectly fine, it can become tedious to maintain, if pages change so that the ID (or the class in this case) won’t match anymore.

In addition to that: If the image changes, you could easily forget to change the CSS. And this might cause problems.

[mkjj]

If you should ever add this feature you might consider adding a second option for mobile devices. The page hero image could then perfectly adjusted to all devices. I don’t need this all the time. But sometimes the larger images simply don’t work on smaller displays. An option for that would be very handy.

[David]

Hi there,

if you’re site is using the featured images for the header element backgrounds then you can use a PHP Function to replace the background image – for example:

add_action( 'wp_head', function() {
    // Set condtion for single posts
    if( is_single() ) {
        // Get the featured Image - size Full.
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 
        // Output your CSS using the $featured_img_url variable
        echo '<style>.page-hero { background-image: url('.$featured_img_url .');}</style>';
    }		
});

Just replace the full with the attachment slug you want to use. And update the <style> to incorporate the necessary @media queries.

[mkjj]

I’m not quite sure that I get the idea. I would set a 1920px image in the header element and set the retina image as the featured image (or vice versa). The function would then replace the smaller image with the larger one (if the media query is set correctly). Did you mean that? This would indeed make all settings available in the dashboard with the exception of smaller images. Your solution would indeed make things easier, since I post IDs would be filled in automatically. Hm, very slick! Will give it a try soon.

[mkjj]

I’m stuck here. I tried it, and both images (header element and featured image) were shown on the page. So, I obviously have to choose the featured image in the header elements settings. However, how would I then use a smaller image in the media query without writing the url manually?

[David]

In the Header Element you have the option to Disable the Featured Image – which will remove the themes featured image from the content.

Then you can use a separate PHP Snippet to change the default background image size eg.

add_filter( 'generate_page_hero_background_image_url', function( $image_url, $options ) {
    $image_url = get_the_post_thumbnail_url( get_the_ID(), 'large' );
    return $image_url;
}, 10, 2 );

This example will set the background size to the large attachment.
And the previous snippet will override that if your display conditions / @media query are met

[mkjj]

Ah, now I get it. This works really good. I made a minor change to make sure that nothing is loaded if a featured image is not set:

add_action( 'wp_head', function() {
	if( is_page() ) {
			$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 
		  if ( !empty( $featured_img_url ) ) {
				echo '
				<style>
				@media (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
				.page-hero { background-image: url(' . $featured_img_url . '); }
				}
			  </style>';
		}
	}
});

Works great. Would you consider this code ok (as in best practice, I mean)?

[mkjj]

Would this be more appropriate:

if ( has_post_thumbnail() ) {...

[David]

That code is fine !
And you could use has_post_thumbnail() – but it doesn’t make a lot of difference except its more readable 🙂

[mkjj]

Great! Again, best support ever! This is really a workaround that makes things much easier to maintain. I can’ really express how happy I am with Generatepress!

[Author]

Posts