How do you display different Featured Image with different sizes when using Media Queries

Question

Since featured image sets default sizes, example:

add_image_size( 'post-thumbnails2200px', 360, 250, true );
add_image_size( 'post-thumbnails1280px', 250, 250, true );
add_image_size( 'post-thumbnails800px', 150, 250, true );

my question is how do you display featured image with different sizes without using the css max-width or any css styles.

I'm having trouble displaying it when i try on different resolution. actually, i have no idea what to do. when i use css, it gets distorted since the height is fixed in 250px.

i am wondering if you someone could share their php if and else script or javascript or anything. please help!

score 3 · Accepted Answer · edited May 23 '17 at 11:44

With just Javascript and PHP:

PHP

You can get the various image sizes using the_post_thumbnail() as per the codex:

the_post_thumbnail();                  // without parameter -> 'post-thumbnail'

the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
the_post_thumbnail('full');            // Full resolution (original size uploaded)

the_post_thumbnail( array(100,100) );  // Other resolutions

Javascript

You can get the widow size as described here using jQuery(window).width().

By combining the two, you could do something like the following in your theme's template files, inside the loop:

<script>
    if( jQuery(window).width() < 480 ) {
        <?php the_post_thumbnail('medium'); ?>
    }
    else if( jQuery(window).width() < 960 ) {
        <?php the_post_thumbnail('large'); ?>
    }
    else {
        <?php the_post_thumbnail('full'); ?>
    }
</script>

Caveat: I don't have a machine to test this on right now, but if the above doesn't work, try replacing <?php the_post_thumbnail('medium'); ?> with image = <?php get_the_post_thumbnail($post_id, 'medium'); ?>; etc. (see info about get_the_post_thumbnail() here).

<?php $post_id = get_the_ID(); ?>

<div id=my-div></div>

<script>
    if( jQuery(window).width() < 480 ) {
        var image = <?php get_the_post_thumbnail($post_id, 'medium'); ?>;
    }
    else if( jQuery(window).width() < 960 ) {
        var image = <?php get_the_post_thumbnail($post_id, 'large'); ?>;
    }
    else {
        var image = <?php get_the_post_thumbnail($post_id, 'full'); ?>;
    }

    jQuery('#my-div').append(image);
</script>

Is there a way of rerunning the function when the window is resized? — Luc, Jun 30 '14 at 12:26
No, not without refreshing the page. Basically by using the above code you're making an assumption about the largest possible image size you'll need based on the initial window size. In fact, I've never used this code, I was just answering the question. :) In practice, I only load the largest image I think I'll ever need, optimized to reduce file size as much as possible. — apostl3pol, Jul 01 '14 at 00:16

score 0 · Answer 2 · answered Apr 20 '13 at 19:39

0

I would recommend you to use Adaptive Images. You'll like it.

answered Apr 20 '13 at 19:39

Akshaya Raghuvanshi

2,237
22
21

score 0 · Answer 3 · answered Dec 30 '13 at 22:04

I got perfectly responsive featured and posted images in wordpress when I followed this tutorial:

http://premium.wpmudev.org/blog/diy-truly-responsive-images-on-your-wordpress-website/

Using the pretty amazing Picture Fill plugin:

https://github.com/scottjehl/picturefill

I came back to this post to post this. But I warn you, the tutorial is slightly out of date and instead of div's the plugin creator has switched to span's. Keep this in mind when you pull the hand gun out of your sock, when you are ready to give up and eject.

How do you display different Featured Image with different sizes when using Media Queries

3 Answers3