From e2f9492196e74754dc6498ef747139fb676e2703 Mon Sep 17 00:00:00 2001 From: Pierre Gauthier Date: Wed, 6 Oct 2021 08:44:29 +0200 Subject: [PATCH 1/4] [VisualSearch] Show Image Preview in Popin #ESP-290 --- .../Controller/Search/ByImage.php | 67 ---------- .../Controller/Search/UploadImage.php | 75 +++++++++++ .../Model/ImageUploader.php | 123 ++++++++++++++++++ .../i18n/en_US.csv | 1 + .../i18n/fr_FR.csv | 1 + .../frontend/templates/search/form.mini.phtml | 35 ++++- .../view/frontend/web/css/source/_module.less | 15 +++ .../view/frontend/web/js/search-by-image.js | 32 +---- .../frontend/web/template/image-preview.html | 29 +++++ .../view/frontend/web/template/uploader.html | 38 ++++++ 10 files changed, 322 insertions(+), 94 deletions(-) create mode 100644 src/module-elasticsuite-visual-search/Controller/Search/UploadImage.php create mode 100644 src/module-elasticsuite-visual-search/Model/ImageUploader.php create mode 100644 src/module-elasticsuite-visual-search/view/frontend/web/template/image-preview.html create mode 100644 src/module-elasticsuite-visual-search/view/frontend/web/template/uploader.html diff --git a/src/module-elasticsuite-visual-search/Controller/Search/ByImage.php b/src/module-elasticsuite-visual-search/Controller/Search/ByImage.php index bcac2eb8e..bb7f950a2 100644 --- a/src/module-elasticsuite-visual-search/Controller/Search/ByImage.php +++ b/src/module-elasticsuite-visual-search/Controller/Search/ByImage.php @@ -37,26 +37,6 @@ */ class ByImage extends Action { - /** - * @var UploaderFactory - */ - protected $uploaderFactory; - - /** - * @var AdapterFactory - */ - protected $adapterFactory; - - /** - * @var Filesystem - */ - protected $filesystem; - - /** - * @var Config - */ - protected $config; - /** * @var SearchByImageManager */ @@ -76,29 +56,17 @@ class ByImage extends Action * Constructor. * * @param Context $context Controller action context. - * @param UploaderFactory $uploaderFactory Uploader factory. - * @param AdapterFactory $adapterFactory Image adapter factory. - * @param Filesystem $filesystem Filesystem. - * @param Config $config Config. * @param SearchByImageManager $searchByImageManager Search by image manager. * @param Resolver $layerResolver Catalog Layer Resolver. * @param Session $session Session. */ public function __construct( Context $context, - UploaderFactory $uploaderFactory, - AdapterFactory $adapterFactory, - Filesystem $filesystem, - Config $config, SearchByImageManager $searchByImageManager, Resolver $layerResolver, Session $session ) { parent::__construct($context); - $this->uploaderFactory = $uploaderFactory; - $this->adapterFactory = $adapterFactory; - $this->filesystem = $filesystem; - $this->config = $config; $this->searchByImageManager = $searchByImageManager; $this->layerResolver = $layerResolver; $this->session = $session; @@ -114,11 +82,6 @@ public function execute() $result = $this->resultFactory->create(ResultFactory::TYPE_PAGE); try { $imagePath = $this->session->getData('visual_search_image_path'); - if (!empty($_FILES)) { - $imageData = $this->uploadImage(); - $imagePath = $imageData['path'] . $imageData['file']; - } - if (!$imagePath) { $this->messageManager->addErrorMessage(__('An error occurred while uploading your image')); @@ -137,34 +100,4 @@ public function execute() return $result; } - - /** - * Upload posted image. - * - * @return array - * @throws LocalizedException - * @throws Exception - */ - private function uploadImage(): array - { - $imageAdapter = $this->adapterFactory->create(); - - $uploaderFactory = $this->uploaderFactory->create(['fileId' => 'image']); - $uploaderFactory->setAllowedExtensions($this->config->getImagesAllowedExtensions()); - $uploaderFactory->addValidateCallback('search', $imageAdapter, 'validateUploadFile'); - $uploaderFactory->setAllowRenameFiles(true); - $uploaderFactory->setFilesDispersion(true); - - $mediaDirectory = $this->filesystem->getDirectoryRead(DirectoryList::MEDIA); - $destinationPath = $mediaDirectory->getAbsolutePath('search'); - $result = $uploaderFactory->save($destinationPath); - - if (!$result) { - throw new LocalizedException( - __('File cannot be saved to path: $1', $destinationPath) - ); - } - - return $result; - } } diff --git a/src/module-elasticsuite-visual-search/Controller/Search/UploadImage.php b/src/module-elasticsuite-visual-search/Controller/Search/UploadImage.php new file mode 100644 index 000000000..b92e4d117 --- /dev/null +++ b/src/module-elasticsuite-visual-search/Controller/Search/UploadImage.php @@ -0,0 +1,75 @@ + + * @copyright 2021 Smile + * @license Licensed to Smile-SA. All rights reserved. No warranty, explicit or implicit, provided. + * Unauthorized copying of this file, via any medium, is strictly prohibited. + */ +namespace Smile\ElasticsuiteVisualSearch\Controller\Search; + +use Magento\Catalog\Model\Session; +use Magento\Framework\App\Action\Action; +use Magento\Framework\App\Action\Context; +use Magento\Framework\Controller\ResultFactory; +use Magento\Framework\Controller\ResultInterface; +use Magento\Store\Model\StoreManagerInterface; +use Smile\ElasticsuiteVisualSearch\Model\ImageUploader; + +/** + * Upload image. + * + * @category Smile + * @package Smile\ElasticsuiteVisualSearch + * @author Pierre Gauthier + * @see https://qastack.fr/magento/211985/how-to-recreate-magento-2-backend-image-upload-in-frontend + */ +class UploadImage extends Action +{ + /** + * @var ImageUploader + */ + protected $imageFileUploader; + + /** + * @var StoreManagerInterface + */ + protected $storeManager; + + /** + * @param Context $context Contexte. + * @param StoreManagerInterface $storeManager Store Manger. + * @param ImageUploader $imageFileUploader Image File Uploader. + * @param Session $session Session. + */ + public function __construct( + Context $context, + StoreManagerInterface $storeManager, + ImageUploader $imageFileUploader, + Session $session + ) { + parent::__construct($context); + $this->storeManager = $storeManager; + $this->imageFileUploader = $imageFileUploader; + $this->session = $session; + } + + /** + * Image upload action + * + * @return ResultInterface + */ + public function execute() + { + $result = $this->imageFileUploader->saveImageToMediaFolder('search-image'); + $this->session->setData('visual_search_image_path', $result['file']); + + return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result); + } +} diff --git a/src/module-elasticsuite-visual-search/Model/ImageUploader.php b/src/module-elasticsuite-visual-search/Model/ImageUploader.php new file mode 100644 index 000000000..34c9023b8 --- /dev/null +++ b/src/module-elasticsuite-visual-search/Model/ImageUploader.php @@ -0,0 +1,123 @@ + + * @copyright 2021 Smile + * @license Licensed to Smile-SA. All rights reserved. No warranty, explicit or implicit, provided. + * Unauthorized copying of this file, via any medium, is strictly prohibited. + */ + +namespace Smile\ElasticsuiteVisualSearch\Model; + +use Magento\Framework\App\Filesystem\DirectoryList; +use Magento\Framework\Exception\NoSuchEntityException; +use Magento\Framework\Filesystem; +use Magento\Framework\UrlInterface; +use Magento\MediaStorage\Model\File\UploaderFactory; +use Magento\Store\Model\StoreManagerInterface; + +/** + * Image uploader model. + * + * @category Smile + * @package Smile\ElasticsuiteVisualSearch + * @author Pierre Gauthier + * @see https://qastack.fr/magento/211985/how-to-recreate-magento-2-backend-image-upload-in-frontend + */ +class ImageUploader +{ + /** + * @var string + */ + const FILE_DIR = 'search'; + + /** + * @var UploaderFactory + */ + private $uploaderFactory; + + /** + * @var Filesystem + */ + private $filesystem; + + /** + * @var StoreManagerInterface + */ + private $storeManager; + + /** + * @param UploaderFactory $uploaderFactory Uploader factory. + * @param Filesystem $filesystem Filesystem. + * @param StoreManagerInterface $storeManager Store manager. + */ + public function __construct( + UploaderFactory $uploaderFactory, + Filesystem $filesystem, + StoreManagerInterface $storeManager + ) { + $this->uploaderFactory = $uploaderFactory; + $this->storeManager = $storeManager; + $this->filesystem = $filesystem; + } + + /** + * Save file to temp media directory + * + * @param string $fileId File id. + * @return array + */ + public function saveImageToMediaFolder(string $fileId): array + { + try { + $result = ['file' => '', 'size' => '']; + $mediaDirectory = $this->filesystem + ->getDirectoryRead(DirectoryList::MEDIA) + ->getAbsolutePath(self::FILE_DIR); + $uploader = $this->uploaderFactory->create(['fileId' => $fileId]); + $uploader->setAllowRenameFiles(true) + ->setFilesDispersion(false) + ->setAllowedExtensions($this->getAllowedExtensions()); + $result = array_intersect_key($uploader->save($mediaDirectory), $result); + + $result['url'] = $this->getMediaUrl($result['file']); + $result['file'] = $mediaDirectory . '/' . $result['file']; + } catch (\Exception $e) { + $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()]; + } + + return $result; + } + + /** + * Get file url + * + * @param string $file File. + * @return string + * @throws NoSuchEntityException + */ + public function getMediaUrl($file): string + { + $file = ltrim(str_replace('\\', '/', $file), '/'); + + return $this->storeManager + ->getStore() + ->getBaseUrl(UrlInterface::URL_TYPE_MEDIA) . self::FILE_DIR . '/' . $file; + } + + /** + * Get allowed file extensions + * + * @return string[] + */ + public function getAllowedExtensions(): array + { + return ['jpg', 'jpeg', 'gif', 'png']; + } +} diff --git a/src/module-elasticsuite-visual-search/i18n/en_US.csv b/src/module-elasticsuite-visual-search/i18n/en_US.csv index 8c3daef4e..2732a78e1 100644 --- a/src/module-elasticsuite-visual-search/i18n/en_US.csv +++ b/src/module-elasticsuite-visual-search/i18n/en_US.csv @@ -1,5 +1,6 @@ "An error occurred processing your request: %1","An error occurred processing your request: %1" "Api Terms Mapping","Api Terms Mapping" +"Drop image here or click on","Drop image here or click on" "Map the terms returned by the visual search API with the terms you want to use in search queries.","Map the terms returned by the visual search API with the terms you want to use in search queries." "Search results corresponding to your image", "Search results corresponding to your image" "Select the image you want to use for searching","Select the image you want to use for searching" diff --git a/src/module-elasticsuite-visual-search/i18n/fr_FR.csv b/src/module-elasticsuite-visual-search/i18n/fr_FR.csv index 3c9ca0d91..5d9e83c38 100644 --- a/src/module-elasticsuite-visual-search/i18n/fr_FR.csv +++ b/src/module-elasticsuite-visual-search/i18n/fr_FR.csv @@ -1,5 +1,6 @@ "An error occurred processing your request: %1","Une erreur s'est produite lors du traitement de votre demande: %1" "Api Terms Mapping","Mapping des termes de l'API" +"Drop image here or click on","Déposez un image ici ou cliquer sur" "Map the terms returned by the visual search API with the terms you want to use in search queries.","Correspondances entre les termes de l'api et les termes à utiliser dans la requête de recherche." "Search results corresponding to your image", "Résultats de recherche correspondant à votre image" "Select the image you want to use for searching","Sélectionnez l'image que vous souhaitez utiliser pour la recherche" diff --git a/src/module-elasticsuite-visual-search/view/frontend/templates/search/form.mini.phtml b/src/module-elasticsuite-visual-search/view/frontend/templates/search/form.mini.phtml index 73033ee7f..e4c650609 100644 --- a/src/module-elasticsuite-visual-search/view/frontend/templates/search/form.mini.phtml +++ b/src/module-elasticsuite-visual-search/view/frontend/templates/search/form.mini.phtml @@ -57,7 +57,40 @@ $helper = $this->helper('Magento\Search\Helper\Data'); - + + + +
+
+ x +
+
diff --git a/src/module-elasticsuite-visual-search/view/frontend/web/template/uploader.html b/src/module-elasticsuite-visual-search/view/frontend/web/template/uploader.html new file mode 100644 index 000000000..7de16296c --- /dev/null +++ b/src/module-elasticsuite-visual-search/view/frontend/web/template/uploader.html @@ -0,0 +1,38 @@ +
+ + +
+
+
+ + +
+ + + +
+ +
+ +
+ +
+
From b2ea2740d300dc4f8117b2de1ce527dbb8ba2760 Mon Sep 17 00:00:00 2001 From: Pierre Gauthier Date: Wed, 6 Oct 2021 15:23:23 +0200 Subject: [PATCH 2/4] [VisualSearch] Show Search Term in Result Page #ESP-292 --- .../Block/Result.php | 33 +++++++++++++++++-- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/src/module-elasticsuite-visual-search/Block/Result.php b/src/module-elasticsuite-visual-search/Block/Result.php index 4395e77d6..c329bdcea 100644 --- a/src/module-elasticsuite-visual-search/Block/Result.php +++ b/src/module-elasticsuite-visual-search/Block/Result.php @@ -14,12 +14,11 @@ */ namespace Smile\ElasticsuiteVisualSearch\Block; -use Magento\Catalog\Block\Product\ListProduct; use Magento\Catalog\Model\Layer\Resolver as LayerResolver; use Magento\CatalogSearch\Helper\Data; -use Magento\CatalogSearch\Model\ResourceModel\Fulltext\Collection; use Magento\Framework\View\Element\Template\Context; use Magento\Search\Model\QueryFactory; +use Smile\ElasticsuiteVisualSearch\Model\SearchByImageManager; /** * Product visual search result block @@ -30,12 +29,40 @@ */ class Result extends \Magento\CatalogSearch\Block\Result { + /** + * @var SearchByImageManager + */ + protected $searchByImageManager; + + /** + * Result constructor. + * @param Context $context Context. + * @param LayerResolver $layerResolver Layer Resolver. + * @param Data $catalogSearchData Catalog search data. + * @param QueryFactory $queryFactory Query factory. + * @param SearchByImageManager $searchByImageManager Search by image manager. + * @param array $data Data. + */ + public function __construct( + Context $context, + LayerResolver $layerResolver, + Data $catalogSearchData, + QueryFactory $queryFactory, + SearchByImageManager $searchByImageManager, + array $data = [] + ) { + parent::__construct($context, $layerResolver, $catalogSearchData, $queryFactory, $data); + $this->searchByImageManager = $searchByImageManager; + } + /** * {@inheritDoc} */ public function getSearchQueryText() { - return __("Search results corresponding to your image"); + $imageAnalysis = $this->searchByImageManager->search(); + + return __("Search results corresponding to %1", implode(', ', array_column($imageAnalysis, 'name'))); } /** From 9b2c49335bbad8896eaa4ac78981811d37284f3a Mon Sep 17 00:00:00 2001 From: Pierre Gauthier Date: Wed, 6 Oct 2021 16:27:28 +0200 Subject: [PATCH 3/4] [VisualSearch] Show Search Image in Result Page #ESP-291 --- .../Block/Image.php | 61 +++++++++++++++++++ .../Model/ImageUploader.php | 49 ++++----------- .../Model/SearchByImageManager.php | 50 ++++++++++++++- .../layout/visual_search_search_byimage.xml | 6 ++ .../frontend/templates/search/form.mini.phtml | 2 +- .../frontend/templates/search/image.phtml | 22 +++++++ .../view/frontend/web/css/source/_module.less | 12 ++++ 7 files changed, 161 insertions(+), 41 deletions(-) create mode 100644 src/module-elasticsuite-visual-search/Block/Image.php create mode 100644 src/module-elasticsuite-visual-search/view/frontend/templates/search/image.phtml diff --git a/src/module-elasticsuite-visual-search/Block/Image.php b/src/module-elasticsuite-visual-search/Block/Image.php new file mode 100644 index 000000000..9218f3061 --- /dev/null +++ b/src/module-elasticsuite-visual-search/Block/Image.php @@ -0,0 +1,61 @@ + + * @copyright 2021 Smile + * @license Licensed to Smile-SA. All rights reserved. No warranty, explicit or implicit, provided. + * Unauthorized copying of this file, via any medium, is strictly prohibited. + */ +namespace Smile\ElasticsuiteVisualSearch\Block; + +use Magento\Framework\Exception\NoSuchEntityException; +use Magento\Framework\View\Element\Template; +use Magento\Framework\View\Element\Template\Context; +use Smile\ElasticsuiteVisualSearch\Model\SearchByImageManager; + +/** + * Product visual search image preview block + * + * @category Smile + * @package Smile\ElasticsuiteVisualSearch + * @author Pierre Gauthier + */ +class Image extends Template +{ + /** + * @var SearchByImageManager + */ + protected $searchByImageManager; + + /** + * Result constructor. + * @param Context $context Context. + * @param SearchByImageManager $searchByImageManager Search by image manager. + * @param array $data Data. + */ + public function __construct( + Context $context, + SearchByImageManager $searchByImageManager, + array $data = [] + ) { + parent::__construct($context, $data); + $this->searchByImageManager = $searchByImageManager; + } + + /** + * Get search image url. + * + * @return string + * @throws NoSuchEntityException + */ + public function getSearchImageUrl(): string + { + return $this->searchByImageManager->getImageUrl(); + } +} diff --git a/src/module-elasticsuite-visual-search/Model/ImageUploader.php b/src/module-elasticsuite-visual-search/Model/ImageUploader.php index 34c9023b8..513103f32 100644 --- a/src/module-elasticsuite-visual-search/Model/ImageUploader.php +++ b/src/module-elasticsuite-visual-search/Model/ImageUploader.php @@ -15,10 +15,6 @@ namespace Smile\ElasticsuiteVisualSearch\Model; -use Magento\Framework\App\Filesystem\DirectoryList; -use Magento\Framework\Exception\NoSuchEntityException; -use Magento\Framework\Filesystem; -use Magento\Framework\UrlInterface; use Magento\MediaStorage\Model\File\UploaderFactory; use Magento\Store\Model\StoreManagerInterface; @@ -32,39 +28,34 @@ */ class ImageUploader { - /** - * @var string - */ - const FILE_DIR = 'search'; - /** * @var UploaderFactory */ private $uploaderFactory; /** - * @var Filesystem + * @var StoreManagerInterface */ - private $filesystem; + private $searchByImageManager; /** - * @var StoreManagerInterface + * @var SearchByImageManager */ private $storeManager; /** - * @param UploaderFactory $uploaderFactory Uploader factory. - * @param Filesystem $filesystem Filesystem. - * @param StoreManagerInterface $storeManager Store manager. + * @param UploaderFactory $uploaderFactory Uploader factory. + * @param StoreManagerInterface $storeManager Store manager. + * @param SearchByImageManager $searchByImageManager Search by image manager. */ public function __construct( UploaderFactory $uploaderFactory, - Filesystem $filesystem, - StoreManagerInterface $storeManager + StoreManagerInterface $storeManager, + SearchByImageManager $searchByImageManager ) { $this->uploaderFactory = $uploaderFactory; $this->storeManager = $storeManager; - $this->filesystem = $filesystem; + $this->searchByImageManager = $searchByImageManager; } /** @@ -77,16 +68,14 @@ public function saveImageToMediaFolder(string $fileId): array { try { $result = ['file' => '', 'size' => '']; - $mediaDirectory = $this->filesystem - ->getDirectoryRead(DirectoryList::MEDIA) - ->getAbsolutePath(self::FILE_DIR); + $mediaDirectory = $this->searchByImageManager->getSearchImageDirectory(); $uploader = $this->uploaderFactory->create(['fileId' => $fileId]); $uploader->setAllowRenameFiles(true) ->setFilesDispersion(false) ->setAllowedExtensions($this->getAllowedExtensions()); $result = array_intersect_key($uploader->save($mediaDirectory), $result); - $result['url'] = $this->getMediaUrl($result['file']); + $result['url'] = $this->searchByImageManager->getImageUrl($result['file']); $result['file'] = $mediaDirectory . '/' . $result['file']; } catch (\Exception $e) { $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()]; @@ -95,22 +84,6 @@ public function saveImageToMediaFolder(string $fileId): array return $result; } - /** - * Get file url - * - * @param string $file File. - * @return string - * @throws NoSuchEntityException - */ - public function getMediaUrl($file): string - { - $file = ltrim(str_replace('\\', '/', $file), '/'); - - return $this->storeManager - ->getStore() - ->getBaseUrl(UrlInterface::URL_TYPE_MEDIA) . self::FILE_DIR . '/' . $file; - } - /** * Get allowed file extensions * diff --git a/src/module-elasticsuite-visual-search/Model/SearchByImageManager.php b/src/module-elasticsuite-visual-search/Model/SearchByImageManager.php index ef0054bc4..dfb76e30b 100644 --- a/src/module-elasticsuite-visual-search/Model/SearchByImageManager.php +++ b/src/module-elasticsuite-visual-search/Model/SearchByImageManager.php @@ -16,8 +16,12 @@ namespace Smile\ElasticsuiteVisualSearch\Model; use Magento\Framework\App\CacheInterface; +use Magento\Framework\App\Filesystem\DirectoryList; use Magento\Framework\Exception\LocalizedException; +use Magento\Framework\Exception\NoSuchEntityException; +use Magento\Framework\Filesystem; use Magento\Framework\Serialize\SerializerInterface; +use Magento\Framework\UrlInterface; use Magento\Store\Model\StoreManagerInterface; use Smile\ElasticsuiteVisualSearch\Model\Api\Client; @@ -30,6 +34,11 @@ */ class SearchByImageManager { + /** + * @var string + */ + const FILE_DIR = 'search'; + /** * @var Config */ @@ -55,6 +64,12 @@ class SearchByImageManager */ protected $storeManager; + /** + * @var Filesystem + */ + private $filesystem; + + /** * @var string */ @@ -67,20 +82,23 @@ class SearchByImageManager * @param Client $client Api client * @param CacheInterface $cache Cache * @param SerializerInterface $serializer Serializer - * @param StoreManagerInterface $storeManager Serializer + * @param StoreManagerInterface $storeManager Store Manager + * @param Filesystem $filesystem Filesystem */ public function __construct( Config $config, Client $client, CacheInterface $cache, SerializerInterface $serializer, - StoreManagerInterface $storeManager + StoreManagerInterface $storeManager, + Filesystem $filesystem ) { $this->config = $config; $this->client = $client; $this->cache = $cache; $this->serializer = $serializer; $this->storeManager = $storeManager; + $this->filesystem = $filesystem; } /** @@ -121,4 +139,32 @@ public function search(): array return $imageAnalysis; } + + /** + * Get search image directory. + * + * @return string + */ + public function getSearchImageDirectory(): string + { + return $this->filesystem + ->getDirectoryRead(DirectoryList::MEDIA) + ->getAbsolutePath(self::FILE_DIR); + } + + /** + * Get search image url. + * + * @param string|null $file File. + * @return string + * @throws NoSuchEntityException + */ + public function getImageUrl(?string $file = null): string + { + $file = ltrim(str_replace('\\', '/', $file ?: basename($this->imagePath)), '/'); + + return $this->storeManager + ->getStore() + ->getBaseUrl(UrlInterface::URL_TYPE_MEDIA) . self::FILE_DIR . '/' . $file; + } } diff --git a/src/module-elasticsuite-visual-search/view/frontend/layout/visual_search_search_byimage.xml b/src/module-elasticsuite-visual-search/view/frontend/layout/visual_search_search_byimage.xml index 7385739c5..f815b886d 100644 --- a/src/module-elasticsuite-visual-search/view/frontend/layout/visual_search_search_byimage.xml +++ b/src/module-elasticsuite-visual-search/view/frontend/layout/visual_search_search_byimage.xml @@ -19,6 +19,12 @@ + + + helper('Magento\Search\Helper\Data');
diff --git a/src/module-elasticsuite-visual-search/view/frontend/templates/search/image.phtml b/src/module-elasticsuite-visual-search/view/frontend/templates/search/image.phtml new file mode 100644 index 000000000..847098993 --- /dev/null +++ b/src/module-elasticsuite-visual-search/view/frontend/templates/search/image.phtml @@ -0,0 +1,22 @@ + + * @copyright 2021 Smile + * @license Licensed to Smile-SA. All rights reserved. No warranty, explicit or implicit, provided. + * Unauthorized copying of this file, via any medium, is strictly prohibited. + */ + +/** + * Template for search image preview + * + * @var $block \Smile\ElasticsuiteVisualSearch\Block\Image + */ +?> +search-image diff --git a/src/module-elasticsuite-visual-search/view/frontend/web/css/source/_module.less b/src/module-elasticsuite-visual-search/view/frontend/web/css/source/_module.less index 0877b81e0..af79471af 100644 --- a/src/module-elasticsuite-visual-search/view/frontend/web/css/source/_module.less +++ b/src/module-elasticsuite-visual-search/view/frontend/web/css/source/_module.less @@ -32,4 +32,16 @@ } } } + + .visual_search-search-byimage { + .page-title-wrapper { + display: flex; + align-items: center; + .search-image { + max-width: 200px; + margin-top: -50px; + margin-bottom: 20px; + } + } + } } From 183e39d1fcb60ec3412f5d7a75b44561a19fecc9 Mon Sep 17 00:00:00 2001 From: Pierre Gauthier Date: Wed, 6 Oct 2021 16:27:28 +0200 Subject: [PATCH 4/4] [VisualSearch] Allow PNG #ESP-289 --- src/module-elasticsuite-visual-search/Model/Api/Client.php | 1 + src/module-elasticsuite-visual-search/etc/config.xml | 2 +- .../view/frontend/templates/search/form.mini.phtml | 2 +- .../view/frontend/web/css/source/_module.less | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/module-elasticsuite-visual-search/Model/Api/Client.php b/src/module-elasticsuite-visual-search/Model/Api/Client.php index 90464e6eb..619ccefb1 100644 --- a/src/module-elasticsuite-visual-search/Model/Api/Client.php +++ b/src/module-elasticsuite-visual-search/Model/Api/Client.php @@ -111,6 +111,7 @@ public function recognize(string $imagePath): array $imageResizer->keepAspectRatio(true); $imageResizer->open($imagePath); $imageResizer->resize($this->config->getImagesOptimalSize()); + $imagePath = "{$pathParts['dirname']}/{$pathParts['filename']}.jpg"; $imageResizer->save($imagePath); // Check file size. diff --git a/src/module-elasticsuite-visual-search/etc/config.xml b/src/module-elasticsuite-visual-search/etc/config.xml index 663d7821b..52930d99e 100644 --- a/src/module-elasticsuite-visual-search/etc/config.xml +++ b/src/module-elasticsuite-visual-search/etc/config.xml @@ -23,7 +23,7 @@ https://sqjciip0r3.execute-api.eu-west-1.amazonaws.com/ - jpg,jpeg + jpg,jpeg,png 100 640 diff --git a/src/module-elasticsuite-visual-search/view/frontend/templates/search/form.mini.phtml b/src/module-elasticsuite-visual-search/view/frontend/templates/search/form.mini.phtml index 12d4df256..3c282a596 100644 --- a/src/module-elasticsuite-visual-search/view/frontend/templates/search/form.mini.phtml +++ b/src/module-elasticsuite-visual-search/view/frontend/templates/search/form.mini.phtml @@ -60,7 +60,7 @@ $helper = $this->helper('Magento\Search\Helper\Data');
diff --git a/src/module-elasticsuite-visual-search/view/frontend/web/css/source/_module.less b/src/module-elasticsuite-visual-search/view/frontend/web/css/source/_module.less index af79471af..b043c4627 100644 --- a/src/module-elasticsuite-visual-search/view/frontend/web/css/source/_module.less +++ b/src/module-elasticsuite-visual-search/view/frontend/web/css/source/_module.less @@ -37,6 +37,7 @@ .page-title-wrapper { display: flex; align-items: center; + justify-content: space-between; .search-image { max-width: 200px; margin-top: -50px;