DIA Frontend

Gallery 

<div class="gallery-row">
    <div class="gallery-item gallery-item-size-4">
        <figure class="image">

            <a href="holder.js/400x300?auto=yes" title="Image Title" class="lightbox" data-lightbox-caption="Image description" data-lightbox-width="800" data-lightbox-height="600" rel="lightbox-group-490">

                <picture>
                    <img loading="lazy" src="holder.js/400x300?auto=yes" width="400" height="300" intrinsicsize="400x300" title="Image Title" alt="Alternative Title" />
                </picture>
            </a>

            <figcaption class="caption">
                Image description
            </figcaption>
        </figure>
    </div>
    <div class="gallery-item gallery-item-size-4">
        <figure class="audio">
            <div class="embed">

                <audio src="https://www.bootstrap-package.com/fileadmin/introduction/audio/typo3-still-here.mp3" controls>
                    Your browser does not support the <code>audio</code> element.
                </audio>
            </div>

            <figcaption class="caption">
                Audio description
            </figcaption>
        </figure>
    </div>
    <div class="gallery-item gallery-item-size-4">
        <figure class="video">

            <div class="embed-responsive embed-responsive-16by9">
                <iframe src="https://www.youtube-nocookie.com/embed/yiJjpKzCVE4?autohide=1&amp;controls=1&amp;rel=0&amp;enablejsapi=1" class="embed-responsive-item" allowfullscreen allow="fullscreen"></iframe>
            </div>

            <figcaption class="caption">
                Media (iframe) description
            </figcaption>
        </figure>
    </div>
    <div class="gallery-item gallery-item-size-4">
        <figure class="video">

            <div class="embed-responsive embed-responsive-16by9">
                <video controls autoplay muted>
                    <source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4">
                    Sorry, your browser doesn't support embedded videos.
                </video>
            </div>

            <figcaption class="caption">
                Media (Video) description
            </figcaption>
        </figure>
    </div>
</div>
 
{# prettier-ignore #}
{% import _self as gallery %}

{% macro audio(file) %}
    <div class="embed">
        {% include '@atom-audio' with {file: file} %}
    </div>
{% endmacro %}

{% macro image(file, data, settings) %}
    {% import '@macro-img' as img %}

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

    {% if imgSrc %}
        {% if file.properties.link %}
            {% if file.properties.link_target %}
                {% set target = ' target="' ~ file.properties.link_target ~ '"' %}
            {% endif %}

            <a href="{{ file.properties.link }}" title="{{ file.properties.title }}" {{ target }}>
                {% include '@atom-image' with { file: file } %}
            </a>
        {% else %}
            {% if data.image_zoom %}
                {% if file.properties.description %}
                    {% set dataLightboxCaption = ' data-lightbox-caption="' ~ file.properties.description ~ '"' %}
                {% endif %}

                {% if settings.lightbox.width %}
                    {% set dataLightboxWidth = ' data-lightbox-width="' ~ settings.lightbox.width ~ '"' %}
                {% elseif file.holder.width %}
                    {% set dataLightboxWidth = ' data-lightbox-width="' ~ file.holder.width * 2 ~ '"' %}
                {% endif %}

                {% if settings.lightbox.height %}
                    {% set dataLightboxHeight = ' data-lightbox-height="' ~ settings.lightbox.height ~ '"' %}
                {% elseif file.holder.height %}
                    {% set dataLightboxHeight = ' data-lightbox-height="' ~ file.holder.height * 2 ~ '"' %}
                {% endif %}

                <a href="{{ imgSrc }}"
                   title="{{ file.properties.title }}"
                   class="{{ settings.lightbox.cssClass|default('lightbox') }}"
                    {{ dataLightboxCaption }}
                    {{ dataLightboxWidth }}
                    {{ dataLightboxHeight }}
                   rel="{{ settings.lightbox.prefix|default('lightbox-group') }}-{{ uid }}">
                    {% include '@atom-image' with {file: file} %}
                </a>
            {% else %}
                {% include '@atom-image' with {file: file} %}
            {% endif %}
        {% endif %}
    {% else %}
        No valid src!
    {% endif %}
{% endmacro %}

{% macro video(file) %}
    {% set extension = file.url|split('.')|last %}
    {% if extension == 'mp4' or extension == 'webm' %}
        {% include '@atom-video' with {
            file: file,
            external_media_ratio: external_media_ratio
        } %}
    {% else %}
        {% if 'youtube' in file.url or 'vimeo' in file.url %}
            {% include '@atom-iframe' with {
                url: file.url,
                external_media_ratio: external_media_ratio
            } %}
        {% endif %}
    {% endif %}
{% endmacro %}

{% block main %}
    {% if files %}
        <div class="gallery-row">
            {% for file in files %}
                <div class="gallery-item gallery-item-size-{{ data.imagecols|default(1) }}">
                    <figure class="{% if file.type == 'media' %}video{% else %}{{ file.type }}{% endif %}">
                        {% if file.type == 'image' %}
                            {{ gallery.image(file, data, settings) }}
                        {% elseif file.type == 'audio' %}
                            {{ gallery.audio(file) }}
                        {% elseif file.type == 'media' %}
                            {{ gallery.video(file) }}
                        {% else %}
                            <!-- NOT SUPPORTED MEDIA TYPE -->
                        {% endif %}

                        {% if file.properties.description %}
                            <figcaption class="caption">
                                {{ file.properties.description|nl2br }}
                            </figcaption>
                        {% endif %}
                    </figure>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}
 
{
  "data": {
    "imagecols": 4,
    "image_zoom": true
  },
  "settings": {
    "lightbox": {
      "prefix": null,
      "cssClass": null
    }
  },
  "files": [
    {
      "type": "image",
      "holder": {
        "width": 400,
        "height": 300
      },
      "properties": {
        "title": "Image Title",
        "alternative": "Alternative Title",
        "description": "Image description",
        "link": null,
        "link_target": "_blank"
      }
    },
    {
      "type": "audio",
      "url": "https://www.bootstrap-package.com/fileadmin/introduction/audio/typo3-still-here.mp3",
      "properties": {
        "title": "Audio Title",
        "description": "Audio description",
        "autoplay": false
      }
    },
    {
      "type": "media",
      "url": "https://www.youtube-nocookie.com/embed/yiJjpKzCVE4?autohide=1&amp;controls=1&amp;rel=0&amp;enablejsapi=1",
      "properties": {
        "title": "Media (iframe) Title",
        "description": "Media (iframe) description"
      }
    },
    {
      "type": "media",
      "url": "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",
      "properties": {
        "title": "Media (Video) Title",
        "description": "Media (Video) description",
        "autoplay": true,
        "loop": false,
        "muted": true
      }
    }
  ]
}

No notes defined.