gallery.html.twig

{% extends 'partials/base.html.twig' %}

{% block head %}

{% block stylesheets %}
    {{ parent() }}

{% endblock %}
{{ assets.css() }}

{% block javascripts %}
    {{ parent() }}
    {% do assets.addJs('theme://js/colcade.js', {group:'bottom'}) %}

{% endblock %}
{{ assets.js() }}

<script>
var colcade = new Colcade( '.dz-grid', {
    columns: '.dz-grid-col',
    items: '.dz-grid-item'
});
</script>

{% endblock head %}

{% block content %}

<div class="dz-gallery">
    <div class="dz-grid">
        <div class="dz-grid-col dz-grid-col--1"> </div>
        <div class="dz-grid-col dz-grid-col--2"> </div>
        <div class="dz-grid-col dz-grid-col--3"> </div>
        <div class="dz-grid-col dz-grid-col--4"> </div>
            {% for image in page.media.images|sort|reverse %}
            <div class="dz-grid-item">
                <a href="{{ image.resize(1920,1280).url }}" rel="lightbox">
                    <img src="{{ image.resize(600,400).quality(100).url }}" alt="{{ page.title }} {{ imgtitle }}" />
                </a>
            </div>
            {% endfor %}
    </div>
</div>

{% endblock %}