Responsive Images

Question

Is there a native function to display the correct responsive image size for post thumbnails or gallery images depending on the screen resolution?

Normally I'm using:

1.Custom image sizes:

function customImageSetup () {
  add_theme_support( 'post-thumbnails' );
  add_image_size('grid_1 mini square', 60, 60, TRUE);
  add_image_size('grid_2', 160);
  add_image_size('grid_2 square', 160, 160, TRUE);
  add_image_size('grid_4', 360);
  add_image_size('grid_4 square', 360, 360, TRUE);
  add_image_size('grid_6', 560);
  add_image_size('grid_6 square', 560, 560, TRUE);
  add_image_size('grid_8', 760);
  add_image_size('grid_8 square', 760, 760, TRUE);
  add_image_size('grid_10', 960);
  add_image_size('grid_12', 1160, FALSE);   
}

2.Display e.g. the thumbnail with .img-max class assigned:

<?php the_post_thumbnail('grid_4', array( 'class' => "img-max"));?>

3.And this simple css line to fit the image:

.img-max { width:100%; height:auto; }

This works in most cases, but especially in terms of responsive web design it would be quite useful to make use of custom image sizes at different screen resolutions.

Is there a wordpress function to replace images server side and without javascript?

Answer 1

To add to the answer from @cristian.raiber, there is no function in Wordpress or php to detect screen sizes, and there will in all probabilty never be such functionality. Php runs server side, which runs before clients side which is browser side. As for php, and for that matter Wordpress, I cannot see any future implementation of any kind of function to handle such detection in any form of predictable and reliable way.

There is just no fool prove way to make this work, no matter how you look at it. Server side operations is predictable and something we can trust as it does not rely on end user input, and most importantly cannot be manipulated by the end user. Client side operations can be maniplulated.

Look at the following client side variables and manipulations:

• Cookies -> Cookies can be deleted or blocked by the user, cookies can also be blocked by state or country laws

• jQuery -> End users can disable jquery anytime

• Browsers -> Sites behave differently in different browsers. End users can disable browser detection

Client side solutions will work in some cases, in other cases not based on the above (there are other points not mentioned as well).

You could use wp_is_mobile() to detect mobiles (it only works on mobiles, not tablets) and then dish up the correct image size accordingly, BUT, the following should be noted

• As the above points on client side operations, this is also an unreliable function as it also depends on client side operations. In my opinion, a mickey mouse function

• It does not detect screen sizes, and it only detects mobile phone devices. It does not work on tablets

CONCLUSION

The only proper solution to this is to optimize your images as best you can (this require proper planning and correct image sizes to be dished up according to content size. Don't load a 700px image when your content max width is 500px) then let the browser resize the images accordingly. I know this slows loading times as browsers use a lot of resources to resize images, but at least you can be able to serve content reliably to the the end user

Answer 2

There's no native function, but the RICG Responsive Images plugin will add a srcset attribute with the available image sizes. Srcset (along with the <picture> element), is steadily gaining browser support - it doesn't need any javascript and it's up to the browser to decide which is the correct image to load.

The attribute is added for posts where you've used the 'Add Media' button and there are methods to call it by hand within a theme template – you could modify your customImageSetup function to call tevkori_get_srcset_string(), for example.

It's non-invasive, in that it won't make any changes to your media library or database and if you uninstall it your site will go back to normal.

Answer 3

No, there isn't such a thing at the moment. However, there is a solution you could try if you're really keen on this.

This is something I've used in the past and it's worked out fine, although it has its limitations.

The solution:

You could write a small JS function that gets the user's current screen resolution and have it written to a cookie. You're also going to need a function that updates the value stored in the cookie if the user is resizing his browser window.

You can read this cookie using PHP and have something along the lines of:

if($screen_resolution > 640 && $screen_resolution < 860) {

 the_post_thumbnail('your-custom-image-size-for-this-viewport-here');
}

P.S: Please take into account that this solution doesn't work too good with caching systems.