0

Is it possible to set different image transforms for different media queries?

I have a grid layout containing 1 large image and four smaller images on large screens. I have created two image transforms; one called gridSmall and another called gridLarge.

When the screen size is made smaller, all the grid items are arranged in rows of two and ideally I would want them the same size. So therefore I would need the to change the transform of the gridLarge to gridSmall to match the other four images. Is this possible to do without a third party plugin?

1

This is absolutely possible using plain old HTML, and media queries within a <picture> tag.

Within the tag you set your base image <img> to the url of the smallest size, and a <source> with a media query, like this:

<picture>
  <source 
    srcset="{{ image.url('gridLarge')"
    media="(min-width: 1000px)"
  />
  <img 
    src="{{ image.url('gridSmall') }}" 
    alt="Image of a thing"
  />
</picture>
| improve this answer | |
  • Thank you, dmatthams. This was the solution I ended up using. I had meant to post an answer here. – Adam Sep 22 at 12:12

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.