How to Customize Product Image URLs Without Override in PrestaShop 9

In PrestaShop 9, developers can customize product image URLs without overrides using the new overrideImageLink hook. This feature allows modules to change product image paths globally without modifying core classes.

This hook is ideal for scenarios like CDN integration, external product image storage, product image optimization services, or custom product image routing, without overriding core files.

The overrideImageLink hook lets modules change product image URLs generated by PrestaShop before they are used in the front office or back office.

PrestaShop triggers this hook whenever the Link class generates a product image URL.

Why Should You Use This Hook?

Content Delivery Network (CDN) Integration:

Serve product images from a faster, globally distributed network instead of your main server, resulting in quicker load times for customers worldwide.

Such as AWS S3, Google Cloud Storage, or another cloud service, freeing up space on your main hosting.

Image Optimization Services:

Implement special logic for different product image types on the front end (large_default, medium_default, cart_default).

Custom Image Routing:

Implement special logic for different image types for front-end(large_default, medium_default, cart_defaultlt), for product image.

Note: This hook is available from PrestaShop 9.0.0

So let’s start the practical..!

Firstly, we need to register a PrestaShop hook in an existing module or any custom module. For this practical, we have created a demo module.

$this->registerHook("overrideImageLink");

Now, let’s implement the actual hook function in the module.

public function hookOverrideImageLink(array $params)
{
    // Check if we have all required parameters
    if (empty($params['ids'])
        || empty($params['type'])
        || empty($params['extension']))
    {
        return;
    }

    $imageId = $params['ids'];
    $imageType = $params['type'];
    $extension = $params['extension'];
    $name = $params['name'] ?? '';
    
    // Get your CDN configuration
    $cdnUrl = Configuration::get('MY_MODULE_CDN_URL') ?: 'https://cdn.abc.com';
    
    // Build the new image path, ex: /img/p/1/2/12-home_default.jpg
    $imagePath = '/img/p/' . substr($imageId, -2) . '/' . substr($imageId, -4, 2) . 
                 '/' . $imageId . '-' . $imageType . '.' . $extension;
    
    // Combine CDN domain with the image path
    $cdnUrl = $cdnUrl . $imagePath;
    
    return $cdnUrl;
}

Hook Parameters

When the overrideImageLink hook is called, PrestaShop passes the following parameters in the $params array:

name → The image filename (ex: 12 for a product image).

ids →The unique identifier for the image (this is the image ID in the database).

type → The image format or variant being used as home_default, large_default, medium_default, or mobile_default. This tells you which size or variant of the image the system is requesting.

extension → The file extension of the image, typically jpg or png. This determines which image format the system is using.

CDN Integration

If we integrate Cloudflare with our online store, Cloudflare’s CDN will serve all product images, making the site faster. We can achieve this by using a hook in our PrestaShop module.

Original image URL:

https://myshop.com/img/p/1/2/12-home_default.jpg

After the hook processes it:

https://cdn.abc.com/img/p/1/2/12-home_default.jpg

The module modifies the product image URL by keeping the same image path (like /img/p/1/2/12-home_default.jpg) and only replacing the main website domain with the CDN domain.

Because the path stays the same, the CDN can easily find and serve the correct product image.

That’s all about this blog. Hope it will help you.

If you are facing any issues or have any doubts about the above process, please feel free to contact us through the comment section.

Also, you can explore our PrestaShop Development Services and a large range of quality PrestaShop Modules.

For any doubt, contact us at support@webkul.com