This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Product Gallery: Add animation when large image changes #11113
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx
|
|
Size Change: +317 B (0%) Total Size: 1.54 MB
ℹ️ View Unchanged
|
gigitux
changed the title
gigitux
changed the title
gigitux
added
type: enhancement
woocommercebot
requested review from
a team and
nefeline
and removed request for
a team
gigitux
force-pushed
the
fix/animation-dialog
branch
from
3cf02f0 to
af4282f
Compare
* Add titles to patterns and set the aligment to Wide * Replace product query patterns with product collection ones * Remove pagination and no results query from product query patterns * Add aspect ratio to the product image attributes * Add portrait aspect ratio to product X column and product gallery patterns
gigitux
force-pushed
the
fix/animation-dialog
branch
from
af4282f to
ea0b1f5
Compare
…erce-blocks into fix/animation-dialog
|
Bumping this PR to next release. |
It seems to be working mostly fine with the "outside" button setting (the height of the Large Image is static though): 
It is still broken with the "inside" button setting: |
13 tasks
|
I don't think it is a regression. The current behavior in trunk is broken as well: Screen.Capture.Oct.12.mp4I think that it should be a separate discussion about how to handle different sizes of the images: We should implement the "crop images to fit" setting. So, all the images will fit in the square (even if stretched). When it is disabled, I think that the behavior in the video that you shared is correct. |
I can't replicate it anymore. ✅ |
…o fix/animation-dialog
Both potential issues are correlated. With the current implementation, the row of images is handled by Flexbox. The highest image sets the height. I think that this approach is the right one because the position of the arrow has to be fixed and not be dependent by the width/height of the image like currently happens on trunk: Screen.Capture.Oct.12.mp4I think that when "image cropping" is enabled, we can force all the images to have the maximum width and height available. When it is disabled, could we center the image? What do you think? Screen.Capture.Oct.16.mov |
|
|
Hey @jarekmorawski, could you give us feedback on this change, please? You can take a look to this comment. Personally, I think that the behavior in the first video is wrong, and we should stick with the second behavior (maybe align the image to the center). Instead, when the user enables the setting "Crop image to fit", all the images will have the gallery's height and width. Does it make sense? |
I agree. That's what the toggle does – if enabled, all images will be made into squares and aligned to the center (also during crop; most images have a central focal point, so we should always crop out the edges).
Agreed. The behavior in the first video feels a bit odd, but the worst part is that it changes the position of the arrow buttons, which isn't great. I think it'd make the most sense to align the images in the center no matter their aspect ratio. |
…o fix/animation-dialog
…erce-blocks into fix/animation-dialog
|
@jarekmorawski Thanks for the feedback! @danieldudzic, according with the feedback, with 05a3eb6 I added the CSS to center the images. Also, I fixed an error when the zoom is disabled (18d416e) and fixed some E2E tests given that the structure of the DOM is changed with this PR (b6d0088). |
danieldudzic
approved these changes
Oct 19, 2023
There was a problem hiding this comment.
Superb work, @gigitux!
Both the animation and zoom now work as expected!
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Warning
This PR is blocked by #11111
Note
I created a follow-up issue to add E2E tests woocommerce/woocommerce#42192
What
Fixes #10870. Currently, there isn't any animation when the large image changes.
Why
This PR implements the animation when the user changes the large image with:
Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Screenshots or screencast
Screen.Capture.Oct.5.2.mp4
Screen.Capture.Oct.5.3.mp4
WooCommerce Visibility
Required:
Checklist
Required:
[type]label or a[skip-changelog]label.Conditional:
[skip-changelog]label is not present).Changelog