diff --git a/assets/base.css b/assets/base.css index f68061bfde2..7c4c33b16f1 100644 --- a/assets/base.css +++ b/assets/base.css @@ -3268,6 +3268,7 @@ details-disclosure > details { animation: animateAmbient 30s linear infinite; } + /* This scale number is tied to the variable size_multiplier in liquid */ @keyframes animateAmbient { 0% { transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2); diff --git a/sections/collage.liquid b/sections/collage.liquid index 8d133c66f8a..8bb909ec128 100644 --- a/sections/collage.liquid +++ b/sections/collage.liquid @@ -37,7 +37,7 @@ {%- when 'image' -%}
{%- if block.settings.image != blank -%} {%- liquid + assign widths = '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200' + assign size_multiplier = 1 + + if block.settings.image_behavior == 'ambient' + assign widths = '60, 90, 120, 180, 240, 360, 480, 600, 900, 1200, 1500, 1800, 2100, 2400, 2700, 3000, 3300, 3600, 3840' + assign size_multiplier = 1.2 + endif + if section.settings.desktop_layout == 'left' assign large_block = forloop.first else @@ -57,31 +65,25 @@ -%} {%- if large_block -%} {%- capture sizes -%} - {% if section.blocks.size == 1 -%}(min-width: {{ settings.page_width }}px) calc({{ settings.page_width }}px - 100px){% else %}(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %}, - {% if section.blocks.size == 1 -%}(min-width: 750px) calc(100vw - 100px){% else %}(min-width: 750px) calc((100vw - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %}, - {% if section.blocks.size == 2 and section.settings.mobile_layout == 'collage' -%}calc((100vw - 30px) / 2){% else %}calc(100vw - 30px){% endif %} + {% if section.blocks.size == 1 -%}(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * {{ size_multiplier }}){% else %}(min-width: {{ settings.page_width }}px) calc((({{ settings.page_width }}px - 100px) * 2 / 3 - {{ grid_space_desktop }}) * {{ size_multiplier }}){% endif %}, + {% if section.blocks.size == 1 -%}(min-width: 750px) calc((100vw - 100px) * {{ size_multiplier }}){% else %}(min-width: 750px) calc(((100vw - 100px) * 2 / 3 - {{ grid_space_desktop }}) * {{ size_multiplier }}){% endif %}, + {% if section.blocks.size == 2 and section.settings.mobile_layout == 'collage' -%}calc(((100vw - 30px) / 2) * {{ size_multiplier }}){% else %}calc((100vw - 30px) * {{ size_multiplier }}){% endif %} {%- endcapture -%} {{ block.settings.image - | image_url: width: 3200 - | image_tag: - loading: 'lazy', - sizes: sizes, - widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200' + | image_url: width: 3840 + | image_tag: loading: 'lazy', sizes: sizes, widths: widths }} {%- else -%} {%- capture sizes -%} - (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 1 / 3 - {{ grid_space_desktop }}), - (min-width: 750px) calc((100vw - 100px) * 1 / 3 - {{ grid_space_desktop }}), - {% if section.settings.mobile_layout == 'collage' %}calc((100vw - 30px) / 2 - {{ grid_space_mobile }}){% else %}calc(100vw - 30px){% endif %} + (min-width: {{ settings.page_width }}px) calc((({{ settings.page_width }}px - 100px) * 1 / 3 - {{ grid_space_desktop }}) * {{ size_multiplier }}), + (min-width: 750px) calc(((100vw - 100px) * 1 / 3 - {{ grid_space_desktop }}) * {{ size_multiplier }}), + {% if section.settings.mobile_layout == 'collage' %}calc(((100vw - 30px) / 2 - {{ grid_space_mobile }}) * {{ size_multiplier }}){% else %}calc((100vw - 30px) * {{ size_multiplier }}){% endif %} {%- endcapture -%} {{ block.settings.image - | image_url: width: 3200 - | image_tag: - loading: 'lazy', - sizes: sizes, - widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200' + | image_url: width: 3840 + | image_tag: loading: 'lazy', sizes: sizes, widths: widths }} {%- endif -%} {%- else -%} @@ -152,7 +154,7 @@ data-media-id="{{ block.settings.video_url.id }}" >
{%- if block.settings.cover_image != blank -%} + {% liquid + assign widths = '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200' + assign size_multiplier = 1 + + if block.settings.image_behavior == 'ambient' + assign size_multiplier = 1.2 + assign widths = '60, 90, 120, 180, 240, 360, 480, 600, 900, 1200, 1500, 1800, 2100, 2400, 2700, 3000, 3300, 3600, 3840' + endif + %} + {%- capture sizes -%} (min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 -%} - calc({{ settings.page_width }}px - 100px) + calc(({{ settings.page_width }}px - 100px) * {{ size_multiplier }}) {%- else -%} - {{- settings.page_width | minus: 100 | times: 0.67 | round }}px + calc({{ settings.page_width | minus: 100 | times: 0.67 | round }}px * {{ size_multiplier }}) {%- endif -%} , (min-width: 750px) - {%- if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif -%} - , calc(100vw - 30px) + {%- if section.blocks.size == 1 %} calc((100vw - 100px) * {{ size_multiplier }}){% else %} calc(500px * {{ size_multiplier }}){% endif -%} + , calc((100vw - 30px) * {{ size_multiplier }}) {%- endcapture -%} {{ block.settings.cover_image - | image_url: width: 3000 - | image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000' + | image_url: width: 3840 + | image_tag: loading: 'lazy', sizes: sizes, widths: widths }} {%- else -%} {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }} @@ -383,6 +395,26 @@ "type": "image_picker", "id": "image", "label": "t:sections.collage.blocks.image.settings.image.label" + }, + { + "type": "header", + "content": "t:sections.all.animation.content" + }, + { + "type": "select", + "id": "image_behavior", + "options": [ + { + "value": "none", + "label": "t:sections.all.animation.image_behavior.options__1.label" + }, + { + "value": "ambient", + "label": "t:sections.all.animation.image_behavior.options__2.label" + } + ], + "default": "none", + "label": "t:sections.all.animation.image_behavior.label" } ] }, @@ -438,6 +470,26 @@ "default": "Describe the video", "label": "t:sections.collage.blocks.video.settings.description.label", "info": "t:sections.collage.blocks.video.settings.description.info" + }, + { + "type": "header", + "content": "t:sections.all.animation.content" + }, + { + "type": "select", + "id": "image_behavior", + "options": [ + { + "value": "none", + "label": "t:sections.all.animation.image_behavior.options__1.label" + }, + { + "value": "ambient", + "label": "t:sections.all.animation.image_behavior.options__2.label" + } + ], + "default": "none", + "label": "t:sections.all.animation.image_behavior.label" } ] } diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid index 62f039a2d37..8e6cb1b6209 100644 --- a/sections/image-banner.liquid +++ b/sections/image-banner.liquid @@ -34,7 +34,7 @@ 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' + assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 4608' else assign half_width = '50vw' assign full_width = '100vw' @@ -64,7 +64,7 @@ -%} {{ section.settings.image - | image_url: width: 3840 + | image_url: width: 4608 | image_tag: loading: 'lazy', width: section.settings.image.width, @@ -96,7 +96,7 @@ -%} {{ section.settings.image_2 - | image_url: width: 3840 + | image_url: width: 4608 | image_tag: loading: 'lazy', width: section.settings.image_2.width, diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid index b5fbb3f8dff..ed61704943b 100644 --- a/sections/image-with-text.liquid +++ b/sections/image-with-text.liquid @@ -27,8 +27,8 @@ {%- if section.settings.image_behavior == 'ambient' -%} {%- assign widths = '198, 432, 642, 900, 1284, 1800' -%} {%- capture sizes -%} - (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1.6667 }}px, - (min-width: 750px) calc((100vw - 130px) / 1.667), calc((100vw - 50px) / 1.667) + (min-width: {{ settings.page_width }}px) {{ settings.page_width | times: 1.2 | minus: 100 }}px, + (min-width: 750px) calc((120vw - 130px) / 2), calc((120vw - 50px) / 2) {%- endcapture -%} {%- else -%} {%- assign widths = '165, 360, 535, 750, 1070, 1500' -%} @@ -39,7 +39,7 @@ {%- endif -%} {{ section.settings.image - | image_url: width: 1500 + | image_url: width: 1800 | image_tag: loading: 'lazy', sizes: sizes, widths: widths }} {%- else -%} diff --git a/sections/slideshow.liquid b/sections/slideshow.liquid index 173517ad5d5..b77cd6e9503 100644 --- a/sections/slideshow.liquid +++ b/sections/slideshow.liquid @@ -133,7 +133,7 @@ assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round if section.settings.image_behavior == 'ambient' assign sizes = '120vw' - assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680' + assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 4608' else assign sizes = '100vw' assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' @@ -141,7 +141,7 @@ -%} {{ block.settings.image - | image_url: width: 3840 + | image_url: width: 4608 | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths }} {%- else -%}