1

I have set up the following:

add_image_size( 'featured-image', 1600, 450, true );

which is used to serve a full width image on the website I'm building, but, as you can imagine, for mobile this is re-scaled to a ridiculously small height and looks really odd on mobile.

I have created a new image size which I've named 'featured-image-mobile' and has the dimensions 650px by 448px.

On the actual page I am displaying the full width image like so:

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>"
    alt="<?php echo $altTag; ?>"
    title="<?php echo $titleTag; ?>">

Is there a way I can keep

the_post_thumbnail_url( 'featured-image' );

for everything except a screen resolution of 650px, and then change the image size to the following?

the_post_thumbnail_url( 'featured-image-mobile' );
4
  • In HTML5 there is a new attribute for IMG srcset
    – David Lee
    Mar 1, 2017 at 22:41
  • Yes I did try that with no success. For example I put did the following: '$img_src = wp_get_attachment_image_url( $post_thumbnail_id, 'featured-image-mobile' ); $img_srcset = wp_get_attachment_image_srcset( $post_thumbnail_id, 'featured-image' ); <img src="<?php echo esc_url( $img_src ); ?>" srcset="<?php echo esc_attr( $img_srcset ); ?>" sizes="(max-width: 650px) 650px, 440px"> ' But it only ever served the small image 'featured-image-mobile' at all screen sizes, not the original cropped image 'featured-image' I set for desktop and tablet. Mar 1, 2017 at 23:06
  • What is your actual breakpoint range when you meant 650px? What about that of your 'featured-image-mobile'? Mar 2, 2017 at 0:49
  • 1
    @DavidLee, srcset assumes all images has the same aspect ratio, and therefor interchangeable, which is not the case here. Mar 2, 2017 at 6:10

3 Answers 3

4

WordPress wp_is_mobile() can be the function that you're looking for.

// Use the build-in function if WP
if(wp_is_mobile()) // On mobile
{
    the_post_thumbnail_url('featured-image-mobile');
}
else
{
    the_post_thumbnail_url('featured-image');
}
0

You could output both images and just switch between the two using css (I am just using basic bootstrap classes here and omitting unnecessary markup for clarity sake):

<div class="featured-image hidden-xs">
   <img src="<?php the_post_thumbnail_url( 'featured-image' )?>">
</div>

<div class="featured-image-mobile visible-xs-block">
   <img src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>">
</div>

Alternatively, you could add the mobile version of the image as a custom attribute:

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>" data-mob-src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>">

And subsequently switch the source of the image with Javascript on mobile.

-2

You need to do a conditional (if) to change or select the part for big devices or mobile, if you want to set different images.

function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

// Use the function
    if(isMobile()){
        // Do something for only mobile users
        the_post_thumbnail_url( 'featured-image-mobile' );
    }
    else {
        // Do something for only desktop users
        the_post_thumbnail_url( 'featured-image' );
    }

There are more examples here https://stackoverflow.com/questions/4117555/simplest-way-to-detect-a-mobile-device

3
  • server side checking for device type went out of fashion years ago. It breaks caching and just not smart unless you have some very specific needs Mar 2, 2017 at 6:04
  • @mark-kaplun This is a suggestion to a non sense WP usage. It depends on knowledge not for a fashion. If still works (not deprecated) can be used. Mar 2, 2017 at 6:17
  • it never worked, Even for a pure mobile device like iphone 7 the result is not good enough as you will want to display different things in it landscape and protrait modes, and the which between them do not involve sending any request to the server. Mar 2, 2017 at 9:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.