DIA Frontend

Image 

<picture>
    <img loading="lazy" src="holder.js/400x300?auto=yes" width="400" height="300" intrinsicsize="400x300" data-foo="bar" title="Image Title" alt="Alternative Title" />
</picture>
 
{% import '@macro-img' as img %}

{% set CType = 'image' %}

{% set imgSrc = img.src(file) %}

{% block main %}
    {% if imgSrc %}
        {% set attributes = [] %}

        {% if class %}
            {% set attributes = attributes|merge([' class="' ~ class ~ '"']) %}
        {% endif %}

        {% if file.holder.width %}
            {% set attributes =
                attributes|merge([' width="' ~ file.holder.width ~ '"'])
            %}
        {% endif %}

        {% if file.holder.height %}
            {% set attributes =
                attributes|merge([' height="' ~ file.holder.height ~ '"'])
            %}
        {% endif %}

        {% if file.holder.width and file.holder.height %}
            {% set attributes =
                attributes|merge(
                    [
                        ' intrinsicsize="' ~ file.holder.width ~ 'x'
                            ~ file.holder.height
                            ~ '"'
                    ]
                )
            %}
        {% endif %}

        {% if additionalAttributes %}
            {% for attribute in additionalAttributes %}
                {% for key, value in attribute %}
                    {% set attributes =
                        attributes|merge([' ' ~ key ~ '="' ~ value ~ '"'])
                    %}
                {% endfor %}
            {% endfor %}
        {% endif %}

        <picture>
            <img loading="lazy"
                src="{{ imgSrc }}"
                {{ attributes|join }}
                title="{{ file.properties.title }}"
                alt="{{ file.properties.alternative }}" />
        </picture>
    {% else %}
        No valid src!
    {% endif %}
{% endblock %}
 
{
  "file": {
    "holder": {
      "width": 400,
      "height": 300
    },
    "properties": {
      "title": "Image Title",
      "alternative": "Alternative Title"
    }
  },
  "additionalAttributes": [
    {
      "data-foo": "bar"
    }
  ],
  "class": null
}

No notes defined.