Quick Tip: Setting a Fallback Image

Nothing looks less professional than an ecommerce site full of broken images! However, if you're running a site with a lot of products, it's bound to happen every now and then. Here's how to stop it from happening.

Most ecommerce sites use images to provide a visual representation of their product line. Product images are usually set in one of two ways - either specified in a database field provided by the shopping cart package, or specified in a template by using a file naming convention (for example, /images/PRODUCTCODE.jpg where PRODUCTCODE is replaced with the actual code for each product). Either is a convenient way for specifying product images. However, because the HTML code produced is always dependent on the existance of an image on the filesystem. there is a possibility that your site will display the dreaded "red X" or broken image icons - or in some browsers, such as Firefox, the image's alternate text.

Although it's always best to have images for every single product, it's also a good practice to configure fallback images. These are images that display whenever the specified image in the HTML output cannot be found on the server. We do this by using mod_rewrite rules in our .htaccess file.

A .htaccess file (note the dot in the front) is a method offered by Apache for setting up configuration parameters for the web site. We start by adding the following line to enable mod_rewrite if it does not already exist:

The next set of code looks for any requested files that do not exist, and if the URL has the extension .jpg and resides in the images directory, it is replaced with the image "comingsoon.jpg" located in the images directory. The browser still sees the URL specified in the HTML, but the server delivers the comingsoon.jpg image instead:

Of course, make sure you actually have an image named "comingsoon.jpg" in your /images/ directory!

This method will deliver a fallback image, one that might say "Photo Coming Soon", in place of any missing images. No more broken image links.

If your site uses multiple-sized images, such as thumbnails and full-sized images, you can have multiple copies of this code in your .htaccess file, with the appropriate changes to manipulate files in different directories or with different naming structures. Below is an example from one of our clients, whose site displays 4 sizes of images, with each size residing in a different directory: