Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Load picture srcset from partial #4

Merged
merged 7 commits into from Mar 24, 2023
Merged

Load picture srcset from partial #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
abc5dbc
Load `srcsets` from partial if provided
marcorieser Mar 24, 2023
91c89d1
Extract default `srcsets` definition to partial
marcorieser Mar 24, 2023
7a33596
Fix path to default `srcsets` definition
marcorieser Mar 24, 2023
dbb5b48
Fix path to default `srcsets` definition again
marcorieser Mar 24, 2023
1ffe2ab
Rename `srcsets` variable to `srcset`, rename partial param from `src…
marcorieser Mar 24, 2023
9108661
Update comments
marcorieser Mar 24, 2023
82729d5
Add comment to the default srcset definition
marcorieser Mar 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 9 additions & 15 deletions resources/views/components/_picture.antlers.html
View file
Open in desktop
Expand Up @@ -5,6 +5,7 @@
@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.
Expand Down Expand Up @@ -35,18 +36,11 @@
{{ /aspect_ratio }}
{{ original_ratio = height / width }}

{{# Initialize srcset variable in current scope to be overwritable from partial below. #}}
{{ srcset = null }}

{{# Set srcset sizes. #}}
{{ srcsets = [
[ 'width' => 320, 'ratio' => '{ ratio ?? original_ratio }' ],
[ 'width' => 480, 'ratio' => '{ ratio ?? original_ratio }' ],
[ 'width' => 640, 'ratio' => '{ ratio ?? original_ratio }' ],
[ 'width' => 768, 'ratio' => '{ ratio ?? original_ratio }' ],
[ 'width' => 1024, 'ratio' => '{ ((skip_ratio_steps != 1 && skip_ratio_steps != 2 && skip_ratio_steps != 3) ?= ratio_large) ?? ratio ?? original_ratio }' ],
[ 'width' => 1280, 'ratio' => '{ ((skip_ratio_steps != 2 && skip_ratio_steps != 3) ?= ratio_large) ?? ratio ?? original_ratio }' ],
[ 'width' => 1440, 'ratio' => '{ ((skip_ratio_steps != 3) ?= ratio_large) ?? ratio ?? original_ratio }' ],
[ 'width' => 1536, 'ratio' => '{ ratio_large ?? ratio ?? original_ratio }' ],
[ 'width' => 1680, 'ratio' => '{ ratio_large ?? ratio ?? original_ratio }' ]
] }}
{{ partial src="{ srcset_from ?: 'statamic-peak-tools::snippets/srcset_default' }" }}

<picture>
{{ if extension == 'svg' || extension == 'gif' }}
Expand All @@ -68,7 +62,7 @@
{{ else }}
<source
srcset="
{{ srcsets scope="size" }}
{{ srcset scope="size" }}
{{
glide:image
width="{ size:width }"
Expand All @@ -85,14 +79,14 @@
format="webp"
quality="{ quality ?? '85' }"
}} {{ size:width }}w{{ !last ?= ',' }}
{{ /srcsets }}
{{ /srcset }}
"
sizes="{{ sizes ?? '(min-width: 1280px) 640px, (min-width: 768px) 50vw, 90vw' }}"
type="image/webp"
>
<source
srcset="
{{ srcsets scope="size" }}
{{ srcset scope="size" }}
{{
glide:image
width="{ size:width }"
Expand All @@ -109,7 +103,7 @@
quality="{ quality ?? '85' }"
}}
{{ size:width }}w{{ !last ?= ',' }}
{{ /srcsets }}
{{ /srcset }}
"
sizes="{{ sizes ?? '(min-width: 1280px) 640px, (min-width: 768px) 50vw, 90vw' }}"
type="{{ image.mime_type }}"
Expand Down
16 changes: 16 additions & 0 deletions resources/views/snippets/_srcset_default.antlers.html
View file
Open in desktop
@@ -0,0 +1,16 @@
{{#
@name Default `scrset` definition
@desc The default definition for the `srcset` attribute which gets loaded in `statamic-peak-tools::components/_picture.antlers.html`.
#}}

{{ srcset = [
[ 'width' => 320, 'ratio' => '{ ratio ?? original_ratio }' ],
[ 'width' => 480, 'ratio' => '{ ratio ?? original_ratio }' ],
[ 'width' => 640, 'ratio' => '{ ratio ?? original_ratio }' ],
[ 'width' => 768, 'ratio' => '{ ratio ?? original_ratio }' ],
[ 'width' => 1024, 'ratio' => '{ ((skip_ratio_steps != 1 && skip_ratio_steps != 2 && skip_ratio_steps != 3) ?= ratio_large) ?? ratio ?? original_ratio }' ],
[ 'width' => 1280, 'ratio' => '{ ((skip_ratio_steps != 2 && skip_ratio_steps != 3) ?= ratio_large) ?? ratio ?? original_ratio }' ],
[ 'width' => 1440, 'ratio' => '{ ((skip_ratio_steps != 3) ?= ratio_large) ?? ratio ?? original_ratio }' ],
[ 'width' => 1536, 'ratio' => '{ ratio_large ?? ratio ?? original_ratio }' ],
[ 'width' => 1680, 'ratio' => '{ ratio_large ?? ratio ?? original_ratio }' ]
] }}