MAGETWO-94988: Image downsampling to 80% on the product page

getjohn · Oct 17, 2018 · b8f78cc · b8f78cc
1 parent 448770c
commit b8f78cc
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 26 deletions.
diff --git a/app/code/Magento/Backend/Block/DataProviders/UploadConfig.php b/app/code/Magento/Backend/Block/DataProviders/UploadConfig.php
@@ -0,0 +1,40 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento\Backend\Block\DataProviders;
+
+use Magento\Framework\View\Element\Block\ArgumentInterface;
+
+
+/**
+ * Provides additional data for image uploader
+ */
+class UploadConfig implements ArgumentInterface
+{
+    /**
+     * @var \Magento\Framework\App\Config\ScopeConfigInterface
+     */
+    private $config;
+
+    /**
+     * @param \Magento\Framework\App\Config\ScopeConfigInterface $config
+     */
+    public function __construct(\Magento\Framework\App\Config\ScopeConfigInterface $config)
+    {
+        $this->config = $config;
+    }
+
+    /**
+     * Get image resize configuration
+     *
+     * @return int
+     */
+    public function getIsResizeEnabled(): int
+    {
+        return (int) $this->config->getValue('system/upload_configuration/enable_resize');
+    }
+}
diff --git a/app/code/Magento/Backend/etc/adminhtml/system.xml b/app/code/Magento/Backend/etc/adminhtml/system.xml
@@ -322,15 +322,26 @@
             </group>
             <group id="upload_configuration" translate="label" type="text" sortOrder="1000" showInDefault="1" showInWebsite="1" showInStore="1">
                 <label>Images Upload Configuration</label>
-                <field id="max_width" translate="label comment" type="text" sortOrder="100" showInDefault="1" showInWebsite="0" showInStore="0" canRestore="1">
+                <field id="enable_resize" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="0" showInStore="0" canRestore="1">
+                    <label>Enable Frontend Resize</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>Resize performed via javascript before file upload.</comment>
+                </field>
+                <field id="max_width" translate="label comment" type="text" sortOrder="300" showInDefault="1" showInWebsite="0" showInStore="0" canRestore="1">
                     <label>Maximum Width</label>
                     <validate>validate-greater-than-zero validate-number required-entry</validate>
                     <comment>Maximum allowed width for uploaded image.</comment>
+                    <depends>
+                        <field id="enable_resize">1</field>
+                    </depends>
                 </field>
-                <field id="max_height" translate="label comment" type="text" sortOrder="200" showInDefault="1" showInWebsite="0" showInStore="0" canRestore="1">
+                <field id="max_height" translate="label comment" type="text" sortOrder="400" showInDefault="1" showInWebsite="0" showInStore="0" canRestore="1">
                     <label>Maximum Height</label>
                     <validate>validate-greater-than-zero validate-number required-entry</validate>
                     <comment>Maximum allowed height for uploaded image.</comment>
+                    <depends>
+                        <field id="enable_resize">1</field>
+                    </depends>
                 </field>
             </group>
         </section>

diff --git a/app/code/Magento/Backend/etc/config.xml b/app/code/Magento/Backend/etc/config.xml
@@ -29,6 +29,7 @@
                 <enable_charts>1</enable_charts>
             </dashboard>
             <upload_configuration>
+                <enable_resize>1</enable_resize>
                 <max_width>1920</max_width>
                 <max_height>1200</max_height>
             </upload_configuration>

diff --git a/app/code/Magento/Backend/view/adminhtml/templates/media/uploader.phtml b/app/code/Magento/Backend/view/adminhtml/templates/media/uploader.phtml
@@ -14,7 +14,8 @@
         "Magento_Backend/js/media-uploader" : {
             "maxFileSize": <?= /* @escapeNotVerified */ $block->getFileSizeService()->getMaxFileSize() ?>,
             "maxWidth":<?= /* @escapeNotVerified */ $block->getImageUploadMaxWidth() ?> ,
-            "maxHeight": <?= /* @escapeNotVerified */ $block->getImageUploadMaxHeight() ?>
+            "maxHeight": <?= /* @escapeNotVerified */ $block->getImageUploadMaxHeight() ?>,
+            "isResizeEnabled": <?= /* @noEscape */ $block->getImageUploadConfigData()->getIsResizeEnabled() ?>
         }
     }'
 >

diff --git a/app/code/Magento/Backend/view/adminhtml/web/js/media-uploader.js b/app/code/Magento/Backend/view/adminhtml/web/js/media-uploader.js
@@ -25,9 +25,20 @@ define([
          * @private
          */
         _create: function () {
-            var
-                self = this,
-                progressTmpl = mageTemplate('[data-template="uploader"]');
+            var self = this,
+                progressTmpl = mageTemplate('[data-template="uploader"]'),
+                isResizeEnabled = this.options.isResizeEnabled,
+                resizeConfiguration = {
+                    action: 'resize',
+                    maxWidth: this.options.maxWidth,
+                    maxHeight: this.options.maxHeight
+                };
+
+            if (!isResizeEnabled) {
+                resizeConfiguration = {
+                    action: 'resize'
+                };
+            }
 
             this.element.find('input[type=file]').fileupload({
                 dataType: 'json',
@@ -44,8 +55,7 @@ define([
                  * @param {Object} data
                  */
                 add: function (e, data) {
-                    var
-                        fileSize,
+                    var fileSize,
                         tmpl;
 
                     $.each(data.files, function (index, file) {
@@ -115,11 +125,9 @@ define([
                 process: [{
                     action: 'load',
                     fileTypes: /^image\/(gif|jpeg|png)$/
-                }, {
-                    action: 'resize',
-                    maxWidth: this.options.maxWidth,
-                    maxHeight: this.options.maxHeight
-                }, {
+                },
+                resizeConfiguration,
+                {
                     action: 'save'
                 }]
             });

diff --git a/app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Gallery/Content.php b/app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Gallery/Content.php
@@ -17,9 +17,16 @@
 use Magento\Framework\View\Element\AbstractBlock;
 use Magento\Framework\App\Filesystem\DirectoryList;
 use Magento\Framework\Exception\FileSystemException;
+use Magento\Framework\App\ObjectManager;
+use Magento\Backend\Block\DataProviders\UploadConfig as ImageUploadConfigDataProvider;
 
 class Content extends \Magento\Backend\Block\Widget
 {
+    /**
+     * @var ImageUploadConfigDataProvider
+     */
+    private $imageUploadConfigDataProvider;
+
     /**
      * @var string
      */
@@ -45,24 +52,32 @@ class Content extends \Magento\Backend\Block\Widget
      * @param \Magento\Framework\Json\EncoderInterface $jsonEncoder
      * @param \Magento\Catalog\Model\Product\Media\Config $mediaConfig
      * @param array $data
+     * @param ImageUploadConfigDataProvider $imageUploadConfigDataProvider
      */
     public function __construct(
         \Magento\Backend\Block\Template\Context $context,
         \Magento\Framework\Json\EncoderInterface $jsonEncoder,
         \Magento\Catalog\Model\Product\Media\Config $mediaConfig,
-        array $data = []
+        array $data = [],
+        ImageUploadConfigDataProvider $imageUploadConfigDataProvider = null
     ) {
         $this->_jsonEncoder = $jsonEncoder;
         $this->_mediaConfig = $mediaConfig;
         parent::__construct($context, $data);
+        $this->imageUploadConfigDataProvider = $imageUploadConfigDataProvider
+            ?: ObjectManager::getInstance()->get(ImageUploadConfigDataProvider::class);
     }
 
     /**
      * @return AbstractBlock
      */
     protected function _prepareLayout()
     {
-        $this->addChild('uploader', \Magento\Backend\Block\Media\Uploader::class);
+        $this->addChild(
+            'uploader',
+            \Magento\Backend\Block\Media\Uploader::class,
+            ['image_upload_config_data' => $this->imageUploadConfigDataProvider]
+        );
 
         $this->getUploader()->getConfig()->setUrl(
             $this->_urlBuilder->addSessionParam()->getUrl('catalog/product_gallery/upload')

diff --git a/app/code/Magento/Catalog/Model/Product/Image.php b/app/code/Magento/Catalog/Model/Product/Image.php
@@ -36,7 +36,7 @@ class Image extends \Magento\Framework\Model\AbstractModel
      *
      * @var int
      */
-    protected $_quality = 80;
+    protected $_quality = null;
 
     /**
      * @var bool
@@ -294,7 +294,8 @@ public function setQuality($quality)
      */
     public function getQuality()
     {
-        return $this->_quality;
+        return $this->_quality === null
+            ? $this->_scopeConfig->getValue('system/upload_configuration/jpeg_quality') : $this->_quality;
     }
 
     /**
@@ -471,7 +472,7 @@ public function getImageProcessor()
         $this->_processor->keepTransparency($this->_keepTransparency);
         $this->_processor->constrainOnly($this->_constrainOnly);
         $this->_processor->backgroundColor($this->_backgroundColor);
-        $this->_processor->quality($this->_quality);
+        $this->_processor->quality($this->getQuality());
         return $this->_processor;
     }
 
@@ -854,7 +855,7 @@ private function getMiscParams()
             'constrain_only' => ($this->_constrainOnly ? 'do' : 'not') . 'constrainonly',
             'background' => $this->_rgbToString($this->_backgroundColor),
             'angle' => $this->_angle,
-            'quality' => $this->_quality,
+            'quality' => $this->getQuality(),
         ];
 
         // if has watermark add watermark params to hash

diff --git a/app/code/Magento/Catalog/etc/adminhtml/system.xml b/app/code/Magento/Catalog/etc/adminhtml/system.xml
@@ -185,5 +185,19 @@
                 </field>
             </group>
         </section>
+        <section id="system" translate="label" type="text" sortOrder="900" showInDefault="1" showInWebsite="1" showInStore="1">
+            <class>separator-top</class>
+            <label>System</label>
+            <tab>advanced</tab>
+            <resource>Magento_Config::config_system</resource>
+            <group id="upload_configuration" translate="label" type="text" sortOrder="1000" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Images Upload Configuration</label>
+                <field id="jpeg_quality" translate="label comment" type="text" sortOrder="100" showInDefault="1" showInWebsite="0" showInStore="0" canRestore="1">
+                    <label>Quality</label>
+                    <validate>validate-digits validate-digits-range digits-range-1-100 required-entry</validate>
+                    <comment>Jpeg quality for resized images 1-100%.</comment>
+                </field>
+            </group>
+        </section>
     </system>
 </config>
diff --git a/app/code/Magento/Catalog/etc/config.xml b/app/code/Magento/Catalog/etc/config.xml
@@ -65,6 +65,9 @@
                     <product_custom_options_fodler>custom_options</product_custom_options_fodler>
                 </allowed_resources>
             </media_storage_configuration>
+            <upload_configuration>
+                <jpeg_quality>80</jpeg_quality>
+            </upload_configuration>
         </system>
         <design>
             <watermark>

diff --git a/app/code/Magento/Cms/view/adminhtml/layout/cms_wysiwyg_images_index.xml b/app/code/Magento/Cms/view/adminhtml/layout/cms_wysiwyg_images_index.xml
@@ -9,7 +9,10 @@
     <container name="root">
         <block class="Magento\Cms\Block\Adminhtml\Wysiwyg\Images\Content" name="wysiwyg_images.content" template="Magento_Cms::browser/content.phtml">
             <block class="Magento\Cms\Block\Adminhtml\Wysiwyg\Images\Tree" name="wysiwyg_images.tree" template="Magento_Cms::browser/tree.phtml"/>
-            <block class="Magento\Cms\Block\Adminhtml\Wysiwyg\Images\Content\Uploader" name="wysiwyg_images.uploader" template="Magento_Cms::browser/content/uploader.phtml"/>
-        </block>
+            <block class="Magento\Cms\Block\Adminhtml\Wysiwyg\Images\Content\Uploader" name="wysiwyg_images.uploader" template="Magento_Cms::browser/content/uploader.phtml">
+                <arguments>
+                    <argument name="image_upload_config_data" xsi:type="object">Magento\Backend\Block\DataProviders\UploadConfig</argument>
+                </arguments>
+            </block>
     </container>
 </layout>
diff --git a/app/code/Magento/Cms/view/adminhtml/templates/browser/content/uploader.phtml b/app/code/Magento/Cms/view/adminhtml/templates/browser/content/uploader.phtml
@@ -7,6 +7,14 @@
 // @codingStandardsIgnoreFile
 
 /** @var $block \Magento\Cms\Block\Adminhtml\Wysiwyg\Images\Content\Uploader */
+
+$resizeConfig = $block->getImageUploadConfigData()->getIsResizeEnabled()
+    ? "{action: 'resize', maxWidth: "
+        . $block->getImageUploadMaxWidth()
+        . ", maxHeight: "
+        . $block->getImageUploadMaxHeight()
+        . "}"
+    : "{action: 'resize'}";
 ?>
 
 <div id="<?= $block->getHtmlId() ?>" class="uploader">
@@ -99,11 +107,9 @@ require([
             action: 'load',
             fileTypes: /^image\/(gif|jpeg|png)$/,
             maxFileSize: <?= (int) $block->getFileSizeService()->getMaxFileSize() ?> * 10
-        }, {
-            action: 'resize',
-            maxWidth: <?= (int) $block->getImageUploadMaxWidth()  ?> ,
-            maxHeight: <?= (int) $block->getImageUploadMaxHeight()  ?>
-        }, {
+        },
+        <?= $block->escapeHtml($resizeConfig) ?>,
+        {
             action: 'save'
         }]
     });