Product Gallery: Add a Product Image fallback (https://github.com/woocommerce/woocommerce-blocks/pull/11978)
* Product Gallery: Add a placeholder fallback when the Product Image is not set * Product Gallery Placeholder: Pass by reference warning fix
This commit is contained in:
Daniel Dudzic
GitHub
parent
7ea98576bc
commit
ca8bb47c8d
|
|
@ -1,9 +1 @@
|
|||
<svg width="608" height="608" xmlns="http://www.w3.org/2000/svg" fill="none">
|
||||
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<rect x="0" y="0" id="svg_1" fill="#EEEEEE" height="608" width="608"/>
|
||||
<path id="svg_2" fill="#E0E0E0" d="m352.222,252.333l-96.444,0c-1.903,0 -3.445,1.542 -3.445,3.445l0,96.444c0,1.903 1.542,3.445 3.445,3.445l96.444,0c1.903,0 3.445,-1.542 3.445,-3.445l0,-96.444c0,-1.903 -1.542,-3.445 -3.445,-3.445zm-96.444,-10.333c-7.609,0 -13.778,6.169 -13.778,13.778l0,96.444c0,7.609 6.169,13.778 13.778,13.778l96.444,0c7.609,0 13.778,-6.169 13.778,-13.778l0,-96.444c0,-7.609 -6.169,-13.778 -13.778,-13.778l-96.444,0z" clip-rule="evenodd" fill-rule="evenodd"/>
|
||||
<path id="svg_3" fill="#E0E0E0" d="m327.954,293.407c2.005,-1.95 5.198,-1.95 7.203,0l27.556,26.79l-7.204,7.409l-23.954,-23.289l-23.954,23.289c-1.728,1.68 -4.388,1.942 -6.411,0.631l-20.637,-13.376l-28.62,20.869l-6.088,-8.349l31.492,-22.963c1.729,-1.261 4.058,-1.325 5.854,-0.161l20.162,13.068l24.601,-23.918z" clip-rule="evenodd" fill-rule="evenodd"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg width="1200" height="1200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 608 608"><g><rect x="0" y="0" id="svg_1" fill="#EEEEEE" height="608" width="608" /><path id="svg_2" fill="#E0E0E0" d="m352.222,252.333l-96.444,0c-1.903,0 -3.445,1.542 -3.445,3.445l0,96.444c0,1.903 1.542,3.445 3.445,3.445l96.444,0c1.903,0 3.445,-1.542 3.445,-3.445l0,-96.444c0,-1.903 -1.542,-3.445 -3.445,-3.445zm-96.444,-10.333c-7.609,0 -13.778,6.169 -13.778,13.778l0,96.444c0,7.609 6.169,13.778 13.778,13.778l96.444,0c7.609,0 13.778,-6.169 13.778,-13.778l0,-96.444c0,-7.609 -6.169,-13.778 -13.778,-13.778l-96.444,0z" clip-rule="evenodd" fill-rule="evenodd" /><path id="svg_3" fill="#E0E0E0" d="m327.954,293.407c2.005,-1.95 5.198,-1.95 7.203,0l27.556,26.79l-7.204,7.409l-23.954,-23.289l-23.954,23.289c-1.728,1.68 -4.388,1.942 -6.411,0.631l-20.637,-13.376l-28.62,20.869l-6.088,-8.349l31.492,-22.963c1.729,-1.261 4.058,-1.325 5.854,-0.161l20.162,13.068l24.601,-23.918z" clip-rule="evenodd" fill-rule="evenodd" /></g></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1013 B |
|
|
@ -121,12 +121,14 @@ class ProductGallery extends AbstractBlock {
|
|||
$classname_single_image = 'is-single-product-gallery-image';
|
||||
}
|
||||
|
||||
$number_of_thumbnails = $block->attributes['thumbnailsNumberOfThumbnails'] ?? 0;
|
||||
$classname = $attributes['className'] ?? '';
|
||||
$dialog = isset( $attributes['mode'] ) && 'full' !== $attributes['mode'] ? $this->render_dialog() : '';
|
||||
$post_id = $block->context['postId'] ?? '';
|
||||
$product = wc_get_product( $post_id );
|
||||
$product_id = strval( $product->get_id() );
|
||||
$number_of_thumbnails = $block->attributes['thumbnailsNumberOfThumbnails'] ?? 0;
|
||||
$classname = $attributes['className'] ?? '';
|
||||
$dialog = isset( $attributes['mode'] ) && 'full' !== $attributes['mode'] ? $this->render_dialog() : '';
|
||||
$post_id = $block->context['postId'] ?? '';
|
||||
$product = wc_get_product( $post_id );
|
||||
$product_gallery_first_image = ProductGalleryUtils::get_product_gallery_image_ids( $product, 1 );
|
||||
$product_gallery_first_image_id = reset( $product_gallery_first_image );
|
||||
$product_id = strval( $product->get_id() );
|
||||
|
||||
$html = $this->inject_dialog( $content, $dialog );
|
||||
$p = new \WP_HTML_Tag_Processor( $html );
|
||||
|
|
@ -137,8 +139,8 @@ class ProductGallery extends AbstractBlock {
|
|||
'data-wc-context',
|
||||
wp_json_encode(
|
||||
array(
|
||||
'selectedImage' => $product->get_image_id(),
|
||||
'firstMainImageId' => $product->get_image_id(),
|
||||
'selectedImage' => $product_gallery_first_image_id,
|
||||
'firstMainImageId' => $product_gallery_first_image_id,
|
||||
'isDialogOpen' => false,
|
||||
'visibleImagesIds' => ProductGalleryUtils::get_product_gallery_image_ids( $product, $number_of_thumbnails, true ),
|
||||
'dialogVisibleImagesIds' => ProductGalleryUtils::get_product_gallery_image_ids( $product, null, false ),
|
||||
|
|
|
|||
|
|
@ -132,11 +132,10 @@ class ProductGalleryThumbnails extends AbstractBlock {
|
|||
$product = wc_get_product( $post_id );
|
||||
|
||||
if ( $product ) {
|
||||
$post_thumbnail_id = $product->get_image_id();
|
||||
$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 );
|
||||
|
||||
if ( $product_gallery_images && count( $product_gallery_images ) > 1 && $post_thumbnail_id ) {
|
||||
if ( $product_gallery_images && count( $product_gallery_images ) > 1 ) {
|
||||
$html = '';
|
||||
$number_of_thumbnails = isset( $block->context['thumbnailsNumberOfThumbnails'] ) ? $block->context['thumbnailsNumberOfThumbnails'] : 3;
|
||||
$mode = $block->context['mode'] ?? '';
|
||||
|
|
|
|||
|
|
@ -33,16 +33,20 @@ class ProductGalleryUtils {
|
|||
$size = $crop_images ? self::CROP_IMAGE_SIZE_NAME : $size;
|
||||
|
||||
foreach ( $all_product_gallery_image_ids as $product_gallery_image_id ) {
|
||||
if ( $crop_images ) {
|
||||
self::maybe_generate_intermediate_image( $product_gallery_image_id, self::CROP_IMAGE_SIZE_NAME );
|
||||
}
|
||||
if ( '0' !== $product_gallery_image_id ) {
|
||||
if ( $crop_images ) {
|
||||
self::maybe_generate_intermediate_image( $product_gallery_image_id, self::CROP_IMAGE_SIZE_NAME );
|
||||
}
|
||||
|
||||
$product_image_html = wp_get_attachment_image(
|
||||
$product_gallery_image_id,
|
||||
$size,
|
||||
false,
|
||||
$attributes
|
||||
);
|
||||
$product_image_html = wp_get_attachment_image(
|
||||
$product_gallery_image_id,
|
||||
$size,
|
||||
false,
|
||||
$attributes
|
||||
);
|
||||
} else {
|
||||
$product_image_html = self::get_product_image_placeholder_html( $attributes );
|
||||
}
|
||||
|
||||
if ( $wrapper_class ) {
|
||||
$product_image_html = '<div class="' . $wrapper_class . '">' . $product_image_html . '</div>';
|
||||
|
|
@ -81,6 +85,11 @@ class ProductGalleryUtils {
|
|||
// All other product gallery images.
|
||||
$product_gallery_image_ids = $product->get_gallery_image_ids();
|
||||
|
||||
// If the Product image is not set, we need to set it to a placeholder image.
|
||||
if ( '' === $featured_image_id ) {
|
||||
$featured_image_id = '0';
|
||||
}
|
||||
|
||||
// We don't want to show the same image twice, so we have to remove the featured image from the gallery if it's there.
|
||||
$unique_image_ids = array_unique(
|
||||
array_merge(
|
||||
|
|
@ -145,4 +154,27 @@ class ProductGalleryUtils {
|
|||
|
||||
wp_update_attachment_metadata( $attachment_id, $image_metadata );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the product image placeholder HTML.
|
||||
*
|
||||
* @param array $attributes Attributes.
|
||||
* @return string
|
||||
*/
|
||||
public static function get_product_image_placeholder_html( $attributes = array() ) {
|
||||
$attributes['src'] = esc_url( plugins_url( 'woocommerce-blocks/images/block-placeholders/product-image-gallery.svg' ) );
|
||||
$attributes['alt'] = esc_attr__( 'Product Image Placeholder', 'woo-gutenberg-products-block' );
|
||||
|
||||
$attributes_string = array_reduce(
|
||||
array_keys( $attributes ),
|
||||
function ( $carry, $key ) use ( $attributes ) {
|
||||
$key = esc_attr( $key );
|
||||
$value = esc_attr( $attributes[ $key ] );
|
||||
return $carry . $key . '="' . $value . '" ';
|
||||
},
|
||||
''
|
||||
);
|
||||
|
||||
return '<img ' . $attributes_string . ' />';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue