Putting a Border on Images

marcus76 · September 9, 2004

this is all good stuff....but can i have images as a border. not a single image minds you. i want left, right, top, bottom gifs - as they all different, old style picture frame type styling of borders that when displayed slot together to create the frame/border around the image???

Thanks

Marcus

Richard Bailey · September 9, 2004

I love what has been done here so that it is only images against the grey which get the border!!

http://www.performancepartz.com/index.php?cPath=199_267

Rich

mistmov · September 13, 2004

I have looked everywhere but no luck. Does anyone know where and how to add image borders to the catilog images and product info pages? Like maybe a background image under the product images?!?!

Thanks

ElLeonBlanco · September 13, 2004

B) I have to agree with Linda. Yes, very crafty code indeed. I highly recommend this modification as it gives the page a more finished look. Also.. this mod takes LESS than 2 minutes to implement... even with BTS 1.2 installed.

GOOD WORK!!!

wiredkiwis · September 14, 2004

Great tip.

Got it working in a couple of minutes

..not bad for a newbie..

Must have been the excellent instructions

Thanks :)

wiredkiwis · September 14, 2004

A question:

I got this picture border tip working well and really like it but I am also interested in using Peter Hasenschwandtner's Automatic Thumbnail creator .

The problem being when I try to use them together, the picture borders are gone :(.

Would there be a way to use them both as I think they would complement each other quite well.

...or is there another way to have a thumbnail creator and automatic borders?

Any ideas, instructions or help would be appreciated.

Thanks :)

softvoice · September 25, 2004

none of the codes provided above are working on my site... of course i modified my code.. hmm.. i dont know which modification conflicts..with these codes... when I tested it with new osc2.2(not modified), it worked.. that means.. there is no error in the code... hmm.. can't even figure that out... is there any other way to add border line.. i guess these are not compatible with mine...

softvoice

akasharkbow · September 26, 2004

none of the codes provided above are working on my site... of course i modified my code.. hmm.. i dont know which modification conflicts..with these codes... when I tested it with new osc2.2(not modified), it worked.. that means.. there is no error in the code... hmm.. can't even figure that out... is there any other way to add border line.. i guess these are not compatible with mine...

softvoice

<{POST_SNAPBACK}>

I couldn't get it to work either but got the css trick to work great.

Excellent work everybody!

David

snakerboy · September 29, 2004

If the templates where to be swtiched to XHTML OR HTML compliant, we could see many more of these "handy hints".

Consider this page, compare it to this one. If you few the source of both pages youll find now images or colors, there isnt even a table to be found, so whats controlling this page layouts?

The answer is CSS, because these pages were built from structually correct XHTML, you can you can apply any style you like.

Wouldnt it be nice if OSCommerce was built with valid XHTML/HTML, page layouts and designs could be changed just like the ZenGarden examples, design and content could be seperated and redesigning your store would be really really easy.

Anyone like to validate this?

oldworldcharms · November 4, 2004

Could someone spell this out B)

when I hightlight the code to paste and replace it I am not sure where to stop.

/ The HTML image wrapper function

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

if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {

return false;

}

// Zebra001 added

$borderforimage = 'false';

if (($width == SMALL_IMAGE_WIDTH) && ($height == SMALL_IMAGE_HEIGHT)) $borderforimage = 'true';

//end Zebra001 added

// alt is added to the img tag even if it is null to prevent browsers from outputting

// the image filename as default

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

if (tep_not_null($alt)) {

$image .= ' title=" ' . htmlspecialchars($alt) . ' "';

}

// Zebra001 added

if ($borderforimage == 'true') $image .= ' class=fotgal ';

// end Zebra001 added

}

Thanks

Here is the solution to the borders on only product images.
* * BACK UP YOUR FILES FIRST * *

You will need to make this change in catalog/includes/functions/htmloutput.php

Here is the first part:
// The HTML image wrapper function 

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

   if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) { 

     return false; 

   } 

// Zebra001 added 

  $borderforimage = 'false'; 

  if (($width == SMALL_IMAGE_WIDTH) && ($height == SMALL_IMAGE_HEIGHT))     $borderforimage = 'true'; 

//end Zebra001 added 
// alt is added to the img tag even if it is null to prevent browsers from outputting 

// the image filename as default 
   $image = '<img src="' . $src . '" border="0" alt="' . htmlspecialchars($alt) . '"'; 
   if (tep_not_null($alt)) { 

    $image .= ' title=" ' . htmlspecialchars($alt) . ' "'; 
// Zebra001 added 

   if  ($borderforimage == 'true')    $image .=  ' class=fotgal '; 

// end Zebra001 added 

   

}
Second Step:

Edit/Add to stylesheet.css
.fotgal {border:2px; border-thickness: 2px; border-color: #ffffff; 

border-style: solid;} 
A:hover .fotgal, A:active .fotgal {border:2px; border-thickness: 2px; 

border-color: purple; border-style: solid}
Put second step in the main stylesheet.css

The css with a white border which trurns purple when you hover over it (Make appropriate changes).

The other message contained the changes to htmloutput.php

Let me know how this goes.

-J

<{POST_SNAPBACK}>

oldworldcharmsdotcom · November 11, 2004

Did anyone figure out how to get a black border around the images? Someone posted that the code above isnt working

John Doswell · July 16, 2005

i would like to add borders to my categorie images in index.php!

i have changed the class smallText to catimages but i cant get it to work properly.. just dont look right...

is how it should look like

    $rows = 0;
   while ($categories = tep_db_fetch_array($categories_query)) {
     $rows++;
     $cPath_new = tep_get_path($categories['categories_id']);
     $width = (int)(100 / MAX_DISPLAY_CATEGORIES_PER_ROW) . '%';
     echo '                <td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br>' . $categories['categories_name'] . '</a></td>' . "\n";
     if ((($rows / MAX_DISPLAY_CATEGORIES_PER_ROW) == floor($rows / MAX_DISPLAY_CATEGORIES_PER_ROW)) && ($rows != $number_of_categories)) {
       echo '              </tr>' . "\n";
       echo '              <tr>' . "\n";
     }
   }


// needed for the new products module shown below
   $new_products_category_id = $current_category_id;
?>
             </tr>
           </table></td>

i have also added new code to my stylesheet

TD.catimages {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 border: 1px;
 border-style: solid;
 border-color: #b6b7cb;
}

what it looks like now...

greetz john

John Doswell · July 16, 2005

ok... forget my above post :-"

change

   $rows = 0;
  while ($categories = tep_db_fetch_array($categories_query)) {
    $rows++;
    $cPath_new = tep_get_path($categories['categories_id']);
    $width = (int)(100 / MAX_DISPLAY_CATEGORIES_PER_ROW) . '%';
    echo '                <td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br>' . $categories['categories_name'] . '</a></td>' . "\n";
    if ((($rows / MAX_DISPLAY_CATEGORIES_PER_ROW) == floor($rows / MAX_DISPLAY_CATEGORIES_PER_ROW)) && ($rows != $number_of_categories)) {
      echo '              </tr>' . "\n";
      echo '              <tr>' . "\n";
    }
  }


// needed for the new products module shown below
  $new_products_category_id = $current_category_id;
?>
            </tr>
          </table></td>

to

   $rows = 0;
  while ($categories = tep_db_fetch_array($categories_query)) {
    $rows++;
    $cPath_new = tep_get_path($categories['categories_id']);
    $width = (int)(100 / MAX_DISPLAY_CATEGORIES_PER_ROW) . '%';
    echo '                <td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT, 'hspace="5" vspace="5" class="framedcat"') . '<br>' . $categories['categories_name'] . '</a></td>' . "\n";
    if ((($rows / MAX_DISPLAY_CATEGORIES_PER_ROW) == floor($rows / MAX_DISPLAY_CATEGORIES_PER_ROW)) && ($rows != $number_of_categories)) {
      echo '              </tr>' . "\n";
      echo '              <tr>' . "\n";
    }
  }


// needed for the new products module shown below
  $new_products_category_id = $current_category_id;
?>
            </tr>
          </table></td>

and add to stylesheet

.framedcat { 
border: 1px solid #FFCC00; 
}

greetz john

gpsp900 · July 20, 2005

Hi all

Added the codes into html_output and stylesheet.css and got an error message on my page.. " Parse error: parse error, unexpected $ in /hsphere/local/home/bmsociet/tekspot.net/catalog/includes/functions/html_output.php on line 304 "

can anyone help please? I am a new to PHP..

site is: www.tekspot.net

regards and thanks

Andy

Here is the solution to the borders on only product images.
* * BACK UP YOUR FILES FIRST * *

You will need to make this change in catalog/includes/functions/htmloutput.php

Here is the first part:
// The HTML image wrapper function 

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

? ?if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) { 

? ? ?return false; 

? ?} 

// Zebra001 added 

? $borderforimage = 'false'; 

? if (($width == SMALL_IMAGE_WIDTH) && ($height == SMALL_IMAGE_HEIGHT)) ? ? $borderforimage = 'true'; 

//end Zebra001 added 
// alt is added to the img tag even if it is null to prevent browsers from outputting 

// the image filename as default 
? ?$image = '<img src="' . $src . '" border="0" alt="' . htmlspecialchars($alt) . '"'; 
? ?if (tep_not_null($alt)) { 

? ? $image .= ' title=" ' . htmlspecialchars($alt) . ' "'; 
// Zebra001 added 

? ?if ?($borderforimage == 'true') ? ?$image .= ?' class=fotgal '; 

// end Zebra001 added 

? ?

}
Second Step:

Edit/Add to stylesheet.css
.fotgal {border:2px; border-thickness: 2px; border-color: #ffffff; 

border-style: solid;} 
A:hover .fotgal, A:active .fotgal {border:2px; border-thickness: 2px; 

border-color: purple; border-style: solid}
Put second step in the main stylesheet.css

The css with a white border which trurns purple when you hover over it (Make appropriate changes).

The other message contained the changes to htmloutput.php

Let me know how this goes.

-J

<{POST_SNAPBACK}>

July 20, 2005

Everything works great in my website exept this froogle contribution, and I would love to get it going, I get the following error when I run through my browser:

SQL error Can't create/write to file 'c:\apachefriendsc:\apachefriends\xampp\tmp\#sql_870_0.MYI' (Errcode: 22)| sql = SELECT concat( 'http://sales.invalsa.com/product_info.php?products_id=' ,products.products_id) AS product_url, products_model AS prodModel, products_weight, manufacturers.manufacturers_name AS mfgName, manufacturers.manufacturers_id, products.products_id AS id, products_description.products_name AS name, products_description.products_description AS description, products.products_quantity AS quantity, products.products_status AS prodStatus, FORMAT( IFNULL(specials.specials_new_products_price, products.products_price) * 1,2) AS price, CONCAT( 'http://sales.invalsa.com/images/' ,products.products_image) AS image_url, products_to_categories.categories_id AS prodCatID, categories.parent_id AS catParentID, categories_description.categories_name AS catName FROM categories, categories_description, products, products_description, products_to_categories left join manufacturers on ( manufacturers.manufacturers_id = products.manufacturers_id ) left join specials on ( specials.products_id = products.products_id AND ( ( (specials.expires_date > CURRENT_DATE) OR (specials.expires_date = 0) ) AND ( specials.status = 1 ) ) ) WHERE products.products_id=products_description.products_id AND products.products_id=products_to_categories.products_id AND products_to_categories.categories_id=categories.categories_id AND categories.categories_id=categories_description.categories_id ORDER BY products.products_id ASC

P L E A SE HELPPPPPPPPP.................. :'(

gpsp900 · July 21, 2005

Hi all

Added the codes into html_output and stylesheet.css and got an error message on my page.. " Parse error: parse error, unexpected $ in /hsphere/local/home/bmsociet/tekspot.net/catalog/includes/functions/html_output.php on line 304 "

can anyone help please? I am a new to PHP..

site is: www.tekspot.net

regards and thanks

Andy

<{POST_SNAPBACK}>

sorted!!! thank you

andy

________________

www.tekspot.net

Phosky · April 5, 2006

Can someone tell me how can I put borders in the images in products_new.php?

I can put borders in the products list, but not in the products_new box in index.php...

Can you help me? Thanks you

Majestikmatt · April 18, 2006

I want image borders in my info boxes, i.e my specials box etc.

whitewolfspirits · January 4, 2009

Here is the solution to the borders on only product images.

* * BACK UP YOUR FILES FIRST * *

You will need to make this change in catalog/includes/functions/htmloutput.php

Here is the first part:
// The HTML image wrapper function 

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

 if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) { 

   return false; 

 } 

// Zebra001 added 

$borderforimage = 'false'; 

if (($width == SMALL_IMAGE_WIDTH) && ($height == SMALL_IMAGE_HEIGHT))	 $borderforimage = 'true'; 

//end Zebra001 added 



// alt is added to the img tag even if it is null to prevent browsers from outputting 

// the image filename as default 



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



 if (tep_not_null($alt)) { 

  $image .= ' title=" ' . htmlspecialchars($alt) . ' "'; 



// Zebra001 added 

 if  ($borderforimage == 'true')	$image .=  ' class=fotgal '; 

// end Zebra001 added 



}
Second Step:

Edit/Add to stylesheet.css
.fotgal {border:2px; border-thickness: 2px; border-color: #ffffff; 

border-style: solid;} 



A:hover .fotgal, A:active .fotgal {border:2px; border-thickness: 2px; 

border-color: purple; border-style: solid}
Put second step in the main stylesheet.css

The css with a white border which trurns purple when you hover over it (Make appropriate changes).

The other message contained the changes to htmloutput.php

Let me know how this goes.

-J

I have been looking for this. THANK YOU!!! It works great and does just what I wanted.

Putting a Border on Images

Recommended Posts

marcus76

Richard Bailey

mistmov

ElLeonBlanco

wiredkiwis

wiredkiwis

softvoice

akasharkbow

snakerboy

oldworldcharms

oldworldcharmsdotcom

John Doswell

John Doswell

gpsp900

Guest

gpsp900

Phosky

Majestikmatt

whitewolfspirits

Archived

Browse

Activity