magcms/prosopopee/themes/material/templates/sections/pictures-group.html

{% if section.background %}
<div class="bg-section" style="background: {{ section.background }};">
  {% endif %}
  <section class="container pictures-group baguette">
    {% for line in section.images %}
    <div class="pictures-line">
      {% for image in line %}
      {% set caption = image.text %}
      {% if image.type == "video" %}
      {% set video = Video(image) %}
      {% set format = settings.ffmpeg.extension %}
      {{ video.copy() }}
      {% set ratio = video.ratio %}
      {% else %}
      {% set image = Image(image) %}
      {{ image.copy() }}
      {% set ratio = image.ratio %}
      {% endif %}
      <div class="picture caption" style="flex-grow: {{ ratio }}">
        {% if image.type == "video" %}
        <img class="z-depth-2 lazy responsive-img" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
        <video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
          <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
        </video>
        {% if caption %}
        <div class="caption__overlay">
          <h5 class="caption__overlay__title">{{ caption }}</h5>
        </div>
        {% endif %}
        {% else %}
        <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
           data-at-450="{{ image.generate_thumbnail("x450") }}"
           data-at-800="{{ image.generate_thumbnail("x800") }}"
           data-at-1366="{{ image.generate_thumbnail("x1366") }}"
           data-at-1920="{{ image.generate_thumbnail("x1920") }}"
           >
           <img class="lazy responsive-img z-depth-2" src="" data-original="{{ image.generate_thumbnail("x600") }}" alt="">
           {% if caption %}
           <div class="caption__overlay">
             <h5 class="caption__overlay__title">{{ caption }}</h5>
           </div>
           {% endif %}
        </a>
        {% endif %}
      </div>
      {% if not loop.last %}
      <div class="separator"></div>
      {% endif %}
      {% endfor %}
    </div>
    {% endfor %}
  </section>
  {% if section.background %}
</div>
{% endif %}