Blog

Real Time Image Manipulation

3rd January 2011

Standard image manipulation in Codeigniter can be a laborious process; since it’s basic functionality doesn’t include compressing image size or quality, large images are often forced into small spaces, distorting their appearance and increasing load time.

Using cache and a class.upload.php script, to manipulate your images is much faster and more efficient a solution than the more traditional process. The class.upload.php script, devised by Colin Verot, is designed to simplify image upload and manipulation; it removes the need to upload numerous image sizes onto the server, supports more file formats than other scripts, and reduces image loading time for the site user.

Crush discovered class.upload.php, which is what we initially used in our coding. However, our developers soon upgraded the script with our own coding to produce a more flexible package, suited to our clients needs.

This tutorial will explain how to use cached images instead of resizing, cropping, and converting an image on every HTTP request. This allows you to upload an image just once; your website then creates one modified image, which is saved in the cache folder, and used for all subsequent requests for that modified image.

Codeigniter sample code image

How to install?

  1. Download the necessary zip files from here.
  2. Put class.upload.php and Imaging.php into ‘system/application/libraries/’ folder.
  3. Put MY_html_helper.php in ‘application/helpers/’ folder. At Crush, we modified the written function in this section so attributes like ‘alt’ and ‘class’ could be added to an image. We also added our own function to get an image cache filename, which we can also then manipulate.
  4. Put my_image_formats.php into ‘application/config/’ folder
  5. Before we start using cached images we need to create a folder which will contain them. The folder called ‘cache’ needs to be created in the root of your file system. Do not forget to add cache folder into htaccess rewrite conditions, so its not being processed by index.php – otherwise you will not see images from cache folder.

Before we start using the cached images we need to create the folder that will contain them. This folder, called ‘cache’, needs to be created in the root of your file system. Don’t forget to add the cache folder into the htaccess rewrite conditions, so it’s not being processed by index.php – if this happens you won’t be able to see the images from the cache folder.

How to use it?

  1. To display image thumb in your view files use ‘img_format’: img_format(array(‘src’ => ‘upload/image/image_1.jpg’, ‘alt’ => ‘image_1’), ‘image_thumb’)
  2. If you want to insert new, update, or delete the cached file you can find it with ‘img_cache’: file_delete(img_cache(‘upload/image/image_1′,’image_thumb’,’jpg’)

Summary

The main advantage to using cache in image manipulation is that it is easy to change the image format by modifying the set format template in my_image_formats.php and clearing the cache folder. This is much quicker than the typical Codeigniter process and would suit those disappointed with Codeigniter’s built in image resizing.

Using cache doesn’t just benefit developers – it’s also great for the end user too. Cached images load much quicker than the original images, which encourages faster page load times – this keeps the user on the page and less likely to wander off because the site was too slow.

Related Articles

Password Security

18th June 2015

What was the last password you entered online? How bad would it be if this password got in to the wrong hands? Crush takes a look at passwords and password security

Where did my traffic go?!

11th September 2014

Website traffic, goals and revenue can go down as well as up. If the important numbers do start to head south, Crush can help! Here is a tip to identify if a particular source of traffic is particularly to blame – and if so, which one it is. In Google Analytics, select two date ranges […]

Don’t Fear the Internet

9th August 2011

For all new-comers to the digital industry, Crush recommend you take a look at Don’t Fear the Internet, a great reference point on all things technical.