47 lines
1.7 KiB
Text
47 lines
1.7 KiB
Text
<div class="media-grid {{ shape | default: square }}">
|
|
{%- assign loadingStrategy = loading | default:"lazy" -%}
|
|
{%- for item in data limit:count -%}
|
|
{%- assign alt = item.grid.alt | replaceQuotes -%}
|
|
{%- assign imageUrl = item.grid.image -%}
|
|
<a class="{{ item.type }}" href="{{ item.grid.url }}" title="{{ alt }}">
|
|
<div class="media-grid-item">
|
|
{%- if item.grid.title or item.grid.subtext -%}
|
|
<div class="meta-text media-highlight {{ item.type }}">
|
|
{% if item.grid.title %}
|
|
<div class="header">{{ item.grid.title }}</div>
|
|
{% endif %}
|
|
{% if item.grid.subtext %}
|
|
<div class="subheader">{{ item.grid.subtext }}</div>
|
|
{% endif %}
|
|
</mark>
|
|
</div>
|
|
{%- endif -%}
|
|
{%- assign imageClass = "square" -%}
|
|
{%- assign width = 150 -%}
|
|
{%- assign height = 150 -%}
|
|
{%- case shape -%}
|
|
{%- when "vertical" -%}
|
|
{%- assign imageClass = "vertical" -%}
|
|
{%- assign width = 120 -%}
|
|
{%- assign height = 184 -%}
|
|
{%- endcase -%}
|
|
<img
|
|
srcset="
|
|
{{ imageUrl }}?class={{ imageClass }}sm&type=webp {{ width }}w,
|
|
{{ imageUrl }}?class={{ imageClass }}md&type=webp {{ width | times:2 }}w
|
|
"
|
|
sizes="(max-width: 450px) {{ width }}px, {{ width | times:2 }}px"
|
|
src="{{ imageUrl }}?class={{ imageClass }}sm&type=webp"
|
|
alt="{{ alt }}"
|
|
loading="{{ loadingStrategy }}"
|
|
decoding="async"
|
|
width="{{ width }}"
|
|
height="{{ height }}"
|
|
>
|
|
</div>
|
|
</a>
|
|
{%- endfor -%}
|
|
</div>
|
|
{% render "static/nav/paginator.liquid",
|
|
pagination:pagination
|
|
%}
|