Product Image Border

[Horizon]

Can anyone help? I'm not that clued up on mySQL.

 

I would like to create a 1px border around ALL my Product Images.

 

I can't seem to find the code that writes product_images mySQL query to HTML (<IMG> tag. Only found the <TD>) :shock:

 

Would appreciate any help.

 

Thanks.

[Guest]

Look in tep_image in includes/functions/html_output.php.

 

Good luck,

Matt

[Horizon]

I found that...but it's applicable to ALL <img>

 

 $image = '<img  src="' . tep_parse_input_field_data($src, array('"' => '"')) . '" border="0" alt="' . tep_parse_input_field_data($alt, array('"' => '"')) . '"';



   if (tep_not_null($alt)) {

     $image .= ' title=" ' . tep_parse_input_field_data($alt, array('"' => '"')) . ' "';

   }



   if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') && (empty($width) || empty($height)) ) {

    if ($image_size = @getimagesize($src)) {

       if (empty($width) && tep_not_null($height)) {

        $ratio = $height / $image_size[1];

         $width = $image_size[0] * $ratio;

       } elseif (tep_not_null($width) && empty($height)) {

         $ratio = $width / $image_size[0];

         $height = $image_size[1] * $ratio;

       } elseif (empty($width) && empty($height)) {

         $width = $image_size[0];

         $height = $image_size[1];

       }

     } elseif (IMAGE_REQUIRED == 'false') {

       return false;

     }

   }



   if (tep_not_null($width) && tep_not_null($height)) {

     $image .= ' width="' . tep_parse_input_field_data($width, array('"' => '"')) . '" height="' . tep_parse_input_field_data($height, array('"' => '"')) . '"';

   }



   if (tep_not_null($parameters)) $image .= ' ' . $parameters;



   $image .= '>';



   return $image;

 }

 

I just want to change the borders of the PRODUCT_IMAGES from my database.

 

eg: in products_new.php .....It returns a string that is inserted into a table.

 

<td>

<?php

 $products_new_query_raw = "select p.products_id, pd.products_name, p.products_image, p.products_price, p.products_tax_class_id, IF(s.status, s.specials_new_products_price, NULL) as specials_new_products_price, p.products_date_added, m.manufacturers_name from " . TABLE_PRODUCTS . " p left join " . TABLE_MANUFACTURERS . " m on p.manufacturers_id = m.manufacturers_id left join " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id and pd.language_id = '" . $languages_id . "' left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id where p.products_status = '1' order by p.products_date_added DESC, pd.products_name";



 $products_new_split = new splitPageResults($HTTP_GET_VARS['page'], MAX_DISPLAY_PRODUCTS_NEW, $products_new_query_raw, $products_new_numrows);



 $products_new_query = tep_db_query($products_new_query_raw);

 while ($products_new = tep_db_fetch_array($products_new_query)) {

   $products_new_array[] = array('id' => $products_new['products_id'],

                                 'name' => $products_new['products_name'],

                                 'image' => $products_new[[color=blue]'products_image'[/color]],

                                 'price' => $products_new['products_price'],

                                 'specials_price' => $products_new['specials_new_products_price'],

                                 'tax_class_id' => $products_new['products_tax_class_id'],

                                 'date_added' => tep_date_long($products_new['products_date_added']),

                                 'manufacturer' => $products_new['manufacturers_name']);

 }

 

Any ideas that side????

[Horizon]

:D Found the solution.

 

Duplicated the function tep_image in includes/html_output.php & renamed it tep_images2 & Made the border="1" (got that from a previous post)

 

Then changed tep_image in includes/modules/new_products.php & includes/modules/products_new.php also to tep_image2

 

And WHOLLA...... it works.

 

Thanks!

[philbish]

Here's another solution :)

 

In includes/functions/html_output.php:

 

Find this line:

 

function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {

 

and replace with:

 

function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $border = '') {

 

Then, find this line:

 

$image = '<img src="' . tep_parse_input_field_data($src, array('"' => '"')) . '" border="" alt="' . tep_parse_input_field_data($alt, array('"' => '"')) . '"';

 

and replace with:

 

$image = '<img src="' . tep_parse_input_field_data($src, array('"' => '"')) . '" border="' . tep_parse_input_field_data($border, array('"' => '"')) . '" alt="' . tep_parse_input_field_data($alt, array('"' => '"')) . '"';

 

Now on all the files that you want to include borders on do something like this:

 

Find:

 

tep_image(DIR_WS_IMAGES . $random_product['products_image'], $random_product['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT)

 

Replace with:

 

tep_image(DIR_WS_IMAGES . $random_product['products_image'], $random_product['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, '', '1')

 

What this does it add the border value as an attribute that is passed to html_output.php

[Guest]

Here's another solution :)

 

In includes/functions/html_output.php:

 

Find this line:

 

function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {

 

and replace with:

 

function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $border = '') {

 

Then, find this line:

 

$image = '<img src="' . tep_parse_input_field_data($src, array('"' => '"')) . '" border="" alt="' . tep_parse_input_field_data($alt, array('"' => '"')) . '"';

 

and replace with:

 

$image = '<img src="' . tep_parse_input_field_data($src, array('"' => '"')) . '" border="' . tep_parse_input_field_data($border, array('"' => '"')) . '" alt="' . tep_parse_input_field_data($alt, array('"' => '"')) . '"';

 

Now on all the files that you want to include borders on do something like this:

 

Find:

 

tep_image(DIR_WS_IMAGES . $random_product['products_image'], $random_product['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT)

 

Replace with:

 

tep_image(DIR_WS_IMAGES . $random_product['products_image'], $random_product['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, '', '1')

 

What this does it add the border value as an attribute that is passed to html_output.php

 

This works great, but one thing I am stuck on now is how do I change the color of that border???

 

It's probably something simple, but I am having a serious brain fart. :shock:

[philbish]

I am not sure how to do that... Look around online and see if you find any HTML tutorials that tell you how to change the color of an image border. I don't even know if it is possible.

 

You could always put the image in a table and set that table to have a border of 1.

 

Phil

[Guest]

www.w3schools.com/css

 

Check out the examples section. There are a number with borders. You can even play around with making changes on the example page.

 

Hth,

Matt

[azer]

thanks for your share :-)

[PrettyPink]

It's a *no-go* for me .. I am using 2.2MS2 ..

 

Contrary to advice from the post of Philbish, there is no such code as this

 

$image = '<img src="' . tep_parse_input_field_data($src, array('"' => '"')) . '" border="" alt="' . tep_parse_input_field_data($alt, array('"' => '"')) . '"';

 

in /includes/functions/html_output.php

 

Pls. help.

 

PP

[Guest]

In MS2, replace (around line 81):

    $image = '<img src="' . tep_output_string($src) . '" border="0" alt="' . tep_output_string($alt) . '"';

with

    $image = '<img src="' . tep_output_string($src) . '" border="' . tep_output_string($border) . '" alt="' . tep_output_string($alt) . '"';

Otherwise, instructions should stay the same (I think). May want to change the $border = '' to $border = '0' when you add it to the tep_image definition.

 

Hth,

Matt

[PrettyPink]

Yeah, that works now .. but how to change color of the border?

 

Rgds

[kimteng]

To add border to product image and style the color of the border, you can add the following style class to the following php pages:

1. includes/modules/product_listing.php - line 126

2. includes/modules/new_products.php - line 39

3. includes/boxes/specials.php - line 26

4. includes/boxes/reviews.php - line 38

5. includes/boxes/whats_new.php - line 39

 

The code to amend: tep_image(DIR_WS_IMAGES . $random_product['products_image'], $random_product['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT)

 

Replace the code with: tep_image(DIR_WS_IMAGES . $random_product['products_image'], $random_product['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class="imageborder"')

 

Then in catalog/stylesheet.css, add the following class definitions to add a black border to the image :

/*

------------image border -------------

Format the border color according to you liking

*/

.imageborder {

border: #00CC00 1px solid;

}

[Terry Mitchell]

To add border to product image and style the color of the border, you can add the following style class to the following php pages:

1. includes/modules/product_listing.php - line 126

2. includes/modules/new_products.php - line 39

3. includes/boxes/specials.php - line 26

4. includes/boxes/reviews.php - line 38

5. includes/boxes/whats_new.php - line 39

 

The code to amend: tep_image(DIR_WS_IMAGES . $random_product['products_image'], $random_product['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT)

 

Replace the code with: tep_image(DIR_WS_IMAGES . $random_product['products_image'], $random_product['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class="imageborder"')

 

Then in catalog/stylesheet.css, add the following class definitions to add a black border to the image :

/*

------------image border -------------

Format the border color according to you liking

*/

.imageborder {

border: #00CC00 1px solid;

}

 

Now THAT'Sthe way to do it!!

 

;)

 

Many thanks

 

Terry