Skip to content

Instantly share code, notes, and snippets.

@umkasanki
Last active April 13, 2019 10:03
Show Gist options
  • Save umkasanki/6e3f5bec3f9a25c8cfb5f3913bc80d04 to your computer and use it in GitHub Desktop.
Save umkasanki/6e3f5bec3f9a25c8cfb5f3913bc80d04 to your computer and use it in GitHub Desktop.
lazy-loaded responsive image for craftcms templates
{% import '_inc/macros.twig' as macro %}
{% set imageQr = entry.image %}
{% if imageQr|length %}
{% set image = imageQr.one() %}
<img class="lazy"
sizes="(min-width: 62.5rem) 62.5rem, 100vw"
data-src="{{ macro.crop(image, 10/4, 1000) }}"
data-srcset="{{-
macro.crop(image, 10/4, 400) ~ ' 400w, ' ~
macro.crop(image, 10/4, 700) ~ ' 700w, ' ~
macro.crop(image, 10/4, 1000) ~ ' 1000w, ' ~
macro.crop(image, 10/4, 1600) ~ ' 1600w' -}}"
/>
{% endif %}
{# macro.fit(image, 375) #}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment