Twig RWD img Macro

img-macro.twig

{##
 # Display img
 #
 # @param string    src      [required]
 # @param string    default  [required]
 # @param string    alt      [optional]
 # @param bool      lazyload [optional]
 #
 # @param array         formats [optional] Array string (image format)
 # @param string|array  sizes   [optional]
 #
 # @param string|array  classes    [optional]
 # @param string        attributes [optional]
 #}
{% macro img(src, default, formats = [], alt = '', lazyload = false, classes = '', attributes = '', sizes = '100vw') %}
    {% set srcset = [] %}
    {% for format in formats %}
        {% set srcset = srcset|merge([src|image_format(format) ~ ' ' ~ format|split('x')[0] ~ 'w']) %}
    {% endfor %}
    {% set srcset = (srcset is empty) ? src|image_format(default) : srcset %}

    <img class="{{ classes|join(' ') }}{{ lazyload ? ' lazyload'}}"
        src="{{ src|image_format(default) }}"
        {% if lazyload %}
            srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            data-sizes="auto"
        {% else %}
            sizes="{{ sizes|join(', ') }}"
        {% endif %}
        {{ lazyload ? 'data-' -}}srcset="{{ srcset|join(', ') }}"
        alt="{{ alt }}"
        {{ attributes|raw }} />
{% endmacro %}

{##
 # Display picture
 #
 # create a picture with sources for diferents media-queries
 # use macro `img`
 #
 # @TODO: maybe usefull but not now,
 #}