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">{{ 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>
|