Merge pull request #3 from basecom/develop

Add configuration for and handling of other image types

Author: FinnReinhardtBsc

CHANGELOG.md

@@ -15,8 +15,21 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Fixed
 
+## [1.0.0] - 2025-03-28
+
+### Added
+
+* Support for resizing all image types
+* Separate configurations for `thumbnail`,`image`,`smallImage` and `swatchImage`
+* Configuration for resize mode, allowing for manual or automatic configuration of 
+  * Automatic: Read image ids from the theme's view.xml file
+  * Manuel: Enter the image dimensions manually
+
+Special thanks to [Kiel Pykettk](https://github.com/pykettk) for his [contribution](https://github.com/basecom/magento2-live-search-image-urls/pull/2)! 🧡
+
 ## [0.9.0] - 2025-03-24
 
 - Release of this project 🎉
 
 [0.9.0]: https://github.com/basecom/magento2-live-search-image-urls/releases/tag/v0.9.0
+[1.0.0]: https://github.com/basecom/magento2-live-search-image-urls/releases/tag/v1.0.0

Model/Config/Source/SelectedImageTypes.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Basecom\LiveSearchImageUrls\Model\Config\Source;
+
+use Magento\Framework\Data\OptionSourceInterface;
+
+class SelectedImageTypes implements OptionSourceInterface
+{
+    public const IMAGE_TYPE_NONE = 'none';
+    public const IMAGE_TYPE_THUMBNAIL = 'thumbnail';
+    public const IMAGE_TYPE_IMAGE = 'image';
+    public const IMAGE_TYPE_SMALL_IMAGE = 'small_image';
+    public const IMAGE_TYPE_SWATCH_IMAGE = 'swatch_image';
+
+    public function toOptionArray(): array
+    {
+        return [
+            ['value' => self::IMAGE_TYPE_NONE, 'label' =>
+                __(ucwords(self::IMAGE_TYPE_NONE))],
+            ['value' => self::IMAGE_TYPE_THUMBNAIL, 'label' =>
+                __(ucwords(self::IMAGE_TYPE_THUMBNAIL))],
+            ['value' => self::IMAGE_TYPE_IMAGE, 'label' =>
+                __(ucwords(self::IMAGE_TYPE_IMAGE))],
+            ['value' => self::IMAGE_TYPE_SMALL_IMAGE, 'label' =>
+                __(ucwords(str_replace('_', ' ', self::IMAGE_TYPE_SMALL_IMAGE)))],
+            ['value' => self::IMAGE_TYPE_SWATCH_IMAGE, 'label' =>
+                __(ucwords(str_replace('_', ' ', self::IMAGE_TYPE_SWATCH_IMAGE)))],
+        ];
+    }
+}

Model/Config/Source/ViewXmlImageTypes.php

@@ -10,8 +10,9 @@
 class ViewXmlImageTypes implements OptionSourceInterface
 {
     public function __construct(
-        private readonly ArrayManager $arrayManager,
-        private readonly ConfigInterface $viewConfig
+        private readonly ArrayManager    $arrayManager,
+        private readonly ConfigInterface $viewConfig,
+        private readonly string $imageType = 'thumbnail'
     ) {
     }
 
@@ -22,11 +23,15 @@ public function toOptionArray(): array
         $imageConfig = $this->arrayManager->get('media/Magento_Catalog/images', $viewConfig) ?? [];
 
         foreach ($imageConfig as $type => $config) {
+            if (!isset($config['type']) || $config['type'] !== $this->imageType) {
+                continue;
+            }
+
             $suffix = '';
 
-            if (array_key_exists('width', $config)) {
+            if (isset($config['width'])) {
                 $widthSuffix = 'W: ' . $config['width'] . 'px';
-                $heightSuffix = array_key_exists('height', $config)
+                $heightSuffix = isset($config['height'])
                     ? 'H: ' . $config['height'] . 'px'
                     : 'H: auto';
 

Plugin/SetCachedImageUrls.php

@@ -3,6 +3,7 @@
 
 namespace Basecom\LiveSearchImageUrls\Plugin;
 
+use Basecom\LiveSearchImageUrls\Model\Config\Source\SelectedImageTypes;
 use Basecom\LiveSearchImageUrls\Model\Config\Source\SizeMode;
 use Basecom\LiveSearchImageUrls\System\ModuleConfig;
 use Magento\Catalog\Helper\Image as ImageHelper;
@@ -26,17 +27,15 @@ class SetCachedImageUrls
      * @param ProductFactory $productFactory
      * @param ArrayManager $arrayManager
      * @param ConfigInterface $viewConfig
-     * @param int|null $fallbackHeight
-     * @param int|null $fallbackWidth
+     * @param array|null $fallbackDimensions
      */
     public function __construct(
         private readonly ModuleConfig    $moduleConfig,
         private readonly ImageHelper     $imageHelper,
         private readonly ProductFactory  $productFactory,
         private readonly ArrayManager    $arrayManager,
         private readonly ConfigInterface $viewConfig,
-        private readonly ?int $fallbackHeight = null,
-        private readonly ?int $fallbackWidth = null,
+        private readonly ?array          $fallbackDimensions = null,
     ) {
     }
 
@@ -70,24 +69,38 @@ private function getProduct(): Product
      */
     public function afterFormat(ImageFormatter $subject, array $result, array $row): array
     {
-        $imageFilePath = $row['thumbnail'] ?? null;
+        $resizeImageTypes = $this->moduleConfig->getResizeImageTypes();
 
-        if (!$imageFilePath) {
+        if (in_array(SelectedImageTypes::IMAGE_TYPE_NONE, $resizeImageTypes, true)) {
             return $result;
         }
 
-        $result['thumbnail']['url'] = $this->getResizedImageUrl($imageFilePath);
+        foreach ($resizeImageTypes as $imageType) {
+            $imageTypeSnakeCase = $this->fromSnakeToCamelCase($imageType);
+            $imageFilePath = $row[$imageTypeSnakeCase] ?? null;
+
+            if (!$imageFilePath) {
+                return $result;
+            }
+
+            $result[$imageTypeSnakeCase]['url'] = $this->getResizedImageUrl($imageType, $imageFilePath);
+        }
 
         return $result;
     }
 
+    private function fromSnakeToCamelCase(string $input): string
+    {
+        return lcfirst(str_replace('_', '', ucwords($input, '_')));
+    }
+
     /**
      * Retrieve resized image url for a given image file
      *
      * @param string $imageFile
      * @return string
      */
-    private function getResizedImageUrl(string $imageFile): string
+    private function getResizedImageUrl(string $imageType, string $imageFile): string
     {
         $imageHelper = $this->imageHelper->init($this->getProduct(), 'product_page_image_small');
 
@@ -99,23 +112,23 @@ private function getResizedImageUrl(string $imageFile): string
             return $imageHelper->getDefaultPlaceholderUrl('thumbnail');
         }
 
-        $imageDimensions = $this->getImageDimensions();
+        $imageDimensions = $this->getImageDimensions($imageType);
 
         return $imageHelper->setImageFile($imageFile)
             ->resize($imageDimensions['width'], $imageDimensions['height'])
             ->getUrl();
     }
 
-    private function getImageDimensions(): array
+    private function getImageDimensions(string $imageType): array
     {
         if ($this->moduleConfig->getResizeMode() === SizeMode::MODE_MANUAL) {
             return [
-                'height' => $this->moduleConfig->getResizeHeight(),
-                'width' => $this->moduleConfig->getResizeWidth(),
+                'height' => $this->moduleConfig->getResizeHeight($imageType),
+                'width' => $this->moduleConfig->getResizeWidth($imageType),
             ];
         }
 
-        if ($imageId = $this->moduleConfig->getImageId()) {
+        if ($imageId = $this->moduleConfig->getImageId($imageType)) {
             $imageConfig = $this->arrayManager->get(
                 sprintf('media/Magento_Catalog/images/%s', $imageId),
                 $this->getFrontendViewConfig()
@@ -128,8 +141,8 @@ private function getImageDimensions(): array
         }
 
         return [
-            'height' => $this->fallbackHeight,
-            'width' => $this->fallbackWidth,
+            'height' => $this->fallbackDimensions[$imageType]['height'],
+            'width' => $this->fallbackDimensions[$imageType]['width'],
         ];
     }
 

README.md

@@ -10,16 +10,14 @@
 
 ---
 
-When preparing the data for the catalog export to live search, die catalog data export module does not consider the resized, cached files.
+When preparing the data for the catalog export to live search, the catalog data export module does not consider the resized, cached files.
 Instead, the unchanged source file (selected in the admin area) is used. This has considerable performance implications, because the images are now a lot bigger than they need to be.
 Depending on the implementation, this can affect the entire catalog and product listing page, but will in any case affect the search popover.
 
-This module adds a plugin to the `ImageFormatter::format()` method, which correctly resizes the thumbnails for the search popover.
+This module adds a plugin to the `ImageFormatter::format()` method, which correctly resizes the images that are synced to the live search catalog.
 This fixes the [issue](https://gitlab.hyva.io/hyva-enterprise/sensei/magento2-ee-magento-live-search/-/issues/9) opened in the Hyva-Enterprise repository
 (You may need to be given access to view the issue). 
 
-In the future, the other image types (`image` and `smallImage`) will be supported as well.
-
 ## Installation
 
 1. Install the module via composer
@@ -37,11 +35,29 @@ In the future, the other image types (`image` and `smallImage`) will be supporte
 
 ## Configuration
 
-There is no configuration available (yet). In the future, this module will be extended by a configuration to allow for resizing other relevant images as well, namely:
-* image
-* smallImage
+The module can be configured under `Stores > Configuration > Live Search > Storefront Features > Resize Images`.
+You can select all images types (`thumbnail`, `image`,`smallImage`,`swatchImage`) that you want to be considered for resizing.
+Selecting `none` (default value) will overrule any selections and no resizing will take effect.
+
+![resize_images.png](docs/images/resize_images.png)
+
+### Resize Mode
+
+There are two available resize modes:
+
+**Manual**:
+
+Allows you to manually configure the width and height dimensions of each image.
+
+![thumbnail_mode_manual.png](docs/images/thumbnail_mode_manual.png)
+
+
+**Automatic** (default):
+
+Select an image id from the defined images in the `view.xml` file. The images are taken from the theme that is configured for the default store view.
+This approach is recommended, as you avoid duplication and unnecessary resizing of additional dimensions.
 
-For now, it only supports resizing of the thumbnail image. 
+![thumbnail_mode_automatic.png](docs/images/thumbnail_mode_automatic.png)
 
 ## Testing
 
@@ -68,7 +84,7 @@ After the reindex has finished, it may take some time for Live Search to sync th
 you could add a `dump($result['thumbnail']['url']);` statement to the `afterFormat()` function before returning.
 
 > [!NOTE]
-> Please make sure that the selected default image for the `thumbnail` is already correctly resized. Resizing this image programmatically may lead to incorrect results.
+> Please make sure that the selected placeholder image for the thumbnail and smaller images is already correctly resized. Resizing this image programmatically may lead to incorrect results.
 > You can change it under `Stores > Configuration > Catalog > Catalog > Product Image Placeholders > Thumbnail`.
 
 ## Contributing

System/ModuleConfig.php

@@ -3,15 +3,17 @@
 
 namespace Basecom\LiveSearchImageUrls\System;
 
+use Basecom\LiveSearchImageUrls\Model\Config\Source\SelectedImageTypes;
 use Magento\Framework\App\Config\ScopeConfigInterface;
 use Magento\Store\Model\ScopeInterface;
 
 class ModuleConfig
 {
-    private const XML_PATH_RESIZE_MODE = 'storefront_features/image_dimensions/size_mode';
-    private const XML_PATH_RESIZE_IMAGE_ID = 'storefront_features/image_dimensions/image_id';
-    private const XML_PATH_RESIZE_HEIGHT = 'storefront_features/image_dimensions/resize_height';
-    private const XML_PATH_RESIZE_WIDTH = 'storefront_features/image_dimensions/resize_width';
+    private const XML_PATH_RESIZE_IMAGE_TYPES = 'storefront_features/resize_images/image_types';
+    private const XML_PATH_RESIZE_MODE = 'storefront_features/resize_images/resize_mode';
+    private const XML_PATH_RESIZE_IMAGE_ID = 'storefront_features/resize_images/%s/image_id';
+    private const XML_PATH_RESIZE_HEIGHT = 'storefront_features/resize_images/%s/resize_height';
+    private const XML_PATH_RESIZE_WIDTH = 'storefront_features/resize_images/%s/resize_width';
 
     public function __construct(
         private readonly ScopeConfigInterface $scopeConfig
@@ -23,20 +25,31 @@ public function getResizeMode($scopeId = null): ?string
         return $this->scopeConfig->getValue(self::XML_PATH_RESIZE_MODE, ScopeInterface::SCOPE_STORE, $scopeId);
     }
 
-    public function getImageId($scopeId = null): ?string
+    public function getResizeImageTypes($scopeId = null): array
     {
-        return $this->scopeConfig->getValue(self::XML_PATH_RESIZE_IMAGE_ID, ScopeInterface::SCOPE_STORE, $scopeId);
+        $resizeImageTypes = $this->scopeConfig
+            ->getValue(self::XML_PATH_RESIZE_IMAGE_TYPES, ScopeInterface::SCOPE_STORE, $scopeId)
+            ?? SelectedImageTypes::IMAGE_TYPE_NONE;
+        return explode(',', $resizeImageTypes);
     }
 
-    public function getResizeHeight($scopeId = null): ?int
+    public function getImageId(string $imageType, $scopeId = null): ?string
     {
-        return (int)$this->scopeConfig->getValue(self::XML_PATH_RESIZE_HEIGHT, ScopeInterface::SCOPE_STORE, $scopeId)
+        $configPath = sprintf(self::XML_PATH_RESIZE_IMAGE_ID, $imageType);
+        return $this->scopeConfig->getValue($configPath, ScopeInterface::SCOPE_STORE, $scopeId);
+    }
+
+    public function getResizeHeight(string $imageType, $scopeId = null): ?int
+    {
+        $configPath = sprintf(self::XML_PATH_RESIZE_HEIGHT, $imageType);
+        return (int)$this->scopeConfig->getValue($configPath, ScopeInterface::SCOPE_STORE, $scopeId)
             ?? null;
     }
 
-    public function getResizeWidth($scopeId = null): ?int
+    public function getResizeWidth(string $imageType, $scopeId = null): ?int
     {
-        return (int)$this->scopeConfig->getValue(self::XML_PATH_RESIZE_WIDTH, ScopeInterface::SCOPE_STORE, $scopeId)
+        $configPath = sprintf(self::XML_PATH_RESIZE_WIDTH, $imageType);
+        return (int)$this->scopeConfig->getValue($configPath, ScopeInterface::SCOPE_STORE, $scopeId)
             ?? null;
     }
 }

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "basecom/magento2-live-search-image-urls",
-    "version": "0.9.0",
+    "version": "1.0.0",
     "description": "Magento2 module to reference the correctly resized image urls in Live Search",
     "type": "magento2-module",
     "license": [