Skip to content

Instantly share code, notes, and snippets.

@aelvan
Created September 23, 2015 15:07
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save aelvan/34f109cf155c3a2b06b3 to your computer and use it in GitHub Desktop.
Save aelvan/34f109cf155c3a2b06b3 to your computer and use it in GitHub Desktop.
Twig macro for creating a srcset string in Craft
{% macro getSrcSet(image, sizes, upscale) %}
{%- spaceless %}
{% set sizesOut = [] %}
{% set allowScaleLarger = upscale | default(false) %}
{# loop over sizes parameter and generate transforms #}
{% for size in sizes %}
{%- spaceless %}
{% set currentTransform = {} %}
{% if size.quality is defined %}
{% set currentTransform = currentTransform | merge({ quality: size.quality }) %}
{% endif %}
{% if size.format is defined %}
{% set currentTransform = currentTransform | merge({ format: size.format }) %}
{% endif %}
{% if size.width is defined %}
{% set currentTransform = currentTransform | merge({ width: size.width }) %}
{% endif %}
{% if size.height is defined %}
{% set currentTransform = currentTransform | merge({ height: size.height }) %}
{% endif %}
{% if size.mode is defined %}
{% set currentTransform = currentTransform | merge({ mode: size.mode }) %}
{# assumes that you have a asset field named focalPoint that lets the user choose crop position #}
{% if (size.mode=='crop') and (image.focalPoint is defined) and (image.focalPoint!='') %}
{% set currentTransform = currentTransform | merge({ position: image.focalPoint }) %}
{% endif %}
{% endif %}
{# only add transform if original image is larger, or upscale was set to true #}
{% if allowScaleLarger or (image.getWidth() >= image.getWidth(currentTransform)) %}
{% set sizesOut = sizesOut | merge([currentTransform]) %}
{% endif %}
{% endspaceless -%}
{% endfor %}
{# if no transform was made, but transform enforces a specific aspect, create it #}
{% if sizesOut | length == 0 %}
{% set size = sizes[0] %}
{% if (size.width is defined) and (size.height is defined) %}
{% set newHeight = (image.getWidth() * (size.height/size.width)) | round %}
{% set currentTransform = { width: image.getWidth(), height: newHeight } %}
{% if size.mode is defined %}
{% set currentTransform = currentTransform | merge({ mode: size.mode }) %}
{# assumes that you have a asset field named focalPoint that lets the user choose crop position #}
{% if (size.mode=='crop') and (image.focalPoint is defined) and (image.focalPoint!='') %}
{% set currentTransform = currentTransform | merge({ position: image.focalPoint }) %}
{% endif %}
{% endif %}
{% set sizesOut = sizesOut | merge([currentTransform]) %}
{% endif %}
{% endif %}
{# if any transforms were made, loop over them and output srcset. if not, use original file (means it's smaller than the smallest size) #}
{% if sizesOut | length %}
{% for size in sizesOut %}
{{ image.getUrl(size) }} {{ image.getWidth(size) }}w{% if not loop.last %},{% endif %}
{% endfor %}
{% else %}
{{ image.getUrl() }} {{ image.getWidth() }}w
{% endif %}
{% endspaceless -%}
{% endmacro %}
<img sizes="100vw" src="{{ getBase64Pixel() }}" srcset="{{ getSrcSet( topImage, [{ width: 640, height: 800, mode: 'crop' }, { width: 960, height: 1200, mode: 'crop' }, { width: 1280, height: 1600, mode: 'crop' }] ) }}">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment