4

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?

1
  • As William Turrell suggested, the proper solution is to let your browser select the correct image size by using srcset/sizes attributes. This leverages WordPress's built-in image serving capabilities (thumbnail, medium and large sizes). Right now you would use the RICG plugin but soon, picture/srcset/sizes will be integrated into the core code of WordPress. Jun 15, 2015 at 20:40

3 Answers 3

4

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

4
  • You are incorrect. wp_is_mobile() targets both mobile and tablets. From the docs: "You should realize that this does not detect a mobile phone specifically, as a tablet is considered a mobile device". Proven many times by myself using this function. There's also a good plugin (wordpress.org/plugins/mobble) for even better and more detailed coverage. See plugin's code for details. Jul 20, 2015 at 11:59
  • @Ihor-paspar2.com It does not detect all tablets, and the function gets updated as well AFAIK. It is still just very basic. I have not recently checked that function again as I do not use it ;-) Thanks for this info though. It is appreciated Jul 20, 2015 at 12:08
  • @Pieter Goosen, yes, it's not bullet-proof, but it works in real life. As I said in another comment, it will work in 96-98% of cases, proven on many projects, heavily analized during several months after launch. And you should not care about the rest 2-4% as they are mostly edge-cases. Or unless you are Amazon Store and every 1% is equal to thousands of dollars in missed revenue. Jul 20, 2015 at 13:36
  • wp_is_mobile() and mobble will not work with aggressive caching systems, such as nginx with fast CGI. I love this caching system because it skips PHP execution. Nov 1, 2015 at 7:35
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.

0
1

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.

2
  • Thanks for your idea cristian! If there is no other solution, I try to write a function to wrap this - could imagine this is very expensive to place it everywhere.
    – p2or
    Feb 17, 2015 at 8:23
  • It's going to get troublesome, there are two scenarios you should consider: user has javascript turned off, resources should never be cached ! Feb 17, 2015 at 10:29

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.