Drag and drop additional image sorting for OpenCart

Sort additional images by dragging and dropping

This modifier adds convenient product image management to the OpenCart admin panel: you can drag and drop additional photos to change the order, as well as swap the additional image with the main one.

Main functions

• Drag & Drop sorting - change the order of images by simply dragging and dropping.
• Swap with main photo — quickly make an additional image the main one (and vice versa).
• Auto-update sorting — sort order values are recalculated automatically.
• Visual effects - lighting and smooth animations when dragging.

Installation

1. Install the modifier through the admin panel (Extension Installer).
2. Refresh/clear the modification cache in the Modifiers section (Refresh).

Using

1. Open product editing: Catalog → Products → Edit .
2. Go to the Images tab.
3. To change the order, drag the images by the ☰ icon.
4. To exchange an additional image with the main one, click the ⇄ icon.

Notes

• The manual sort order entry field is hidden because sorting is done by drag-and-drop.
• Sort values are updated automatically as you move items.
• This requires jQuery UI (Sortable) to work.
• error="skip" attribute is used, so the modifier often works even after template changes.
• A newly added image automatically receives a sequential number at the end of the list.

How it works

The modifier makes changes to the product editing template: adds service IDs for access via JavaScript, adds a column with drag and drop and swap icons, hides the manual sort order field, connects scripts and styles. Drag and drop is implemented via jQuery UI Sortable , and swap is performed by JavaScript logic (replacing values and image sources between the main and secondary ones).