Mobile Featured Image

Hi Laura,

Try David's solution here:
https://generatepress.com/forums/topic/how-to-resize-featured-image-on-mobile/#post-1849944

Hi Ying

Thanks for the reply.

Tried the code in David's solution however adding it to the funtions.php did not do anything.

Is there another solution, or can we completely disable the featured image just for mobile?

Hi there,

can you share a link to your site where i can see the featured image you want to change ?

Hi David

It's on a test site at the moment so we do not have a link that we can share.

The featured image we are talking about is the one displayed at the top of each post. But it loads the same file size for desktop and mobile, so we wanted to make the mobile file size for the image smaller.

If not possible, just have the featured image disabled for mobile-only. (not just hidden with css)

Thanks

I wish it was as easy as that :) Until WP implements support for the <picture> element we are stuck with <img src-set which simply provides the browser with the various size images for it to choose from.

As the majority of mobile devices are now x2, x3 or x4 DPR ( Device Pixel Ratio ) a small 360px wide mobile screen actually commands the need for a 1080px image or greater to feed the hi-res screen. So even if we treat it with the code provided in the link above its up to the browser if it chooses to go all big on the resolution.

This is where i would need to be able to see the site to advise on. Happy to come back to this when it is available or if you need to provide us a login you can do so in the Private Information field.

Removing the feature image can be done with a PHP Snippet - for example this:

add_filter( 'option_generate_blog_settings', 'db_remove_featured_img_mobile' );
function db_remove_featured_img_mobile( $options ) {
    if ( is_single() && wp_is_mobile() ) {
	    $options[‘single_post_image’] = false;
	}
    return $options;
}

I assumed this is a single post feature image.
And like all things to do with WP images there are some caveats. For one you need to consider page caching. If your server supports page caching then it should really have a separate cache for mobile and desktop. Otherwise you may find the above code does nothing as the image got cached in the page. You therefore may want to add some CSS to hide it too.

Let me know

The whole image thing is very frustrating! :)

I did try adding the PHP snippet to the funtions.php in our child theme. However, it brought up a few errors.

The site doesn't have any caching, as still a test site at the mo.

I guess we will have to go back to the drawing board. thanks for your help

Oops apologies my code above had some curly quotes, Fixed that, and i tested the code and it does work.

Happy to revisit this anytime.

Hi David

Thanks, just changed the curly quotes and it worked a treat! Thanks very much :)

Awesome - glad to hear that