You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
1.6 KiB
HTML
35 lines
1.6 KiB
HTML
{% if item.extras | size: > 0 %}
|
|
{% capture extras %} picture-item--{{ item.extras | join: " picture-item--" }}{% endcapture %}
|
|
{% else %}
|
|
{% assign extras = "" %}
|
|
{% endif %}
|
|
{% assign description = item.description %}
|
|
<figure class="col-{{ item.cols[0] }}@xs col-{{ item.cols[1] }}@sm col-{{ item.cols[2] }}@md picture-item{{ extras }}" data-groups='{{ item.groups | jsonify }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
|
|
<div class="picture-item__inner">
|
|
{% if item.type != 'wide' %}
|
|
<div class="aspect aspect--16x9">
|
|
<div class="aspect__inner">
|
|
{% endif %}
|
|
{% if item.type == 'small' or item.type == 'tall' %}
|
|
{% assign src1x = item.images.small %}
|
|
{% assign src2x = item.images.small-2x %}
|
|
{% else %}
|
|
{% assign src1x = item.images.large %}
|
|
{% assign src2x = item.images.large-2x %}
|
|
{% endif %}
|
|
<img src="{{ src1x }}" srcset="{{ src1x }} 1x, {{ src2x }} 2x" alt="{{ item.description }}" />
|
|
<img class="picture-item__blur" src="{{ src1x }}" srcset="{{ src1x }} 1x, {{ src2x }} 2x" alt="" aria-hidden="true" />
|
|
{% if item.type != 'wide' %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="picture-item__details">
|
|
<figcaption class="picture-item__title"><a href="{{ item.source }}" target="_blank" rel="noopener">{{ item.title }}</a></figcaption>
|
|
<p class="picture-item__tags hidden@xs">{{ item.groups | join: ', ' }}</p>
|
|
</div>
|
|
{% if item.type == 'large' or item.type == 'tall' %}
|
|
<p class="picture-item__description">{{ item.description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</figure>
|