Skip to content

Instantly share code, notes, and snippets.

@stenvdb stenvdb/img-macros.twig
Last active Dec 9, 2019

Embed
What would you like to do?
Macro collection for Imager in Craft CMS
{#
# USAGE:
# (transform can either be an object, or an array of objects, aka srcset)
#
# {{ macro.regular(entry.image.one(), { width: 50, height: 50 }, 'class="block"') }}
# ➡️ <img src="..." width="50" height="50" alt="..." class="block" />
#
# {{ macro.url(entry.image.one(), { width: 50, height: 50 }) }}
# ➡️ /uploads_c/../{...}.jpg
#
# {{ macro.srcWidthHeight(entry.image.one(), { width: 50, height: 50 }) }}
# ➡️ src="/uploads_c/../{...}.jpg" width="50" height="50"
#}
{# Returns an img element #}
{% macro regular(image, transform, attributes = '') %}
{% if transform|first is not iterable %}
<img {{ _self.src(image, transform, true) }} alt="{{ (image is iterable) ? image.title : '' }}" {{ attributes|raw }} />
{% else %}
{# Do some magic to transform our string into an array #}
{% set helper = create('craft\\helpers\\ArrayHelper') %}
{% set string = _self.src(image, transform) %}
{% set array = helper.toArray(string) %}
<img src="{{ array[array|length // 2]|split(' ')[0] }}"
sizes="100vw"
srcset="{{ string }}"
alt="{{ (image is iterable) ? image.title : '' }}" {{ attributes|raw }} />
{% endif %}
{% endmacro %}
{# Returns a plain url #}
{% macro url(image, transform) %}{% spaceless %}
{{ _self.src(image, transform) }}
{% endspaceless %}{% endmacro %}
{# Returns src, width & height attributes as a string #}
{% macro srcWidthHeight(image, transform) %}{% spaceless %}
{{ _self.src(image, transform, true) }}
{% endspaceless %}{% endmacro %}
{#
#
# This is the one
# All of the transform logic is done here!
#
#}
{% macro src(image, transform, withSizeAttrs = false) %}{% spaceless %}
{% if image %}
{% if image.size|default < craft.app.config.general.maxUploadFileSize %}
{# Set some good transfrom defaults, but don't override the transform passed! #}
{% if transform is iterable %}
{# Defaults: #}
{% set mergeThisIn = {
position: ((image.focalPoint.x|default(0.5) * 100)) ~ '% ' ~ (image.focalPoint.y|default(0.5) * 100) ~ '%',
effects: { sharpen: true },
interlace: true,
mode: 'crop'
} %}
{# Check if there is 1 or more transforms #}
{% if transform|first is iterable %}
{# Array of transforms (srcset) =>
create a new transform array with the defaults added for each item #}
{% set tempArr = [] %}
{% for i in 0..transform|length-1 %}
{% set tempArr = tempArr|merge({ (i): mergeThisIn|merge(transform[i])}) %}
{% endfor %}
{# We can't update the transform array because
merge doesn't work with numeric keys.. so replace it #}
{% set transform = tempArr %}
{% else %}
{# Single transform => simple merge #}
{% set transform = mergeThisIn|merge(transform) %}
{% endif %}
{% endif %}
{# Do the transform #}
{% set transformed = craft.imager.transformImage(image, transform) %}
{% if transform|first is not iterable %}
{# Return the transform #}
{{ withSizeAttrs ? 'src="' }}{{ transformed.url }}{{ withSizeAttrs ? '"' }} {{ withSizeAttrs ? "width='#{transformed.width}' height='#{transformed.height}'"|raw }}
{% else %}
{# We can only return strings with macros, this will be transformed into array later on #}
{{ transformed|map(x => "#{x.url} #{x.width}w")|join(',')|raw }}
{% endif %}
{% endif %}
{% endif %}
{% endspaceless %}{% endmacro %}
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.