Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Product Gallery Thumbnails: Add support for cropping #11718

Merged
merged 12 commits into from
Nov 24, 2023
Merged

Product Gallery Thumbnails: Add support for cropping #11718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b13e0ac
Product Gallery Thumbnails: Refactor sizing in the editor and the fro…
danieldudzic Nov 8, 2023
76620aa
Product Gallery Thumbnails: Change default vertical alignment to top …
danieldudzic Nov 8, 2023
6faebf5
Merge branch 'trunk' into fix/product-gallery-thumbnails-sizing
danieldudzic Nov 8, 2023
285cc88
Merge branch 'trunk' into fix/product-gallery-thumbnails-sizing
danieldudzic Nov 9, 2023
7b3b823
Product Gallery Thumbnails: Fix thumbnails cropping based on the 'Cro…
danieldudzic Nov 9, 2023
3bd9afa
Product Gallery Thumbnails: Revert thumbnails styling from #11665
danieldudzic Nov 10, 2023
55b6461
Merge branch 'trunk' into fix/11699-product-gallery-thumbnails-cropping
danieldudzic Nov 16, 2023
453cb4b
Merge branch 'trunk' into fix/11699-product-gallery-thumbnails-cropping
danieldudzic Nov 17, 2023
3817a61
Merge branch 'trunk' into fix/11699-product-gallery-thumbnails-cropping
danieldudzic Nov 20, 2023
35e85c0
Product Gallery Thumbnails: Update the default value of the cropImage…
danieldudzic Nov 23, 2023
c63cd9b
Merge branch 'trunk' into fix/11699-product-gallery-thumbnails-cropping
danieldudzic Nov 23, 2023
a381ac3
Merge branch 'trunk' of https://github.com/woocommerce/woocommerce-bl…
danieldudzic Nov 24, 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
2 changes: 1 addition & 1 deletion assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"description": "Display the Thumbnails of a product.",
"category": "woocommerce",
"keywords": [ "WooCommerce" ],
"usesContext": [ "postId", "thumbnailsPosition", "thumbnailsNumberOfThumbnails", "productGalleryClientId", "mode" ],
"usesContext": [ "postId", "thumbnailsPosition", "thumbnailsNumberOfThumbnails", "productGalleryClientId", "mode", "cropImages" ],
"textdomain": "woo-gutenberg-products-block",
"ancestor": [ "woocommerce/product-gallery" ],
"supports": {
Expand Down
6 changes: 4 additions & 2 deletions src/BlockTypes/ProductGalleryThumbnails.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ protected function get_block_type_style() {
* @return string[]
*/
protected function get_block_type_uses_context() {
return [ 'productGalleryClientId', 'postId', 'thumbnailsNumberOfThumbnails', 'thumbnailsPosition', 'mode' ];
return [ 'productGalleryClientId', 'postId', 'thumbnailsNumberOfThumbnails', 'thumbnailsPosition', 'mode', 'cropImages' ];
}

/**
Expand Down Expand Up @@ -133,7 +133,9 @@ protected function render( $attributes, $content, $block ) {

if ( $product ) {
$post_thumbnail_id = $product->get_image_id();
$product_gallery_images = ProductGalleryUtils::get_product_gallery_images( $post_id, 'full', array(), 'wc-block-product-gallery-thumbnails__thumbnail' );
$crop_images = $block->context['cropImages'] ?? false;
$product_gallery_images = ProductGalleryUtils::get_product_gallery_images( $post_id, 'full', array(), 'wc-block-product-gallery-thumbnails__thumbnail', $crop_images );
Copy link
Contributor

Choose a reason for hiding this comment

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

Would you mind explaining why the image size went from thumbnail to full when we're dealing with thumbnails?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The thumbnail setting for wp_get_attachment_image() outputs cropped square images with max 150px/150px dimensions.

We need to support larger images for wide layouts and preserve the aspect ratio (for the cropping disabled setting).

Moto_Guzzi_v7_–_newproductgallery


if ( $product_gallery_images && count( $product_gallery_images ) > 1 && $post_thumbnail_id ) {
$html = '';
$number_of_thumbnails = isset( $block->context['thumbnailsNumberOfThumbnails'] ) ? $block->context['thumbnailsNumberOfThumbnails'] : 3;
Expand Down
Loading