-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.twig
34 lines (34 loc) · 1.55 KB
/
index.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<flynt-component name="BlockImage" {{- not noComponentSpacing ? ' class="componentSpacing"' }} {{ options.theme ? 'data-theme="' ~ options.theme ~ '"' }}>
<div class="container">
<figure class="figure" data-size="{{ options.size }}" data-align="center">
{% if image.post_mime_type == 'image/svg+xml'%}
<img class="figure-image-svg lazyload"
src="{{ placeholderImage(768, (768 / image.aspect)|round, 'rgba(125, 125, 125, 0.1)') }}"
width="{{ 768 }}"
height="{{ (768 / image.aspect)|round }}"
data-src="{{ image.src }}"
alt="{{ image.alt|e }}"
>
{% else %}
<img class="figure-image lazyload"
src="{{ image.src|resizeDynamic(768) }}"
width="{{ 768 }}"
height="{{ (768 / image.aspect)|round }}"
srcset="{{ placeholderImage(768, (768 / image.aspect)|round, 'rgba(125, 125, 125, 0.1)') }}"
data-srcset="
{{ image.src|resizeDynamic(1920) }} 1920w,
{{ image.src|resizeDynamic(1600) }} 1600w,
{{ image.src|resizeDynamic(1440) }} 1440w,
{{ image.src|resizeDynamic(1366) }} 1366w,
{{ image.src|resizeDynamic(1024) }} 1024w,
{{ image.src|resizeDynamic(768) }} 768w,
{{ image.src|resizeDynamic(640) }} 640w"
data-sizes="auto"
alt="{{ image.alt|e }}">
{% endif %}
{% if image.caption %}
<figcaption class="caption">{{ image.caption|e }}</figcaption>
{% endif %}
</figure>
</div>
</flynt-component>