Skip to content

Instantly share code, notes, and snippets.

Embed
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. -->
<noscript>
<img src="{{ asset.getUrl('smallFull') }}" alt="">
</noscript>
</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.