Recall that it was recommended earlier that you maintain the same conventions when altering code as the original developers of osCommerce. That lesson applies very much to images in that it is safest to keep to the same convention as the default structure when storing images and naming folders. Doing this will promote an intuitive and well-managed folder and naming structure, which will be easy to add to and modify if needs be.

Taking a look at the default images folder, you can see that there are several folders devoted to manufacturers’ products, among other things, as well as a whole bunch of small GIF images. The emphasis, of course, on the GIF images is that they are small—anything more than a few KB and you are asking for speed-related problems when customers download pages:

There are a few other miscellaneous folders: there’s one folder (the infobox folder) for images used in the information box headings to give them a rounded feel, another folder for your banner ads (to be discussed later), and so on. The one thing to note (although it isn’t visible in the screenshot opposite) is that the manufacturer images are not housed within the manufacturer’s image folder, but rather directly under the main images folder—where you store these is entirely up to you, so long as your choice is consistent.

Apart from where you save your images, you need to think very carefully about what you call them. The reason I say this is because you should really be aiming for a uniform, meaningful, and intuitive naming convention to make things easier should you ever have to deal with images programmatically in the future. As it just so happens, books have an obvious product-image name ready made because they all have an ISBN number that uniquely identifies them—accordingly, the demo site will use the book’s ISBN number to identify the images. You should choose whatever is most appropriate for your products—so long as everything is consistently named, you should be fine.

So, now that we know where to save images and how to name them, we need to look at how big or small to make them—both in terms of size and dimensions. This is not as easy as it sounds and whether you like it or not, there is really no set formula for dealing with this. Remember that osCommerce can modify the dimensions of your thumbnail images, and these are set in the Images section of the administration tool. So, the first thing for you to do is take a look at the dimension of your thumbnail images and set the values in Images appropriately—for example, the settings in the demo site are:

Small Image Width 100

Small Image Height 125

because this suits the size of the thumbnail images being used as well as the purpose of the images.

Note that at this size, all the cover writing is not legible, but it is more than clear what the title is and what the cover looks like in general (see the live site at http://www.contechst.com), which is all that is needed, since customers would simply enlarge the thumbnail to get a close look at the cover. If you recall, the default settings had quite different dimensions from the ones listed here, which would distort the current images quite severely. As a result, a bit of trial and error time was spent finding the best thumbnail sizes.

To a large extent, dealing with images that are not associated with products is a lot easier than what we have seen. You really have a few well-defined choices with regards to logos and icons, and once they are made, it is pretty straightforward to implement them. Your main concern, to begin with, is whether or not you think your site will benefit from the use of graphics or not. If yes, then you need to design a suite of your own graphics to complement the rest of the site—alternatively, of course, you can use the graphics that are supplied by default with osCommerce, but in this case you are sacrificing individuality for ease of use.

Once you have made up your mind to use graphics on your site, then the two remaining questions are where you will put them, and what size you will make them. The second question can be easily answered by fiddling around with the image settings in the admin tool to make the space allotted for icons on the site fit the dimensions of your particular graphics. The settings for the demo site are the following because they fit in nicely with the publishers’ logos, and any other graphics can be made to order (in other words, you can always pick a size, and design graphics for that exact size):

Heading Image Width 65

Heading Image Height 40

The answer to the first question really relies on your sense of taste. Obviously placing functional graphics, in other words, those which possess links or perform some sort of task, is quite an important aspect because it needs to be very obvious exactly what their function is. As well as ensuring that functional graphics are placed in easily visible spots, the actual graphic should intuitively reflect its function. Take a look at the graphics provided by osCommerce to see how their designers have linked function to form. For example, they have two shopping bags:

which take customers to their cart contents page—nice and simple, but certainly intuitive!

To some extent, it is impossible to escape the use of graphics, because you will, at the very least, need a company logo of some sort, somewhere towards the top of the page to brand the site and give it some sort of identity. As well as this, there are buttons, which generally need some form of graphic in order to make them look realistic.

Contechst Books is not going to make much use of graphics above and beyond those needed for corporate branding and navigation, but by way of example, we will demonstrate how to change graphics from their defaults to the new business-specific ones (we’ll cover some of the design considerations that go into this too) as well as showing how to move graphics on the page to suit your needs.

Creating and Inserting New Graphics

The demo site will obviously require a new business logo to be inserted at the top of the page. Accordingly, this section is going to concentrate on how to create and insert just such a graphic. To begin with, the original page looks like this:

We would like to create something that will fit in this space nicely and provide an elegant brand or company image, which will be displayed here instead of the osCommerce logo. So, the first thing to do is set about designing the new company image. In order to do this, we must take into account that this is a retailer of computer technology books and so it is likely that the clientele will be hard-working adult programmers or business people.

Because of this, the company image should be sophisticated and elegant, and should avoid garish or loud tones. That’s not to say it can’t be striking in some way, but it should not look like someone has graffitied the name onto the site. Of course, this might all sound quite boring to you, but bear in mind that your site may well have a different clientele—perhaps a marketing or advertising-based clientele that would expect a flamboyant logo.

If you are an established business, then you already know what your company logo is going to be, and you simply need to reproduce that image for insertion here. Of course, if your company already has a color scheme, then you can alter the colors presented on the site quite easily (the next section on Modifying the Stylesheet will cover this). Another consideration, assuming your business doesn’t already have a color scheme, is that this logo will need to fit in with the site as well. But how do you know how to design your logo when the site itself hasn’t been laid out?

The answer to this is, of course, that you should already have a pretty clear image of what you want your site to look like. In your head you should have the fundamental design already worked out, so you should know roughly what is required from your graphics in terms of look and feel. Now, the Contechst site, of which the bookstore demo will become a part, looks like this:

Because the store is going to become part of this site, it is obvious that we already have a rough idea of the color scheme and layout of the site. More importantly, there is a solid basis for designing the Contechst Books logo, and after no small amount of consternation the new logo is unveiled

(I decided on a slightly different color since the demo site is not directly related to parent business):

Now, this still look a bit boring on a plain white background, but all that can all be rectified by judicious use of the stylesheet and background images, which we will look at later in this chapter. For now, though, let’s concentrate on this logo and how it was placed here. First off, because we have not yet designed the site, and because we would like the site to be as flexible as possible, we created this logo (as we will all other graphics) with a transparent background.

This is always a wise choice unless there is a specific compelling reason to do otherwise, because having a transparent background allows you to make underlying changes to the layout and color scheme of the site without affecting the graphic itself. Just think what a nightmare it would be if all your graphics had a specific color background, and you decided to change the background color of your store—you would have to go and change every single graphic individually to reflect this change.

Now, actually inserting this new GIF file can be a bit of a pest if you don’t know where to look. Fortunately, with a bit of searching you will realize that the header.php file in the includes folder is where this particular log is declared. So, open up this file in your favorite editor and search for the line that reads:

<td valign="middle"><?php echo ‘<a href="’ . tep_href_link(FILENAME_DEFAULT) . ‘">’ . tep_image(DIR_WS_IMAGES . ‘oscommerce.gif’, ‘osCommerce’) . ‘</a>’; ?></td>

and replace it with the following line (or whatever the name of your new logo is):

<td valign="middle"><?php echo ‘<a href="’ . tep_href_link(FILENAME_DEFAULT) . ‘">’ . tep_image(DIR_WS_IMAGES . ‘contechst_books.gif’, ‘Contechst Books’) . ‘</a>’; ?></td>

As you should be able to tell, this change forces osCommerce to look for the file contechst_books.gif instead of oscommerce.gif (assuming you have saved it to the images directory), and render that to the browser. The second modified value is simply the text that will pop up when the mouse cursor is hovered over this image—in this case we want the name of our store instead of osCommerce.

The same idea applies for inserting any other graphic on the site—you need to find out where it is referenced in the HTML, and then swap the old GIF file for the new one. If you are going to work on your site’s logos, then you may as well remember to do the graphics for your packing slips and invoices now too.

Moving and Removing Graphics

Let’s begin by talking about how to remove graphics, as this is the easier task to perform. Generally, it involves two steps: find the HTML that inserts the graphic, and then comment it out. Since Contechst Books is not too keen on the use of graphics to echo the functionality offered by text-based links, the three graphics at the top right-hand side of the page, which are used as shortcuts to Your Account, Cart Contents, and Checkout, are going to be removed.

If you haven’t closed header.php already, then go to the HTML just below the line we modified in the last section and comment it out like so (you may prefer to use PHP comments instead):

<!--
<td align="right" valign="bottom"><?php echo ‘<a href="’ . tep_href_link(FILENAME_ACCOUNT, ‘’, ‘SSL’) . ‘">’ . tep_image(DIR_WS_IMAGES . ‘header_account.gif’, HEADER_TITLE_MY_ACCOUNT) . ‘</a>&nbsp;&nbsp;<a href="’ .
tep_href_link(FILENAME_SHOPPING_CART) . ‘">’ . tep_image(DIR_WS_IMAGES . ‘header_cart.gif’, HEADER_TITLE_CART_CONTENTS) . ‘</a>&nbsp;&nbsp;<a href="’ . tep_href_link(FILENAME_CHECKOUT_SHIPPING, ‘’, ‘SSL’) . ‘">’ . tep_image(DIR_WS_IMAGES . ‘header_checkout.gif’, HEADER_TITLE_CHECKOUT) . ‘</a>’; ?>&nbsp;&nbsp;</td>
-->

This removes the table cell that contains the images and their links so that when you navigate to any page in the site, the heading section will look like this:

That is really all it takes to remove a graphic from your site—simply find it and comment it out!

Moving graphics can be slightly trickier because you need to fiddle around with the HTML that is responsible for placing them. Let’s say, for example, that you had inserted a couple of images onto a page—the following screenshot shows the ebooks and documents section with some new graphics in place:

Now, these graphics are nothing fancy, and I’m sure with a bit of time and effort you will be able to make some that will really uplift the visual aspects of your site. On the development side of things, notice that there is some lightening around the e at the top right at the moment (this may not show up too clearly in your printed copy). This type of issue will be common while you develop your site, and I have purposefully left the image like this because the background color will be a lot lighter in the final product, and this effect will disappear—the point being, always develop with the end goal in mind!

Now, let’s assume that we feel that the word Categories is redundant and we wish to replace it with the category image instead. Making this assumption is not unreasonable, since the user will be able to intuit what page they are looking at from its content and layout. All that is left after the text has been removed is to move the graphic across the page to appear on the left of the central column. The same principles apply no matter where you want to place an image; it’s simply a case of putting the right HTML in the right place!

Open up index.php in your editor and locate the line that reads:

<td class="pageHeading"><?php echo HEADING_TITLE; ?>

You should be able to recognize by now that HEADING_TITLE, which in this case holds the word Categories, is defined elsewhere, so there are several options we can use for making that word disappear. You can find out where HEADING_TITLE is defined and change it, or you can remove the entire echo statement, or you can comment out the entire HTML line. So what’s the difference? The main difference is really whether you want to keep the same table structure or not. If you don’t mind losing the cell, then comment out the whole thing; if you want to keep that cell because you want to place something else there, then perform one of the other operations.

For our purposes it is perfectly OK to remove the line entirely, so the new code looks like this:

<!-- <td class="pageHeading"><?php echo HEADING_TITLE; ?> -->

Now, of course, comes the big moment, when we move the graphic to its new home on the left-hand side of the screen. The line directly after the one that you have just commented out, reads as follows:

<td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES . $category[‘categories_image’], $category[‘categories_name’], HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>

Notice that this is simply a new table cell with the td align attribute set to right. Well, since we want the icon on the left, let’s change that attribute and take a look at how this changes the site. The new line should now read:

<td class="pageHeading" align="left"><?php echo tep_image(DIR_WS_IMAGES . $category[‘categories_image’], $category[‘categories_name’], HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>

Saving these changes (plus any comments you wish to insert about the changes) and then viewing the site shows the results are just as we had hoped:

Now that that’s done, the only thing left to do is insert graphic files for all the other categories, and your layout work is all done! Well, that’s not entirely true... Click on another category—one that doesn’t have subcategories. You will see that the icon has been realigned on the right—this means for those categories the alignment is set somewhere else. The best thing to do is search the index.php file for the string align="right", and sure enough, you will find the culprit, which can then be modified to show the graphic on the left-hand side of the screen.

Of course, there are countless possibilities for placing graphics wherever you want. All that’s required is a bit of patience and some time to play around with the HTML. There is, however, one other type of image that is going to play a role in the Contechst Books site and we look at that next.

One of the nicest things about designing sites (in my humble opinion) is that you can use whatever image-making software you choose for designing unbelievable pictures, which can then be very easily incorporated into your site. This ability to design on specialist software and then add to your HTML is a critical feature, without which it would soon become quite distressing to create pleasing background images.

Backgrounds themselves can be quite tricky to get right if you are using them for sections of pages that resize. If you know a page section will always be the same size, then you can design your background to order and there need not be any further fuss. If your page is going to resize, then you need to keep this in mind when creating the background image so that you don’t end up with terribly distorted or ill-fitting pictures.

Now, Contechst Books would like to create a background image for the site’s heading. Obviously, if your background image relies on knowing the width of the page section you are catering to (say, the left-hand column), the first thing to do is find out how wide that column is. Incidentally, by default it is set to 125 pixels, which is slightly too narrow for Contechst’s liking. So, locating the BOX_WIDTH setting in the application_top.php file and setting it to 150 will give us a slightly wider box to work with and also tells us how wide to make our background image at the same time.

There are a few things to keep in mind when creating a background image apart from the width of the page section. Length is also a concern because if you have a really long page, you will end up repeating the image, which can look really untidy if it is not planned for. One solution is to create a large background that will cover all the possible area your site could expand to, but then you need to think carefully about how large this image is going to be—remember, anything over a handful of kilobytes is too much and will contribute to slowing down your site.

You can, of course, create small background images that can be repeated over and over to fill up the screen, but by and large it is best to use background for areas you are certain will not change drastically. In our case, the heading section looks pretty boring as it stands, so we are going to create a background that will fill up the empty (for now) space in the heading section:

As you can see, this has quite a nice effect on the bar, and the background image can be made as small as you like because it simply repeats every time it runs out of width—since it doesn’t change on the horizontal, it looks like one seamless striping of the main navigation bar. Of course, it is quite possible that the main navigation bar will undergo changes, but changing the background image to reflect this is very easy to do.

Notice also why it was important to make the background of the company’s title logo transparent. Without doing that, the area under the title would appear as whatever background color was set, and not as the background image. Let’s quickly look at how to work with button images before moving on to the section on customizing the stylesheet, where we will actually insert the background image we created in this section.

Of course, there are plenty of ways to create buttons, and you might find you want to use Flash or some other software to create exciting, dynamic buttons for your site. Remember too that some special effects can also be achieved through the use of the stylesheet, so you are not totally doomed to using static-looking buttons if you don’t want to go through the trouble of learning how to use other software products.

The buttons provided by osCommerce are fairly innocuous, and will certainly do the trick if you are happy to go ahead and use them. However, you should at least take a look at all the available options, which can be found online and in the community contributions. Working on the buttons yourself will also be a great exercise and will certainly boost your graphics-related experience. The flip side is that there are plenty of nice buttons out there that are free for you to use, so why not just use them instead of reinventing the wheel?

For those of you who do wish to work on your buttons by hand, you will find the relevant images in the includeslanguagesenglishimagesuttons folder instead of with the rest of the images. This is because the buttons themselves depend on the language the site is working in, of course, and you will have to make the same modifications to all the buttons in all the languages you wish to present your site in. Simply create a button image for each type of button that is already in place, back up the current button files, and replace them with the new ones.

For the Contechst Books site, some buttons that are available under the GPL, or GNU General Public License, were used to smarten up the feel of the site. These particular ones were available, at the time of writing, at http://kalsey.com/2003/10/oscommerce_button_set/, and were made available by Adam Kalsey. A screenshot of the site, with the new buttons, will follow in the next section.

Incidentally, you might wish to quickly page over to Chapter 7 where we discuss how to create button templates, which you can then use anywhere in your site whenever you have the need for a new button.