{% load cms_tags i18n thumbnail util_tags %}

<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
    {% for file in instance.files %}
        <div class="gallery__item">
            {% thumbnail file 2000x2000 as full %}
            {% thumbnail file 500x500 as thumb %}
            <div class="gallery__item__main reveal_self reveal reveal_animation"
                 style="background-image: url({{ thumb.url|media_bridge }})">
                <figure itemprop="associatedMedia" itemscope
                        itemtype="http://schema.org/ImageObject">
                    <a href="{{ full.url|media_bridge }}" class="event"
                       itemprop="contentUrl"
                       data-size="{{ full.width }}x{{ full.height }}">
                        <img src="{{ thumb.url|media_bridge }}"
                             itemprop="thumbnail"
                             alt="{{ file.name }}"/>
                    </a>
                    {% if file.description %}
                        <figcaption itemprop="caption description">{{ file.description }}</figcaption>
                    {% endif %}
                </figure>
            </div>
        </div>
    {% endfor %}
</div>