-
Notifications
You must be signed in to change notification settings - Fork 4
/
_picture.antlers.html
133 lines (128 loc) · 6.58 KB
/
_picture.antlers.html
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
{{#
@name Picture
@desc The picture component. A responsive imageset in a picture element. See `resources/views/components/_figure.antlers.html` for an example on how to use this.
@param* image An image URL.
@param* sizes The sizes attribute. Something like `(min-width: 768px) 55vw, 90vw` for example.
@param aspect_ratio Pass in an aspect ratio to crop the image in a certain way. `16/9` for example or specify a second ratio for larger screens: `1/1 large:1/2`.
@param skip_ratio_steps Integer. Skip 1, 2 or 3 ratio steps to force small screens rendering big images to use mobile cropping instead of `large` cropping.
@param srcset_from The path to a partial with an alternative srcset definition array. Something like `snippets/srcset_full_width` for example.
@param class Add optional CSS classes.
@param cover Boolean. Whether the image should cover the parent. Uses the focus position.
@param bg String. Sets a background color for transparent images.
@param blur Integer. Adds a blur effect to the image. Use values between 0 and 100.
@param brightness String. Adjusts the image brightness. Use values between -100 and +100, where 0 represents no change.
@param contrast String. Adjusts the image contrast. Use values between -100 and +100, where 0 represents no change.
@param filter String. Applies a filter effect to the image. Accepts `greyscale` or `sepia`.
@param flip String. Flips the image. Accepts `v`, `h` and `both`.
@param gamma Float. Adjusts the image gamma. Use values between 0.1 and 9.99.
@param orient String. Rotates the image. Accepts `auto`, `0`, `90`, `180` or `270`.
@param sharpen Integer. Sharpen the image. Use values between 0 and 100.
@param pixelate Integer. Applies a pixelation effect to the image. Use values between 0 and 1000.
@param lazy Boolean. Whether the image should be natively lazy loaded.
@param quality int Set image quality. Defaults to 85.
#}}
<!-- statamic-peak-tools::components/_picture.antlers.html -->
{{ if image }}
{{ asset :url="image" }}
{{# Configure aspect ratio's. #}}
{{ ratio = null }}
{{ ratio_large = null }}
{{ aspect_ratio | trim | explode(' ') }}
{{ if value | contains('large:') }}
{{ aspect = value | explode(':') | last }}
{{ ratio_large = (aspect | explode('/') | last) / (aspect | explode('/') | first) }}
{{ elseif value != '' }}
{{ ratio = (value | explode('/') | last) / (value | explode('/') | first) }}
{{ /if }}
{{ /aspect_ratio }}
{{ width && height ?= (original_ratio = height / width) }}
{{# Initialize srcset variable in current scope to be overwritable from partial below. #}}
{{ srcset = null }}
{{# Set srcset sizes. #}}
{{ partial src="{ srcset_from ?: 'statamic-peak-tools::snippets/srcset_default' }" }}
{{# Image formats. #}}
{{ formats = ['webp' => 'image/webp', 'jpg' => 'image/jpeg'] }}
<picture>
{{ if extension == 'svg' || extension == 'gif' }}
<img
{{ if cover }}
class="object-cover w-full h-full {{ class }}"
style="object-position: {{ focus | background_position }}"
{{ else }}
class="{{ class }}"
{{ /if }}
src="{{ url }}"
alt="{{ alt | ensure_right('.') | entities }}"
width="{{ width }}"
height="{{ height }}"
{{ unless alt }}
aria-hidden="true"
{{ /unless }}
/>
{{ else }}
{{ foreach:formats as="format|mime_type" }}
<source
srcset="
{{ srcset scope="size" }}
{{
glide:image
:format="format"
:width="size:width"
height="{ size:width * size:ratio }"
fit="crop_focal"
quality="{ quality ?? '85' }"
:bg="bg"
:blur="blur"
:brightness="brightness"
:contrast="contrast"
:filter="filter"
:flip="flip"
:gamma="gamma"
:orient="orient"
:pixelate="pixelate"
:sharpen="sharpen"
}} {{ size:width }}w{{ !last ?= ',' }}
{{ /srcset }}
"
sizes="{{ sizes ?? '(min-width: 1280px) 640px, (min-width: 768px) 50vw, 90vw' }}"
type="{{ mime_type }}"
>
{{ /foreach:formats }}
<img
width="{{ width }}"
height="{{ height }}"
src="{{ glide:image
width="1024"
height="{ 1024 * original_ratio }"
fit="crop_focal"
:bg="bg"
:blur="blur"
:brightness="brightness"
:contrast="contrast"
:filter="filter"
:flip="flip"
:gamma="gamma"
:orient="orient"
:pixelate="pixelate"
:sharpen="sharpen"
quality="{ quality ?? '85' }"
}}"
alt="{{ alt | ensure_right('.') | entities }}"
{{ if cover }}
class="object-cover w-full h-full {{ class }}"
style="object-position: {{ focus | background_position }}"
{{ else }}
class="{{ class }}"
{{ /if }}
{{ unless alt }}
aria-hidden="true"
{{ /unless }}
{{ if lazy }}
loading="lazy"
{{ /if }}
>
{{ /if }}
</picture>
{{ /asset }}
{{ /if }}
<!-- End: statamic-peak-tools::components/_picture.antlers.html -->