Home | Store | osCommerce Tutorials

osCommerce tep_image() Function

osCommerce online shop has many custom functions. The tep_image() function should be the most common and often used function.

The syntax of osCommerce tep_image() function should looks like:

tep_image(path_of_image, alt_tag_of_image, width_of_image, height_of_image);

There are four parameters. The name of the parameters are quite self-explanatory.

The best way to study is through examples. Let's play around tep_image() function with some examples.

osCommerce tep_image() function example 1:

<?php

require('includes/application_top.php');

echo tep_image(DIR_WS_IMAGES . "store_logo.png");

?>

You should notice that the above tep_image() function only provide the 1st parameter, i.e. path of image. Let's see if it works.

Path of Image:

We learned before that DIR_WS_IMAGES was defined as "images/" in the includes/configure.php file. Therefore the path of image can be read as "images/store_logo.png".

Save the file as tep_image_custom_function_1.php.

Upload to the home directory (catalog folder) of your osCommerce shop.

Access the URL of this file.

PHP example filetep_image_custom_function_1.zip

The output of the above typical PHP example should look like:

Hm... The image is displayed successfully even only with the path_of_image parameter.

Let's check the source codes of the web page:

<img src="images/store_logo.png" border="0" alt="" width="227" height="50">

Noticed that the alt tag is nothing. However the width and height of the image were filled in even without the image_width and image_height parameters.

osCommerce tep_image() function example 2:

<?php

require('includes/application_top.php');

echo tep_image(DIR_WS_IMAGES . "store_logo.png", "osCommerce shop");

?>

In this example, we also provide the 2nd parameter, i.e. the alt tag description.

Save the file as tep_image_custom_function_2.php.

Upload to the home directory (catalog folder) of your osCommerce shop.

Access the URL of this file.

PHP example filetep_image_custom_function_2.zip

The output of the above typical PHP example should look like:

Let's check the source codes of the web page again:

<img src="images/store_logo.png" border="0" alt="osCommerce shop" title="osCommerce shop" width="227" height="50">

Look! the alt tag is not empty now. This is good for SEO purpose.

Adding CSS Styles to tep_image() function

Adding CSS styles to tep_image() function allows more control of the images. Simply enclose the parameter with single quotes. For example:

tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'style="padding:10px;"')

Adding CSS Class to tep_image function

This is same as adding CSS styles. remember to enclose the parameter with single quotes. For example

tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class="alignNewProductsImage"')