Changing Image transforms for different media queries 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?
This is absolutely possible using plain old HTML, and media queries within a &lt;picture&gt; tag.
Within the tag you set your base image &lt;img&gt; to the url of the smallest size, and a &lt;source&gt; with a media query, like this:
&lt;picture&gt;
  &lt;source 
    srcset=&quot;{{ image.url('gridLarge')&quot;
    media=&quot;(min-width: 1000px)&quot;
  /&gt;
  &lt;img 
    src=&quot;{{ image.url('gridSmall') }}&quot; 
    alt=&quot;Image of a thing&quot;
  /&gt;
&lt;/picture&gt;