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


1 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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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