ENGCOM-3159: Add class into image builder #18388

Author: Stanislav Idolov

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

@@ -6,13 +6,16 @@
 namespace Magento\Catalog\Block\Product;
 
 /**
+ * Product image block
+ *
  * @api
  * @method string getImageUrl()
  * @method string getWidth()
  * @method string getHeight()
  * @method string getLabel()
  * @method float getRatio()
  * @method string getCustomAttributes()
+ * @method string getClass()
  * @since 100.0.2
  */
 class Image extends \Magento\Framework\View\Element\Template

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

@@ -77,16 +77,29 @@ private function getStringCustomAttributes(array $attributes): string
     {
         $result = [];
         foreach ($attributes as $name => $value) {
-            $result[] = $name . '="' . $value . '"';
+            if ($name != 'class') {
+                $result[] = $name . '="' . $value . '"';
+            }
         }
         return !empty($result) ? implode(' ', $result) : '';
     }
 
+    /**
+     * Retrieve image class for HTML element
+     *
+     * @param array $attributes
+     * @return string
+     */
+    private function getClass(array $attributes): string
+    {
+        return $attributes['class'] ?? 'product-image-photo';
+    }
+
     /**
      * Calculate image ratio
      *
-     * @param $width
-     * @param $height
+     * @param int $width
+     * @param int $height
      * @return float
      */
     private function getRatio(int $width, int $height): float
@@ -98,8 +111,9 @@ private function getRatio(int $width, int $height): float
     }
 
     /**
-     * @param Product $product
+     * Get image label
      *
+     * @param Product $product
      * @param string $imageType
      * @return string
      */
@@ -114,6 +128,7 @@ private function getLabel(Product $product, string $imageType): string
 
     /**
      * Create image block from product
+     *
      * @param Product $product
      * @param string $imageId
      * @param array|null $attributes
@@ -154,6 +169,7 @@ public function create(Product $product, string $imageId, array $attributes = nu
                 'label' => $this->getLabel($product, $imageMiscParams['image_type']),
                 'ratio' => $this->getRatio($imageMiscParams['image_width'], $imageMiscParams['image_height']),
                 'custom_attributes' => $this->getStringCustomAttributes($attributes),
+                'class' => $this->getClass($attributes),
                 'product_id' => $product->getId()
             ],
         ];

app/code/Magento/Catalog/Test/Unit/Block/Product/ImageFactoryTest.php

@@ -145,7 +145,8 @@ private function getTestDataWithoutAttributes(): array
                     'label' => 'test_image_label',
                     'ratio' => 1,
                     'custom_attributes' => '',
-                    'product_id' => null
+                    'product_id' => null,
+                    'class' => 'product-image-photo'
                 ],
             ],
         ];
@@ -190,6 +191,7 @@ private function getTestDataWithAttributes(): array
                 'custom_attributes' => [
                     'name_1' => 'value_1',
                     'name_2' => 'value_2',
+                    'class' => 'my-class'
                 ],
             ],
             'expected' => [
@@ -201,7 +203,8 @@ private function getTestDataWithAttributes(): array
                     'label' => 'test_product_name',
                     'ratio' => 0.5, // <==
                     'custom_attributes' => 'name_1="value_1" name_2="value_2"',
-                    'product_id' => null
+                    'product_id' => null,
+                    'class' => 'my-class'
                 ],
             ],
         ];

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

@@ -10,7 +10,7 @@
       style="width:<?= /* @escapeNotVerified */ $block->getWidth() ?>px;">
     <span class="product-image-wrapper"
           style="padding-bottom: <?= /* @escapeNotVerified */ ($block->getRatio() * 100) ?>%;">
-        <img class="product-image-photo"
+        <img class="<?= /* @escapeNotVerified */ $block->getClass() ?>"
             <?= /* @escapeNotVerified */ $block->getCustomAttributes() ?>
             src="<?= /* @escapeNotVerified */ $block->getImageUrl() ?>"
             max-width="<?= /* @escapeNotVerified */ $block->getWidth() ?>"