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

Product Image: use WC Core function to render image #9984

Merged
merged 3 commits into from
Jun 27, 2023
Merged

Product Image: use WC Core function to render image #9984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aad8509
refactor: use WC Core function to render image
dinhtungdu Jun 23, 2023
7db48ab
fix: height and add the data-testid back
dinhtungdu Jun 23, 2023
33e187f
Merge branch 'trunk' into fix/9979-image-output
dinhtungdu Jun 26, 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
1 change: 1 addition & 0 deletions assets/js/atomic/blocks/product-elements/image/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
border-radius: inherit;
vertical-align: middle;
width: 100%;
height: auto;

&[hidden] {
display: none;
Expand Down
17 changes: 9 additions & 8 deletions src/BlockTypes/ProductImage.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,20 +145,21 @@ private function render_anchor( $product, $on_sale_badge, $product_image, $attri
* @return string
*/
private function render_image( $product, $attributes ) {
$image_type = 'single' === $attributes['imageSizing'] ? 'woocommerce_single' : 'woocommerce_thumbnail';
$image_info = wp_get_attachment_image_src( get_post_thumbnail_id( $product->get_id() ), $image_type );
$image_size = 'single' === $attributes['imageSizing'] ? 'woocommerce_single' : 'woocommerce_thumbnail';

if ( ! isset( $image_info[0] ) ) {
if ( ! $product->get_image_id() ) {
// The alt text is left empty on purpose, as it's considered a decorative image.
// More can be found here: https://www.w3.org/WAI/tutorials/images/decorative/.
// Github discussion for a context: https://github.com/woocommerce/woocommerce-blocks/pull/7651#discussion_r1019560494.
return sprintf( '<img src="%s" alt="" />', wc_placeholder_img_src( $image_type ) );
return wc_placeholder_img( $image_size, array( 'alt' => '' ) );
}

return sprintf(
'<img data-testid="product-image" alt="%s" src="%s">',
$product->get_title(),
$image_info[0]
return $product->get_image(
$image_size,
array(
'alt' => $product->get_title(),
'data-testid' => 'product-image',
)
);
}

Expand Down