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.
tep_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.
tep_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"')