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?
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.