adaptive featured images wordpress 4.4 grid

Question

I have added three new featured image sizes to my functions.php;

add_image_size( 'feature-large', 768, 9999 );

add_image_size( 'feature-medium', 500, 9999 );

add_image_size( 'feature-small', 480, 9999 );

I want to use featured-medium on screens that are wider than 768px, featured-large on screens below 768px and feature-small on screens below 480px.

at the moment I'm just using <?php the_post_thumbnail('feature-medium'); ?> I'm using a bootstrap grid that is why I want to use the feature-medium on larger screens.

Is this even possible? Does anyone have any ideas how to implement this in the easiest possible way?

I look forward to your answers/ideas.

Many thanks

Scot

Answer 1

Since you can't detect screen size using pure PHP, you have 2 choices.

1- Use JavaScript or jQuery to get the screen size and then fetch contents dynamically using Ajax/JSON. You can find a solution here.

2- Load all of the 3 sizes of the thumbnails, and then use CSS media queries to show the proper image size based on the visitor's screen (only recommended on pages with low number of images).