TransWikia.com

Changing Image transforms for different media queries

Craft CMS Asked on November 29, 2020

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?

One Answer

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>

Correct answer by dmatthams on November 29, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP