[Resolved] How to use mobile featured image?

Hi Victor,

You can try doing it through custom CSS as it’s only a Background image.

Example:

@media (max-width: 768px){
    .page-hero{
        background-image: linear-gradient(0deg, rgba(15,0,0,0.39),rgba(15,0,0,0.39)), url(https://fazarcon.pluginsupportwp.com/wp-content/uploads/2022/10/34deb0eb-e50e-3fe0-9172-de6b1e1698db.jpg);
    }
}

Hi there,

the snippet you mentioned at the start of the topic, will only apply to a HTML <img, it won’t change how background images in the page-hero are applied.

Instead try this:

1. Create a new Hook Element.

2. Add this code to the hook element:

<?php
// Get the 3 featured image sizes
$featured_img_url_small = get_the_post_thumbnail_url(get_the_ID(),'medium');
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
$featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
// preload featured image for current screen size
echo '<link rel="preload" media="(max-width: 420px)" as="image" href="'.$featured_img_url_small.'"/>';
echo '<link rel="preload" media="(max-width: 768px) and (min-width: 421px)" as="image" href="'.$featured_img_url.'"/>';
echo '<link rel="preload" media="(min-width: 769px)" as="image" href="'.$featured_img_url_full.'"/>';
// print styles to add responsive hero background
echo '<style>
@media(max-width: 420px) {
    .page-hero { background-image: linear-gradient(0deg, rgba(15,0,0,0.39),rgba(15,0,0,0.39)), url('.$featured_img_url_small.');}
}
@media(max-width: 768px) and (min-width: 421px) {
    .page-hero { background-image: linear-gradient(0deg, rgba(15,0,0,0.39),rgba(15,0,0,0.39)), url('.$featured_img_url.');}
}
@media(min-width: 769px) {
    .page-hero { background-image: linear-gradient(0deg, rgba(15,0,0,0.39),rgba(15,0,0,0.39)), url('.$featured_img_url_full.');}
}
</style>';
?>

3. Set the Hook to wp_head
4. Set the Priority to 999
5. Check the Execute PHP option.
6. Set the Display Rules to where you have the page hero that you want to apply this too.

What the code does is:

Prepare the 3 sizes of featured image:medium, medium_large, full
Each image is preloaded and added as the background image of the hero based on the screen size.
medium upto 420px, medium_large upto 768px. full over 768px.

Aside from using a smaller image size where applicable, it adds preload links, so the browser can start downloading the appropriate size image earlier.

Awesome – glad to hear that!