OpenCart – Image Handling

One of the wonderful features of Opencart is how it handles images. Your job as the store owner it just to locate an image on your hard drive and UPLOAD it to the store. The customer then views the image in your catalog. For those that want to know how images are handled then this is the article for you.

Image Cache

All images that are displayed in your catalog are basically cached versions of the original. The cached version is a version that is compressed to a certain quality and re-sized to the settings you specify in your administration. So there is the original image which can be found in image/data and the cached version which can be found in image/cache. This rule takes effect on ALL images with exception of a couple. So let’s take a look at what a cached image will typically look like in terms of the nomenclature.

NON-CACHED: bord-name-tapes.jpg

CACHED: bord-name-tapes-100×100.jpg (this image was re-sized to 100X100 so it concatenates this to the original name.

The Re-size Function and GD Library

Let’s take a closer look at the functions that deal with images. There are three files we will be wanting to look at. The first file is one of many that call the re-size procedure and can be found here: catalog/controller/product/product.php Open up this file and find the following line: $this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get(‘config_image_popup_width’), $this->config->get(‘config_image_popup_height’)); This line of code calls the resize function and in doing so specifies three parameters: 1) the image, 2) Width, and 3) Height. The width and the height are numbers that are specified in the admin settings under the IMAGE TAB (system/settings) Now let’s find this function in model/tool/image/resize.php

Once in that file you will see only one function that looks like this:

public function resize($filename, $width, $height, $type = “”) {

In that function you will see the following two lines: $image->resize($width, $height, $type);
$image->save(DIR_IMAGE . $new_image); 
This is calling functions in the system file so now we will open that up and look for these two very important functions that basically do the dirty work by using PHP and GD LIBRARY

Open up system/library/image.php Look for this line:  public function save($file, $quality = 80) { and now this line: public function resize($width = 0, $height = 0, $default = ”) {

These two functions resize the image then save it in CACHE. We know that it’s being saved in cache because of this line of code in the prior file:

$new_image = ‘cache/’ . utf8_substr($filename, 0, utf8_strrpos($filename, ‘.’)) . ‘-’ . $width . ‘x’ . $height . $type .’.’ . $extension;

I hope this helps explain the process a little more. Basically everywhere an image is supposed to show up it is called to be RE-SIZED and runs through the functions I just listed above:)

Looking for quality OpenCart Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

5 Comments on OpenCart – Image Handling

  1. Lawrence says:

    Hi. Great article. I’m trying to imitate this feature on my site that uses images on a particular page intensively. I’m using imagick extension of my host to resize the image. I was just wondering whether the images are resized and copied to cache everytime the page loads or does it load the first time the page is loaded and everytime the page is loaded, the script checks for the if the file exists and runs the function if it doesn’t.

  2. ajay says:

    Hi, I m new to opencart. I have migrated opencart from my local server to hosting server and changed everythign necessary. but the images and the links are hardcoded. Would like to how to change them.. THere are lot of links and images which would take a lot of time if i have to do them again in hosting server manually. Please help me..

    • Unfortunately this is something that you have to know when you are setting things up on your local. What you COULD do is hire a developer to write a script that loops through each of your Items in your catalog and inserts the image along with the path. However, you’ll need to use a .CSV and match up every line with a product ID. This will take some time. How many items do you have?

Leave a Reply

Your email address will not be published. Required fields are marked *

8 × = 64

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>