51 lines
2.0 KiB
HTML
51 lines
2.0 KiB
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" style="width: 100%; height: 33vh;">
|
|
{% for image in line %}
|
|
{% set caption = image.text %}
|
|
{% if image.angle %}
|
|
{% set angle = image.angle %}
|
|
{% else %}
|
|
{% set angle = 20 %}
|
|
{% endif %}
|
|
{% if image.x %}
|
|
{% set x = image.x %}
|
|
{% else %}
|
|
{% set x = "0px" %}
|
|
{% if image.y %}
|
|
{% set y = image.y %}
|
|
{% else %}
|
|
{% set y = "0px" %}
|
|
{% endif %}
|
|
{% if image.z %}
|
|
{% set z = image.z %}
|
|
{% else %}
|
|
{% set z = 2 %}
|
|
{% 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="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>
|
|
</div>
|
|
{% endfor %}
|
|
{% if section.background %}
|
|
</div>
|
|
{% endif %}
|
|
<!-- vim: ts=8 et sw=4 sts=4
|
|
-->
|