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?
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP