0

I have a simple two columns website (one sidebar + one maincoulmn). In the sidebar area I use this code to show some post thumbnails:

<?php the_post_thumbnail('custom-size-small' ,array('class' => 'image', 'title' => strip_tags(get_the_title()), 'itemprop' => 'image')); ?>

My website is responsive and on smaller devices the sidebar drops underneath the main column and when this happens the sidebar becomes as wide as the main column. My 'custom-size-small' is '300px' and you can imagine when the sidebar places under the column, if the viewer is still larger than 300px, the quality of the images suffers. That made me think of this relatively new feature on WP in which srcset is used. But the problem is that the way I want to make use of it is quite the opposite we normally do, is that, bigger images for smaller screens and vice versa.

Can we make WP use the 'custom-size-small' on desktops and the bigger 'custom-size-big' which is twice as big, on smaller screens?

/* I'm not a coder, I can only tamper with the codes. */

That would be great if you could tell me what changes I should make to this?

<?php the_post_thumbnail('custom-size-small' ,array('class' => 'image', 'title' => strip_tags(get_the_title()), 'itemprop' => 'image')); ?>
  • Thanks, Mark. I think I'm going to have to do something with the sizes attribute to get the desired result. I need to add the following to the_post_thumbnail but I don't know how! > sizes= “(min-width: 900px) 300px, 600px” Please note that I want to use the custom-size-large image on viewports which are less than 900px wide and the custom-size-small on viewports that are greater than 900px. – G.determinism Aug 21 '16 at 22:58
  • Please use the edit link on your question to add additional information. The Post Answer button should be used only for complete answers to the question. - From Review – Gabriel Aug 21 '16 at 23:31
0

This is mostly off-topic, but your assumption that srcset is somehow related to going desktop => mobile is just false. the srcset attribute notifies the browser about alternative images and sizes and it is the browser that selects which image to use based on whatever criteria it wants. Therefor there is most likely nothing wrong with your code if it outputs the srcset attribute and you see a non optimal fit of the image because the browser decided it is the best thing to do, for example if it has already an image in its cache it might prefer not to load a new one. Since the srcset attribute is designed to leave control in the hands of the browsers, there is not much you can do about on wordpress side.

-1

You can add to CSS this code:

.image {
    max-width: 100%;
    width: auto;
    height: auto;
}

and it will be responsive!

  • since the problem is the quality of the image when it is stretched, this will not solve it – Mark Kaplun Aug 21 '16 at 15:53

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.