Skip to content

Instantly share code, notes, and snippets.

@cmalven
Created July 29, 2014 01:07
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save cmalven/202027816afb2604e302 to your computer and use it in GitHub Desktop.
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