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

[Image banner] Add ambient movement to background #2342

Merged
merged 12 commits into from
Mar 13, 2023
Merged

[Image banner] Add ambient movement to background #2342

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3dd6246
[Image banner] Add ambient movement to background
kjellr Feb 28, 2023
58984b1
Polish up the animation
kjellr Feb 28, 2023
002c12d
Support prefers-reduced-motion
kjellr Feb 28, 2023
c1a0ec4
Reorder schema entries.
kjellr Feb 28, 2023
51e6579
Tidy up header names.
kjellr Feb 28, 2023
4b2e85e
Try a faster animation.
kjellr Mar 3, 2023
4738f82
Load in higher-res images when ambient animation is active.
kjellr Mar 3, 2023
01dc560
Change both the sizes and widths properties.
kjellr Mar 8, 2023
291a05e
Merge branch 'main' into ambient-animation-in-image-banner
kjellr Mar 8, 2023
20ad896
Fix unintended change to the first stacked conditional.
kjellr Mar 8, 2023
812104f
Update 20 translation files
translation-platform[bot] Mar 10, 2023
b402853
Merge branch 'main' into ambient-animation-in-image-banner
kjellr Mar 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 22 additions & 18 deletions sections/image-banner.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,20 @@
}
{%- endstyle -%}

{%- liquid
if section.settings.image_behavior == 'ambient'
assign half_width = '60vw'
assign full_width = '120vw'
assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
else
assign half_width = '50vw'
assign full_width = '100vw'
assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
endif
-%}

<div
id="Banner-{{ section.id }}"
class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"
Expand All @@ -40,17 +54,12 @@
if section.settings.image_2 != blank
assign image_class = 'banner__media-image-half'
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = '(min-width: 750px) 50vw, 100vw'
if section.settings.image != blank and section.settings.stack_images_on_mobile
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this line shouldn't be changed - should be section.settings.image_2.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call. Fixed in 20ad896.

And yep — translations have been requested, just waiting for them to come in. 👍

assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = '50vw'
else
assign sizes = '100vw'
endif
if section.settings.image_behavior == 'ambient'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
assign sizes = half_width
else
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
assign sizes = full_width
endif
-%}
{{
Expand Down Expand Up @@ -78,16 +87,11 @@
assign image_class_2 = 'banner__media-image-half'
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = '(min-width: 750px) 50vw, 100vw'
elsif section.settings.image != blank
assign sizes = '50vw'
else
assign sizes = '100vw'
endif
if section.settings.image_behavior == 'ambient'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
assign sizes = full_width
endif
-%}
{{
Expand Down