How to provide different sizes of images according to viewport size in WordPress?

1 Views

May be a very basic question because of the less understanding of the procedure, but what I believe is NO question is less important.

In WordPress we have 4 default sizes:

Read More
  • Original (as it’s everywhere) – no crop
  • Large – typically 1024 × 1024
  • Medium – typically 300 × 300
  • Thumbnail – typically 150 × 150 – hard cropped

And we can edit/deactivate all the default sizes except the Original and can add/edit/delete any custom sizes, even can enable 2x support using custom scripts for the widescreen devices. But that’s where my understanding stopped – we have our desired images with their sizes, now what? How can we show/deliver ’em according to the viewport sizes?

Suppose I’ve a section where the code is: 

<article class="news">
    <?php the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) ); ?>
    <div class="entry-excerpt"><?php the_excerpt(); ?></div>
</article>

If I need to throw a 2x (wider) version of the image there (instead of the thumbnail), how can I do this?

I’m asking that question because we cannot recognize viewport sizes using PHP without the help of JavaScripts, and for designing JS is additional – not mandatory. If we think the we have to throw images according to the viewport sizes without using JS, then how could we do that? That’s what actually is giving pain to me.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. I can think of only one solution without JS and it is BAD one.
    You could load all images and using CSS media queries show only one. your site will be huge and slow but if you cant use JS this is the only option i can think of.

    PHP get_browser(http://php.net/manual/en/function.get-browser.php) could be used to do some kind of raw estimation on client window size. But that would be an estimation.

    The solution I suggest is to output al images in HTML data attribute and using JS determine the correct size then replace previously empty src with corect src

    image element example:

    <img src="" 
     data-full-src=" full-link "
     data-large-src=" large-link "
     data-medium-src=" medium-link "
     data-small-src=" small-link " />

    JS function example:

    var image = getElementById( your-img-ID ); //or some other selector
var selectedSrc = "data-full-src";
image.setAttribute('src', image.getAttribute(selectedSrc) );