magcms/prosopopee/themes/exposure/templates/sections/polaroid-group.html

{% if section.background %}
<div class="bg-section" style="background: {{ section.background }};">
{% endif %}
    <section class="polaroid-group baguette" {% if section.css %}style="{{ section.css }}"{% endif %} >
        <div class="polaroid-line" {% if section.margin_bottom %}style="margin-bottom: {{ section.margin_bottom }};"{% endif %}>
    {% for image in section.images %}
        {% set caption = image.text %}
        {% set custpos = false %}
        {% if image.angle %}
           {% set angle = image.angle %}
        {% else %}
            {% if (loop.index%2 == 1) %}
                {% set angle = 15 %}
            {% else %}
                {% set angle = -15 %}
            {% endif %}
        {% endif %}

        {% if image.x %}
            {% set x = image.x %}
            {% set custpos = true %}
        {% else %}
            {% set x = "0px" %}
        {% endif %}

        {% if image.y %}
            {% set y = image.y %}
            {% set custpos = true %}
        {% else %}
            {% set y = "0px" %}
        {% endif %}

        {% if image.z %}
            {% set z = image.z %}
        {% else %}
            {% set z = loop.index %}
        {% endif %}

        {% if image.w %}
            {% set w = image.w %}
        {% else %}
        {% endif %}

        {% set image = Image(image) %}
        {{ image.copy() }}
        {% set ratio = image.ratio %}
        <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") }}"
            class="polaroid"
            style="{% if custpos %}position:absolute;{% endif %}left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
                {% if caption %}
                <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="{{ caption }}">
                <h5 class="polaroid__title">{{ caption }}</h5>
                {% else %}
                <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="unnamed image">
                {% endif %}
        </a>
    {% endfor %}
    </div>
    </section>
{% if section.background %}
</div>
{% endif %}
<!-- vim: ts=8 et sw=4 sts=4
-->