Products Image Manager

Image upload overview

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

Customization overview

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.

What's New

vers. 3.0.6

1) Fixed a watermark after reloading the product editing page, you must re-save the watermark;

vers. 3.0.5

1) Fixed errors when adding via server due to extensions: Lightning, Ckeditor;

1) Fixed OC 1.5.x add-ons through the server, selecting images then when changing directories, and the current directory is returned to the selected images are not highlighted;

vers. 3.0.4

1) Upload the original file;

vers. 3.0.3

1) replace # &% in image url with -;

vers. 3.0.2

1) Fixed alert message on bottom;

vers. 3.0.1

1) Fixed creation of a folder 'false' in the image directory;

2) Fix in the interruption of uploading images in Firefox / Safari;

vers. 3.0.0

1) Image name transliterate;

2) Image name random;

3) Settings images quality;

4) Set images upload folder;

5) Button: remove next all;

6) QuickSave support;

7) Watermark on images uploaded by reference;

vers. 2.2.2

1) Uploads by link without extension at the end of url;

2) Multiple Upload by link through the separator #;

vers. 2.2.1

1) Optimized some php function;

vers. 2.2.0

1) Optimized some js function;

vers. 2.1.9

1) Fixed the problem with upload image if the name of the manufacturer was the symbol ' (for updating it is enough only to upload on a server a folder the admin)

vers. 2.1.8

1) Fixed the problem with saving the watermark (For updating, it will be enough to replace a file "im.js", from admin/view/simple_store/js)

vers. 2.1.7

1) Compatibility opencart v3.x

2) fix watermark text, not more than one word

3) fixed log error(when you save watermark, get error on "Errors List");

vers. 2.1.6

1) fixed error "imgName.jpg is broken" (when you delete any images selected for Multiple Add from server);

2) fixed error. Freezing when clicking on to save the product for at least 1 minute (this happens if you delete old pictures from the edited product and in your store products exceed 1500, its frozen minimum for 1 min);

3) Added watermark!; (IF YOU UPDATE AFTER V2.1.5 OR BELOW DON'T FORGET UPLOAD "ADMIN' FOLDER TO YOUR WEB SITE DIRECTORY)

vers. 2.1.5

1)fixed log error(when you add a new product, get error on "Errors List");

2)fixed error image remove(when you go to any product by filter);

vers. 2.1.4

1) PCRE is compiled without UTF support (while removing the product, you get an error);

2) fixed bug, the images are loaded into the folder "root/imgae", it should have been in the folder "root/imgae/catalog" (when you select a new image from the server could not see these new folders with uploaded images.)

Manual installation

1.Unzip the downloaded file

(If you bought through opencart.com, skip this item)
- You will need an application like WinZip or WinRar to extract the .zip file (Download WinZip for Windows or Mac ) -
  • On your download folder should contain Products-image-manager-x.x.x.zip file, and right-click this file and choose WinZip > Extract to here or Extract Here with Winrar. The contents of your bulk download will be extracted to the folder you are in.

2.Extension Install

OpenCart v 2.x - 3.x

  • Go to your opencart Admin panel, Extensions>Installer, click upload and browse file: Products-image-manager-x.x.x(opencart 2.x-3.x).ocmod.zip
  • Go to Admin>Extensions>Modifications> click button refresh on top right. Thats all!
  • If your version OpenCart 3.x Go to Admin Dashboard click button refresh cache on top right.

OpenCart v 1.5.x

  • Be sure to use the vQmod system! The vQmod download and instructions for installation can be found here: vQmod
  • Extract the contents of the Products-image-manager-x.x.x(opencart 1.5.x).zip archive to the main directory of your website.