PB-341: Save content as template

- Create thumbnail of screenshot

Author: davemacaulay

app/code/Magento/PageBuilder/Api/Data/TemplateInterface.php

@@ -72,6 +72,13 @@ public function getPreviewImage() : string;
      */
     public function setPreviewImage(string $path) : TemplateInterface;
 
+    /**
+     * Get the thumbnail image for the preview
+     *
+     * @return string
+     */
+    public function getPreviewThumbnailImage() : string;
+
     /**
      * Retrieve template value
      *

app/code/Magento/PageBuilder/Controller/Adminhtml/Template/Save.php

@@ -24,6 +24,7 @@
 use Magento\PageBuilder\Api\TemplateRepositoryInterface;
 use Magento\PageBuilder\Model\TemplateFactory;
 use Psr\Log\LoggerInterface;
+use Magento\Framework\Image\AdapterFactory;
 
 /**
  * Save a template within template manager
@@ -74,6 +75,11 @@ class Save extends Action implements HttpPostActionInterface
      */
     private $mediaStorage;
 
+    /**
+     * @var AdapterFactory
+     */
+    private $imageAdapterFactory;
+
     /**
      * @param Context $context
      * @param LoggerInterface $logger
@@ -84,6 +90,7 @@ class Save extends Action implements HttpPostActionInterface
      * @param ImageContentValidator $imageContentValidator
      * @param ImageContentFactory $imageContentFactory
      * @param Database $mediaStorage
+     * @param AdapterFactory $imageAdapterFactory
      */
     public function __construct(
         Context $context,
@@ -94,7 +101,8 @@ public function __construct(
         Filesystem $filesystem,
         ImageContentValidator $imageContentValidator,
         ImageContentFactory $imageContentFactory,
-        Database $mediaStorage
+        Database $mediaStorage,
+        AdapterFactory $imageAdapterFactory
     ) {
         parent::__construct($context);
 
@@ -106,6 +114,7 @@ public function __construct(
         $this->imageContentValidator = $imageContentValidator;
         $this->imageContentFactory = $imageContentFactory;
         $this->mediaStorage = $mediaStorage;
+        $this->imageAdapterFactory = $imageAdapterFactory;
     }
 
     /**
@@ -142,6 +151,8 @@ public function execute()
                 // Store the preview image within the new entity
                 $template->setPreviewImage($filePath);
             } catch (\Exception $e) {
+                echo $e->getMessage();
+                exit;
                 $this->logger->critical($e);
 
                 return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData(
@@ -252,6 +263,13 @@ private function storePreviewImage(RequestInterface $request) : ?string
                 );
             }
 
+            // Generate a thumbnail, called -thumb next to the image for usage in the grid
+            $absolutePath = $mediaDir->getAbsolutePath() . $filePath;
+            $imageFactory = $this->imageAdapterFactory->create();
+            $imageFactory->open($absolutePath);
+            $imageFactory->resize(350);
+            $imageFactory->save(str_replace('.jpg', '-thumb.jpg', $absolutePath));
+
             // Store the preview image within the new entity
             return $filePath;
         }

app/code/Magento/PageBuilder/Model/Template.php

@@ -62,6 +62,18 @@ public function setPreviewImage(string $path) : TemplateInterface
         return $this->setData(TemplateInterface::KEY_PREVIEW_IMAGE, $path);
     }
 
+    /**
+     * @inheritDoc
+     */
+    public function getPreviewThumbnailImage() : string
+    {
+        return str_replace(
+            '.jpg',
+            '-thumb.jpg',
+            $this->getData(TemplateInterface::KEY_PREVIEW_IMAGE)
+        );
+    }
+
     /**
      * @inheritDoc
      */

app/code/Magento/PageBuilder/Model/TemplateRepository.php

@@ -146,6 +146,9 @@ public function delete(TemplateInterface $template) : bool
             if ($mediaDir->isExist($previewImage)) {
                 $mediaDir->delete($previewImage);
             }
+            if ($mediaDir->isExist($templateModel->getPreviewThumbnailImage())) {
+                $mediaDir->delete($templateModel->getPreviewThumbnailImage());
+            }
         } catch (\Exception $exception) {
             throw new CouldNotDeleteException(
                 __('Could not delete the Template: %1', $exception->getMessage())

app/code/Magento/PageBuilder/Ui/Component/Listing/Columns/PreviewImage.php

@@ -58,7 +58,7 @@ public function prepareDataSource(array $dataSource)
             foreach ($dataSource['data']['items'] as & $item) {
                 $previewImage = $item[$fieldName];
                 $imageSrc = $this->urlBuilder->getBaseUrl(['_type' => UrlInterface::URL_TYPE_MEDIA]) . $previewImage;
-                $item[$fieldName . '_src'] = $imageSrc;
+                $item[$fieldName . '_src'] = str_replace('.jpg', '-thumb.jpg', $imageSrc);
                 $item[$fieldName . '_alt'] = $this->getAlt($item);
                 $item[$fieldName . '_link'] = null;
                 $item[$fieldName . '_orig_src'] = $imageSrc;

app/code/Magento/PageBuilder/view/adminhtml/web/js/grid/columns/preview-image.js

@@ -35,6 +35,16 @@ define([
             return row[this.index + '_src'];
         },
 
+        /**
+         * Retrieve the original images src to be displayed at full size in the modal
+         *
+         * @param {Object} row
+         * @returns {*}
+         */
+        getOrigSrc: function (row) {
+            return row[this.index + '_orig_src'];
+        },
+
         /**
          * Get alternative text data per row.
          *
@@ -63,7 +73,7 @@ define([
             var modalHtml = mageTemplate(
                 thumbnailPreviewTemplate,
                 {
-                    src: this.getSrc(row),
+                    src: this.getOrigSrc(row),
                     alt: this.getAlt(row)
                 }
             ),

dev/tests/integration/testsuite/Magento/PageBuilder/Controller/Adminhtml/Template/SaveTest.php

@@ -8,14 +8,16 @@
 
 namespace Magento\PageBuilder\Controller\Adminhtml\Template;
 
-use Magento\PageBuilder\Api\TemplateRepositoryInterface;
-use Magento\TestFramework\Helper\Bootstrap;
-use Magento\TestFramework\ObjectManager;
 use Magento\Framework\App\Request\Http as HttpRequest;
-use Magento\Framework\Serialize\Serializer\Json;
-use Magento\MediaStorage\Helper\File\Storage\Database;
 use Magento\Framework\Filesystem;
 use Magento\Framework\Filesystem\Directory\Write;
+use Magento\Framework\Image\Adapter\Gd2;
+use Magento\Framework\Image\AdapterFactory;
+use Magento\Framework\Serialize\Serializer\Json;
+use Magento\MediaStorage\Helper\File\Storage\Database;
+use Magento\PageBuilder\Api\TemplateRepositoryInterface;
+use Magento\TestFramework\Helper\Bootstrap;
+use Magento\TestFramework\ObjectManager;
 
 /**
  * Perform tests upon Template save controller
@@ -59,6 +61,16 @@ class SaveTest extends \Magento\TestFramework\TestCase\AbstractBackendController
      */
     private $serializer;
 
+    /**
+     * @var Gd2|\PHPUnit_Framework_MockObject_MockObject
+     */
+    private $imageAdapter;
+
+    /**
+     * @var AdapterFactory|\PHPUnit_Framework_MockObject_MockObject
+     */
+    private $imageAdapterFactory;
+
     /**
      * @inheritDoc
      */
@@ -69,7 +81,7 @@ protected function setUp()
         $this->templateRepository = $this->objectManager->get(TemplateRepositoryInterface::class);
 
         $this->directoryWrite = $this->getMockBuilder(Write::class)
-            ->setMethods(['writeFile'])
+            ->setMethods(['writeFile', 'getAbsolutePath'])
             ->disableOriginalConstructor()
             ->getMock();
         $this->filesystem = $this->getMockBuilder(Filesystem::class)
@@ -82,11 +94,22 @@ protected function setUp()
             ->disableOriginalConstructor()
             ->getMock();
 
+        $this->imageAdapter = $this->getMockBuilder(Gd2::class)
+            ->setMethods(['open', 'resize', 'save'])
+            ->disableOriginalConstructor()
+            ->getMock();
+
+        $this->imageAdapterFactory = $this->getMockBuilder(AdapterFactory::class)
+            ->setMethods(['create'])
+            ->disableOriginalConstructor()
+            ->getMock();
+
         $this->saveController = $this->objectManager->create(
             \Magento\PageBuilder\Controller\Adminhtml\Template\Save::class,
             [
                 'filesystem' => $this->filesystem,
-                'mediaStorage' => $this->mediaStorage
+                'mediaStorage' => $this->mediaStorage,
+                'imageAdapterFactory' => $this->imageAdapterFactory
             ]
         );
 
@@ -113,6 +136,16 @@ public function testSaveAction()
                 $this->anything()
             );
 
+        $this->imageAdapterFactory->expects($this->once())
+            ->method('create')
+            ->willReturn($this->imageAdapter);
+
+        $this->imageAdapter->expects($this->once())
+            ->method('save')
+            ->with(
+                $this->stringContains('-thumb.jpg')
+            );
+
         $this->filesystem->expects($this->once())
             ->method('getDirectoryWrite')
             ->willReturn($this->directoryWrite);