Drag and Drop upload an images

Actually, this is a question of creativity. The traditional file uploader also works great. But sometimes you want to add images using drag and drop for your product.

• Select the desired images from the local folder and drag the browser window with the mouse and simply release the mouse button.

Upload with the traditional file selection

Along with dragging and dropping, we included using image upload with traditional file selection. On the demonstration on the right you can see how it works smoothly.

• Click on button to open the traditional file manager of the operating system, look for the desired images, select them and click open.

Upload image by reference

In addition to uploading from a local disk, we also included the ability to upload images using links.

• Click to open the text entry form!, insert image links into this form, then click on ok.
• For multiple add use separator #
  Example: http://domain.com/img1.jpg#http://domain.com/img2.jpg

Add images from the server

Along with dragging and dropping and traditional file selection, we left in the extension the ability to add images from the server using the image manager OpenCart.

• Click button to open the image manager OpenCart, clicking on the desired images, you add them to the list, you can go to another directory and continue to add, the list is not canceled when you go to another directory, as everyone chose, click

Settings menu

For more advanced settings, we added a customization menu in version 3.x, now you can customize the extension according to your criteria.

• Сlick on to open the settings modal.
• To disable the permission to change settings, go to the admin panel > system > users > user groups in the "Modify Permission" field, select the setting/setting.

Max images

In the field "Max images" you limit the number of uploaded images.

Reduce size

In the field "Reduce size" you change the resolution; if the image size is larger than you changed, the image will be reduced to the specified size.

Reduce quality

In the field "Reduce quality" you change the compression; Сhanging the image quality, which saves up to 50% of the server space.

Original file

To upload the original file, set - Reduce size: Original, Reduce quality: 0%, Watermark: Disabled.

Remove images

In the field "Remove images" you change the remove images from the server;

• Do not (will not delete anything)
• When product is deleted (only deleting a product also removes images from the server associated with the product)
• When removed from product (only when removed from the product will also be deleted from the server associated with the product)
• Anyway (deleting a product and when removed from the product will also be deleted from the server associated with the product)

Image name

In the "Image Name" field, enable the rename function;

• Default (image name will not be renamed)
• Random (image name will be renamed to make unique)
• Translit (ch{ч} v{в} match inside curly brackets will be replaced by those letters from the front of curly braces. Exemple: чв-> chv) download sample

Upload folder

In the "Image Name" field, you can change the upload folder;

• To use the value from the SKU field in the folder name, you must use {sku}
  Supported: {manufacturer},{model},{sku},{upc},{ean},{jan},{isbn},{mpn}
• To use the date in the folder name, you must use {day},{month},{year}
  {day} return 20
  {month} return 03
  {year} return 2018
• You can use the terms {sku}|product (if sku values are empty then the upload folder will be the product)
  if after | nothing follows the upload will be in the catalog.
Example: product-{sku}|product-{month}{year}

Watermark enable/disable

In the "Watermark" field you can enable or disable the watermark.

• Сlick on to open the settings modal, disabled watermark: enabled watermark:

Watermark customization

In the watermark tab you customization a watermark with a preview.

• InsertRight mouse button click to display the context menu and select the "Paste" command and click enter or a combination of keys Windows: Ctrl + V, MAC: Command + V a link to the image or text in the "Watermark" field, if it is defined as text, then an icon with a color selection will appear at the end of the field, clicking on will pop up a menu with color choices or you can use form with a hex color code.
• In the field the "Position" you choose at which position is on relative to the main image.
• In the “Transmittance” field you choose the degree of transparency of the watermark.
• In the "Dimensions" field you select the size of the watermark relative to the main image.