Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
PictureFill with Craft Transforms
<span data-picture>
<span data-src="{{ asset.getUrl('smallFullHi') }}"></span>
<span data-src="{{ asset.getUrl('medium') }}" data-media="(min-width: 600px)"></span>
<span data-src="{{ asset.getUrl('mediumHi') }}" data-media="(min-width: 600px) and (min-device-pixel-ratio: 2.0)"></span>
<span data-src="{{ asset.getUrl('large') }}" data-media="(min-width: 1000px)"></span>
<span data-src="{{ asset.getUrl('largeHi') }}" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<img src="{{ asset.getUrl('smallFull') }}" alt="">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment