Skip to content

Instantly share code, notes, and snippets.

@tjFogarty

tjFogarty/picture.twig

Created February 24, 2015 20:40
Show Gist options
  • Save tjFogarty/c9d6d5255b6e3e095ca4 to your computer and use it in GitHub Desktop.
Save tjFogarty/c9d6d5255b6e3e095ca4 to your computer and use it in GitHub Desktop.
Download ZIP
Picture element + Twig
Raw
picture.twig
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="{{ slide.image_desktop | tojpg | resize(1200) }}" media="(min-width: 1000px)">
<source srcset="{{ slide.image_tablet | tojpg | resize(800) }}" media="(min-width: 767px)">
<source srcset="{{ slide.image | tojpg | resize(480) }}, {{ slide.image | tojpg | resize(766) }} 2x" media="(max-width: 766px)">
<!--[if IE 9]></video><![endif]-->
<img class="slider__image" srcset="{{ slide.image_tablet | tojpg | resize(800) }}" alt="{{ slide.title }}">
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment