conflicting styles for product image container in different listings …

app/code/Magento/Catalog/Block/Product/ImageFactory.php

@@ -1,12 +1,13 @@
 <?php
 /**
- * Copyright 2018 Adobe
- * All Rights Reserved.
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
  */
 declare(strict_types=1);
 
 namespace Magento\Catalog\Block\Product;
 
+use Magento\Framework\App\ObjectManager;
 use Magento\Catalog\Block\Product\Image as ImageBlock;
 use Magento\Catalog\Model\View\Asset\ImageFactory as AssetImageFactory;
 use Magento\Catalog\Model\Product;
@@ -15,7 +16,8 @@
 use Magento\Framework\ObjectManagerInterface;
 use Magento\Framework\View\ConfigInterface;
 use Magento\Catalog\Helper\Image as ImageHelper;
-
+use Magento\Catalog\ViewModel\Category\Image as ImageViewModel;
+use Magento\Framework\View\Element\Template;
 /**
  * Create imageBlock from product and view.xml
  *
@@ -54,19 +56,22 @@ class ImageFactory
      * @param AssetImageFactory $viewAssetImageFactory
      * @param PlaceholderFactory $viewAssetPlaceholderFactory
      * @param ParamsBuilder $imageParamsBuilder
+     * @param ImageViewModel $imageViewModel
      */
     public function __construct(
         ObjectManagerInterface $objectManager,
         ConfigInterface $presentationConfig,
         AssetImageFactory $viewAssetImageFactory,
         PlaceholderFactory $viewAssetPlaceholderFactory,
-        ParamsBuilder $imageParamsBuilder
+        ParamsBuilder $imageParamsBuilder,
+        ?ImageViewModel $imageViewModel = null
     ) {
         $this->objectManager = $objectManager;
         $this->presentationConfig = $presentationConfig;
         $this->viewAssetPlaceholderFactory = $viewAssetPlaceholderFactory;
         $this->viewAssetImageFactory = $viewAssetImageFactory;
         $this->imageParamsBuilder = $imageParamsBuilder;
+        $this->imageViewModel = $imageViewModel ?? ObjectManager::getInstance()->get(ImageViewModel::class);
     }
 
     /**
@@ -171,7 +176,8 @@ public function create(Product $product, string $imageId, ?array $attributes = n
                 'ratio' => $this->getRatio($imageMiscParams['image_width'] ?? 0, $imageMiscParams['image_height'] ?? 0),
                 'custom_attributes' => $this->filterCustomAttributes($attributes),
                 'class' => $this->getClass($attributes),
-                'product_id' => $product->getId()
+                'product_id' => $product->getId(),
+                'view_model' => $this->imageViewModel
             ],
         ];
 

app/code/Magento/Catalog/Test/Mftf/ActionGroup/StorefrontAssertProductImageUniqueContainerActionGroup.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+              xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="StorefrontAssertProductImageUniqueContainerActionGroup">
+        <annotations>
+            <description>Assert product image container is unique.</description>
+        </annotations>
+        <arguments>
+            <argument name="productId" type="string"/>
+        </arguments>
+
+        <seeElement selector="{{StorefrontCategoryMainSection.productImageContainer}}" stepKey="seeProductImageContainer" />
+        <dontSeeElement selector=".product-image-container.product-image-container-{{productId}}" stepKey="productImageContainerNotContainProductId" />
+    </actionGroup>
+</actionGroups>

app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
  /**
-  * Copyright 2024 Adobe
-  * All Rights Reserved.
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
   */
 -->
 
@@ -38,6 +38,7 @@
         <element name="productsList" type="block" selector="#maincontent .column.main"/>
         <element name="productName" type="text" selector=".product-item-name"/>
         <element name="productOptionList" type="text" selector="#narrow-by-list"/>
+        <element name="productImageContainer" type="text" selector="//span[contains(@class, 'product-image-container-')]"/>
         <element name="productNameByPosition" type="text" selector=".products-grid li:nth-of-type({{position}}) .product-item-name a" parameterized="true"/>
         <element name="sidebarAdditional" type="block" selector="#maincontent .sidebar.sidebar-additional"/>
         <element name="searchStore" type="input" selector="//div/input[@id='search']" />

app/code/Magento/Catalog/Test/Mftf/Test/StorefrontProductImageContainerOnCatalogTest.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
+    <test name="StorefrontProductImageContainerOnCatalogTest">
+        <annotations>
+            <stories value="Product with image has unique image container on catalog page"/>
+            <title value="Product with image has unique image container on catalog page."/>
+            <description value="Simple product container with image doesn't contain product id."/>
+            <group value="catalog"/>
+            <severity value="MAJOR"/>
+        </annotations>
+        <before>
+            <createData entity="ApiCategory" stepKey="createCategory"/>
+            <createData entity="ApiSimpleProduct" stepKey="createSimpleProduct">
+                <requiredEntity createDataKey="createCategory"/>
+            </createData>
+            <createData entity="ApiProductAttributeMediaGalleryEntryWithoutTypesTestImage" stepKey="createSimpleProductImage">
+                <requiredEntity createDataKey="createSimpleProduct"/>
+            </createData>
+        </before>
+        <after>
+            <deleteData createDataKey="createSimpleProduct" stepKey="deleteSimpleProduct"/>
+            <deleteData createDataKey="createCategory" stepKey="deleteCategory"/>
+        </after>
+
+        <actionGroup ref="StorefrontNavigateCategoryPageActionGroup" stepKey="navigateToCategoryPage">
+            <argument name="category" value="$$createCategory$$"/>
+        </actionGroup>
+        <actionGroup ref="StorefrontAssertProductImageUniqueContainerActionGroup" stepKey="assertProductImageContainer">
+            <argument name="productId" value="$$createSimpleProduct.id$$"/>
+        </actionGroup>
+    </test>
+</tests>

app/code/Magento/Catalog/ViewModel/Category/Image.php

@@ -43,4 +43,14 @@ public function getUrl(Category $category, string $attributeCode = self::ATTRIBU
     {
         return $this->image->getUrl($category, $attributeCode);
     }
+
+    /**
+     * Get unique container ID for image
+     * @param $productid string
+     * @return string
+     */
+    public function getProductUniqId( $productid) : string
+    {
+        return uniqid($productid);
+    }
 }

app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml

@@ -11,8 +11,9 @@
 $width = (int)$block->getWidth();
 $height = (int)$block->getHeight();
 $paddingBottom = $block->getRatio() * 100;
+$productUniqId = $block->getViewModel()->getProductUniqId($block->getProductId());
 ?>
-<span class="product-image-container product-image-container-<?= /* @noEscape */ $block->getProductId() ?>">
+<span class="product-image-container product-image-container-<?= /* @noEscape */ $productUniqId ?>">
     <span class="product-image-wrapper">
         <img class="<?= $escaper->escapeHtmlAttr($block->getClass()) ?>"
             <?php foreach ($block->getCustomAttributes() as $name => $value): ?>
@@ -26,7 +27,7 @@ $paddingBottom = $block->getRatio() * 100;
 </span>
 <?php
 $styles = <<<STYLE
-.product-image-container-{$block->getProductId()} {
+.product-image-container-{$productUniqId} {
     width: {$width}px;
     height: auto;
     aspect-ratio: {$width} / {$height};
@@ -35,7 +36,7 @@ $styles = <<<STYLE
     height: 100%;
     width: 100%;
 }
-@supports not (aspect-ratio: auto) { 
+@supports not (aspect-ratio: auto) {
     .product-image-container-{$block->getProductId()} span.product-image-wrapper {
         padding-bottom: {$paddingBottom}%;
     }