3

In Magento 2.2.3 CE, Is it possible to get default maximum image dimensions in Magento when uploading images at admin end?

For example,

I uploaded some images to a product that were 2400x2400 and 1800x1800, but they were resized to 1200x1200 on the product page.

I would like to keep the original image sizes because I need higher resolution on some product images to show greater detail.

enter image description here

Magento Admin end while upload:

enter image description here

  • You want this for your custom module or for core functionality ? – Sanjay Gohil Apr 1 '19 at 6:28
  • let me know do u have any free module? – Nagaraju K Apr 1 '19 at 6:31
  • It might be help magento.stackexchange.com/questions/84772/… – Chirag Patel Apr 1 '19 at 6:32
  • You can control the image dimensions and size in app/design/theme-directory/etc/view.xml file – Raj Mohan R Apr 1 '19 at 6:34
  • @here i have updated my post please review and suggest me thanks – Nagaraju K Apr 2 '19 at 6:21
2

You can set default image upload size in your Magento Admin images upload system configuration:

Stores→Configuration→Advanced→System→Images Upload Configuration

From there you can set the image upload Maximum Height and Maximum Width

  • are u using EE? – Nagaraju K Apr 5 '19 at 6:04
  • Magento CE 2.3.0 – fmsthird Apr 5 '19 at 6:06
  • 1
    ok got it, hello @magefms i am using 2.2.3CE the above feature not available. any way thanks for the infomation – Nagaraju K Apr 5 '19 at 6:26
0
  • If we want to achieve we have to override vendor/magento/module-backend/view/adminhtml/web/js/media-uploader.js from our custom module.

  • Create a module for example: Kensium_Uploadimage.

  • Create requirejs-config.js app/code/Kensium/Uploadimage/view/adminhtml/requirejs-config.js & override media-uploader.js following below

     /**
     *
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */
    
     var config = {
      "map": {
          "*": {
            "Magento_Backend/js/media-uploader": "Kensium_Uploadimage/js/media-uploader"
          }
        } 
    } 
    
  • Create media-uploader.js in the following path app/code/Kensium/Uploadimage/view/adminhtml/web/js/media-uploader.js

     /**
     *
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */
     /**
     * @api
    */
    
    /*global byteConvert*/
    
    
     define([
        'jquery',
        'mage/template',
        'Magento_Ui/js/modal/alert',
         'mage/translate',
        'jquery/file-uploader'
       ], function ($, mageTemplate, alert) {
       'use strict';
    
       $.widget('mage.mediaUploader', {
    
        /**
         *
         * @private
         */
        _create: function () {
            var
                self = this,
                progressTmpl = mageTemplate('[data-template="uploader"]');
    
            this.element.find('input[type=file]').fileupload({
                dataType: 'json',
                formData: {
                    'form_key': window.FORM_KEY
                },
                dropZone: '[data-tab-panel=image-management]',
                sequentialUploads: true,
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                maxFileSize: this.options.maxFileSize,
    
                /**
                 * @param {Object} e
                 * @param {Object} data
                 */
                add: function (e, data) {
                    var
                        fileSize,
                        tmpl;
    
                    $.each(data.files, function (index, file) {
                        fileSize = typeof file.size == 'undefined' ?
                            $.mage.__('We could not detect a size.') :
                            byteConvert(file.size);
    
                        data.fileId = Math.random().toString(33).substr(2, 18);
    
                        tmpl = progressTmpl({
                            data: {
                                name: file.name,
                                size: fileSize,
                                id: data.fileId
                            }
                        });
    
                        $(tmpl).appendTo(self.element);
                    });
    
                    $(this).fileupload('process', data).done(function () {
                        data.submit();
                    });
                },
    
                /**
                 * @param {Object} e
                 * @param {Object} data
                 */
                done: function (e, data) {
                    if (data.result && !data.result.error) {
                        self.element.trigger('addItem', data.result);
                    } else {
                        alert({
                            content: $.mage.__('We don\'t recognize or support this file extension type.')
                        });
                    }
                    self.element.find('#' + data.fileId).remove();
                },
    
                /**
                 * @param {Object} e
                 * @param {Object} data
                 */
                progress: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10),
                        progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
    
                    self.element.find(progressSelector).css('width', progress + '%');
                },
    
                /**
                 * @param {Object} e
                 * @param {Object} data
                 */
                fail: function (e, data) {
                    var progressSelector = '#' + data.fileId;
    
                    self.element.find(progressSelector).removeClass('upload-progress').addClass('upload-failure')
                        .delay(2000)
                        .hide('highlight')
                        .remove();
                }
            });
    
            this.element.find('input[type=file]').fileupload('option', {
                process: [{
                    action: 'load',
                    fileTypes: /^image\/(gif|jpeg|png)$/
                },  {
                    action: 'save'
                }]
            });
        }
    });
    
    return $.mage.mediaUploader;
     });
    
  • only difference is below code removed from custom module.

     {
     action: 'resize',
     maxWidth: this.options.maxWidth,
     maxHeight: this.options.maxHeight
    }
    
  • One more important note is Magento 2.3.1 Release Notes this issue seems to be addressed.

    You can now upload PDP images larger than 1920 x 1200 without compressing and downsizing the images first. Previously, when a merchant uploaded a high quality product image (larger than 1920X1200), Magento resized and compressed the image. Merchants can now set requirements for resizing and compression as well as compression quality and target width and height.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.