context ) ) { return ''; } $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); $post_id = $block->context['postId']; if ( ! $post_id ) { return ''; } $product = wc_get_product( $post_id ); if ( ! $product instanceof \WC_Product ) { return ''; } // We crop the images to square only if the aspect ratio is 1:1. // Otherwise, we show the uncropped and use object-fit to crop them. $image_size = '1' === $attributes['aspectRatio'] ? 'woocommerce_thumbnail' : 'woocommerce_single'; $product_gallery_media = ProductGalleryUtils::get_product_gallery_media_data( $product, $image_size ); // Don't show the thumbnails block if there is only one media item. if ( count( $product_gallery_media ) <= 1 ) { return ''; } $thumbnail_size = str_replace( '%', '', $attributes['thumbnailSize'] ?? '25%' ); $active_thumbnail_style = $attributes['activeThumbnailStyle'] ?? 'overlay'; $img_class = 'wc-block-product-gallery-thumbnails__thumbnail__image'; ob_start(); ?>
$media ) : ?> $thumbnail_image_class, 'data-image-id' => isset( $media['id'] ) ? absint( $media['id'] ) : 0, 'data-media-type' => $media_type, 'data-wp-on--click' => 'actions.selectCurrentImage', 'data-wp-on--keydown' => 'actions.onThumbnailsArrowsKeyDown', 'data-wp-watch' => 'callbacks.syncThumbnailState', 'draggable' => 'false', 'role' => 'option', 'style' => 'aspect-ratio: ' . $thumbnail_aspect_ratio, 'tabindex' => 0 === $index ? '0' : '-1', ); $show_video_preview = 'video' === $media_type && empty( $media['poster_id'] ) && ! empty( $media['video_src'] ); ?>
src="" srcset="" sizes="" alt="" decoding="async" loading="lazy" />