Archived topic
How to use mobile featured image?
5 replies · Started by Victor on February 8, 2023
Hello,
I'm trying to display different sized images on mobile. I use the Header Page Hero Element with the Background image > Featured image. I am unable to load a different featured image on mobile. I tried inserting this snippet, but on my test it still loads the full 1024px header image:
function db_modify_srcset_sizes($sizes, $size) { return '(max-width: 420px) 300px, (min-width: 421px) 768px, (min-width: 769px) 1024px, 100vw'; } add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);
Example of page: https://hristosinafrica.org/contact
Thanks.
Victor
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);
}
}Thanks, that's fine, but how can I upload the Featured post image of each post, instead of a single given image?
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.
It works and is live! Now my site loads faster. Thanks!
Awesome - glad to hear that!