Module "Upload Image by URL in WebP" for OpenCart

Module description

The module allows uploading product images directly via URL and saving them in WebP format, adding them to the product gallery or setting them as the main image.

This is especially convenient when images are already hosted on a third-party server and do not need to be downloaded manually, renamed, and converted. The module automatically processes all major image formats — JPEG, PNG, WebP — and saves them in an optimized form for the online store.

The module integrates into the ocStore admin panel and adds a new interface to the "Images" tab on the product edit page, including:

• Field for inserting an image URL.
• Checkbox to set the image as the main one.
• Upload progress indicator.
• Automatic addition of the new image to the product gallery list.

Module functionality

1. Upload image by URL
   The administrator inserts the image link, selects whether it should be the main image, and clicks "Upload".
2. Supported formats
   The module supports:
   • JPEG / JPG
   • PNG
   • WebP
3. Automatic file name and folder generation
   • The file name is generated by transliterating the product name, model, store name, and image sequence number.
   • A storage folder catalog/YYYY-MM-DD-H/ is created, where YYYY-MM-DD-H is the current date and hour.
4. Image conversion and optimization
   • If the image width exceeds 900px, it is automatically resized to 900px while preserving proportions.
   • All images are saved in WebP format with 85% quality.
5. Database update
   • If the "Main image" flag is selected, the image path updates the product.image field.
   • If the flag is not selected, the image is added to the product_image table with the correct sort_order.
6. Admin panel display
   • A 100x100px thumbnail is created for new images.
   • Images appear in the product gallery table without page refresh.

Full image processing workflow

1. Insert URL
   The administrator enters the image URL in the "Image URL" field and clicks "Upload".
2. Data validation
   • Checks whether the URL is provided and whether the product ID exists.
   • If data is missing, an error is returned to the user.
3. Retrieve product data
   • The module loads product information via the catalog/product model.
   • If the product is not found, an error is displayed.
4. File name and directory generation
   • Product name, model, and store name are transliterated to Latin characters.
   • A unique file name is generated in the format:

product-name-model-product-id-store-sequence.webp

1.  
   • The storage folder is created automatically based on the current date and hour.
2. Image download
   • cURL is used to fetch data from the specified URL.
   • The server response code is checked (must be 200).
   • If the image is unavailable, an error is returned.
3. Image format validation
   • MIME type is checked using finfo.
   • Only JPEG, PNG, and WebP formats are supported.
4. Image processing
   • Converted to a GD resource (imagecreatefromjpeg/png/webp).
   • If width exceeds 900px, the image is resized while preserving proportions.
   • Saved as WebP with 85% quality.
   • Temporary file is deleted after processing.
5. Saving the path to the database
   • If the "Main image" flag is active, the product.image field is updated.
   • Otherwise, a record is created in product_image with the correct sort_order.
6. User display
   • In the admin panel, a thumbnail of the new image appears in the gallery table.
   • Upload progress is displayed as a progress bar with percentages.
   • After a successful upload, the administrator sees a success notification.

Module advantages

• Time savings when uploading images.
• Automatic WebP conversion to optimize website loading speed.
• Support for bulk operations via simple URL input.
• Integration with the existing ocStore product gallery.

Module "Upload Image by URL in WebP" for ocStore 3.0.4.1

Module version: 2.0
Author: webitproff
Tested on: ocStore 3.0.4.1, PHP 8.2, MySQL 8.0