[Collage] Add ambient effect on image block & general ambient tweaks by ludoboludo · Pull Request #2547 · Shopify/dawn

ludoboludo · 2023-04-19T20:53:23Z

PR Summary:

Add ambient movement to the image and video block in the Collage section

Fixes a couple things in 3 other sections for the ambient movement approach

Why are these changes introduced?

What approach did you take?

Reused a similar approach that has been taken in other sections.
I've used a size_multiplier variable here to show the logic we're using to decide on the image sizes + sizes attribute.

Other considerations

Visual impact on existing themes

Adds a new animation option for imageand video block

Testing steps/scenarios

Go to the collage section and add an image and video block
Make sure the image size is the right one
Make sure that the movement applied on the image never uses too small of an image, revealing some whitespace.
Test the different layout available in the section (1 block, 2 blocks, three blocks, etc)

Demo links

Editor

Checklist

Added PR summary for release notes
Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
Followed theme code principles
Linted with Theme Check
Tested on mobile
Tested on multiple browsers
Tested for accessibility

kmeleta

Just leaving some thoughts on the general approach.

sections/collage.liquid

ludoboludo · 2023-04-20T19:15:24Z

sections/collage.liquid

I wonder if we could just default to the max width times 1.2 🤔 Cause it's only used as a fallback in case the srcset approach isn't supported and as a reference I believe for the images widths. So it shouldn't be smaller than the higher value we give the srcset.

sections/image-banner.liquid

ludoboludo · 2023-04-20T19:17:58Z

sections/image-with-text.liquid

-              (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)


this is a reference to this comment from the original PR that added it: #2385 (comment)

ludoboludo · 2023-04-20T19:18:32Z

sections/slideshow.liquid

              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'


similar thing here. Let me know if the 7680 was meant for a specific use case.

kmeleta · 2023-04-24T16:02:28Z

sections/collage.liquid

Getting some wonky sizes loading with these changes on collage. Haven't seen the issue in the other sections yet.

It's odd, I think it's specific to the theme editor 🤔 I can't replicate on the live version. Or at least on the live version of the theme it seems to be fine in terms of image size it's downloading to use there 🤷

hmm, I might see a discrepancy there for some reason, but even still I'm seeing in the realm of 3-4X the needed size for some cases outside the editor. Though I apologize because these might be pre-existing and not necessary to deal with in this PR.

Tho if you look at the network tab in the inspect tool, it's loading the expected image size right ?

We're basing our sizes attribute values on what we already had by multiplied by 1.2. So the images we're getting should be a bit bigger than their containers.

There is also a PR from folks in theme support to fix an issue with the image logic in that section: #2277

No I'm definitely seeing way too large of an image asset being loaded in a lot of cases, with and without the animation. The animation logic just adds to it. But again, I think my problem here is more with the existing sizes logic more so than your changes.

kmeleta

Didn't notice any issues with the motion itself in collage. Generally happy with where we landed on the approach in the logic. Just left a couple small things to consider.

sections/collage.liquid

kmeleta · 2023-04-25T17:13:11Z

Changes look good to me. Thanks Ludo.

kjellr · 2023-04-26T16:06:58Z

Just raising a discussion point here from slack:

We need to make a UX decision around whether or not this setting should be available on a section- or block-level for collage. In all other occurrences, this is a section-level setting, even when there are interior blocks (like Slideshow).

cc @melissaperreault

ludoboludo · 2023-04-26T18:25:17Z

⚠️ This is going to be on hold until we're done with our next release.

kjellr · 2023-06-29T13:20:46Z

I'm removing myself from this for now to stop GitHub from reminding me everyday about it. 😅 But when we pick it back up, feel free to add me back in!

[Collage] Add ambient effect on image block

198a697

kmeleta reviewed Apr 20, 2023

View reviewed changes

sections/collage.liquid Outdated Show resolved Hide resolved

sections/collage.liquid Outdated Show resolved Hide resolved

ludoboludo added 2 commits April 20, 2023 14:50

change approach and tweaks values in other places to match

c165edc

fix max width being used

d57ed80

ludoboludo commented Apr 20, 2023

View reviewed changes

sections/image-banner.liquid Show resolved Hide resolved

ludoboludo commented Apr 20, 2023

View reviewed changes

ludoboludo requested a review from kjellr April 20, 2023 19:20

ludoboludo changed the title ~~[Collage] Add ambient effect on image block~~ [Collage] Add ambient effect on image block & general ambient tweaks Apr 20, 2023

melissaperreault self-requested a review April 20, 2023 19:57

ludoboludo requested a review from kmeleta April 24, 2023 14:00

add ambient movement to the video block

4d59190

kmeleta reviewed Apr 24, 2023

View reviewed changes

ludoboludo added 2 commits April 24, 2023 14:56

update max width

f77a873

remove echo

ffdfb42

ludoboludo requested a review from kmeleta April 24, 2023 19:02

ludoboludo added 3 commits April 24, 2023 15:44

add animation header above image behavior setting

8969632

remove max_width and use highest value by default

4b7b5b3

Merge branch 'main' into collage-ambient-background

0bb0934

kmeleta approved these changes Apr 24, 2023

View reviewed changes

sections/collage.liquid Outdated Show resolved Hide resolved

sections/collage.liquid Show resolved Hide resolved

change calculation of sizes

5ea2f72

kjellr removed their request for review June 29, 2023 13:20

benjaminsehl closed this Jul 8, 2025

Conversation

ludoboludo commented Apr 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary:

Why are these changes introduced?

What approach did you take?

Other considerations

Visual impact on existing themes

Testing steps/scenarios

Demo links

Checklist

Uh oh!

kmeleta left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kmeleta left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kmeleta commented Apr 25, 2023

Uh oh!

kjellr commented Apr 26, 2023

Uh oh!

ludoboludo commented Apr 26, 2023

Uh oh!

kjellr commented Jun 29, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Comments

ludoboludo commented Apr 19, 2023 •

edited

Loading