Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Want Border around Product Images


scottdev

Recommended Posts

maybe you want to try this css solution? but backup first! :)

 

in ../catalog/includes/funktions/html_output.php

 

right below the Image Wrapper Function

// The HTML image wrapper function
?function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {
? ?if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
? ? ?return false;
? ?}

 

add

 

// Zebra001 added
$borderforimage = 'false';
if (($width == SMALL_IMAGE_WIDTH) && ($height == SMALL_IMAGE_HEIGHT)) $borderforimage = 'true';
//end Zebra001 added

 

 

 

right after

 ? ?if (tep_not_null($alt)) {
? ? ?$image .= ' title=" ' . tep_parse_input_field_data($alt, array('"' => '"')) . ' "';

 

add

// Zebra001 added
if ($borderforimage == 'true') $image .= ' class=fotgal ';
// end Zebra001 added

 

 

so it should look like this at the end

 

////
// 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="' . 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('"' => '"')) . ' "';
// Zebra001 added
if ($borderforimage == 'true') $image .= ' class=fotgal ';
// end Zebra001 added 
? ?}

 

 

 

finally add this to the end of your osc stylesheet.css

.fotgal {border:1px; border-thickness: 1px; border-color: #000000;
border-style: solid;
}

A:hover .fotgal {border:1px; border-thickness: 1px;
border-color: #FFC0C0; border-style: solid;
}

A:active .fotgal {border:1px; border-thickness: 1px;
border-color: #E3E4FF; border-style: solid;
}

 

hope it works for you.

Stephan

 

 

Link to comment
Share on other sites

Our code is a lot diffrent. I'm using MS@ loaded 6!

 

 

 

<?php

/*

$Id: html_output.php,v 1.1.1.1 2003/09/18 19:05:10 wilt Exp $

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

Copyright © 2003 osCommerce

 

Released under the GNU General Public License

*/

 

////

// The HTML href link wrapper function

function tep_href_link($page = '', $parameters = '', $connection = 'NONSSL', $add_session_id = true, $search_engine_safe = true) {

global $request_type, $session_started, $SID;

 

if (!tep_not_null($page)) {

die('</td></tr></table></td></tr></table><br><br><font color="#ff0000"><b>Error!</b></font><br><br><b>Unable to determine the page link!<br><br>');

}

 

if ($connection == 'NONSSL') {

$link = HTTP_SERVER . DIR_WS_HTTP_CATALOG;

} elseif ($connection == 'SSL') {

if (ENABLE_SSL == true) {

$link = HTTPS_SERVER . DIR_WS_HTTPS_CATALOG;

} else {

$link = HTTP_SERVER . DIR_WS_HTTP_CATALOG;

}

} else {

die('</td></tr></table></td></tr></table><br><br><font color="#ff0000"><b>Error!</b></font><br><br><b>Unable to determine connection method on a link!<br><br>Known methods: NONSSL SSL</b><br><br>');

}

 

if (tep_not_null($parameters)) {

$link .= $page . '?' . tep_output_string($parameters);

$separator = '&';

} else {

$link .= $page;

$separator = '?';

}

 

while ( (substr($link, -1) == '&') || (substr($link, -1) == '?') ) $link = substr($link, 0, -1);

 

// Add the session ID when moving from different HTTP and HTTPS servers, or when SID is defined

if ( ($add_session_id == true) && ($session_started == true) && (SESSION_FORCE_COOKIE_USE == 'False') ) {

if (tep_not_null($SID)) {

$_sid = $SID;

} elseif ( ( ($request_type == 'NONSSL') && ($connection == 'SSL') && (ENABLE_SSL == true) ) || ( ($request_type == 'SSL') && ($connection == 'NONSSL') ) ) {

if (HTTP_COOKIE_DOMAIN != HTTPS_COOKIE_DOMAIN) {

$_sid = tep_session_name() . '=' . tep_session_id();

}

}

}

 

if ( (SEARCH_ENGINE_FRIENDLY_URLS == 'true') && ($search_engine_safe == true) ) {

while (strstr($link, '&&')) $link = str_replace('&&', '&', $link);

 

$link = str_replace('?', '/', $link);

$link = str_replace('&', '/', $link);

$link = str_replace('=', '/', $link);

 

$separator = '?';

}

 

if (isset($_sid)) {

$link .= $separator . $_sid;

}

 

return $link;

}

 

////

// The HTML image wrapper function

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

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

return false;

}

 

// 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="' . tep_output_string($src) . '" border="0" alt="' . tep_output_string($alt) . '"';

 

if (tep_not_null($alt)) {

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

}

 

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_output_string($width) . '" height="' . tep_output_string($height) . '"';

}

 

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

 

$image .= '>';

 

return $image;

}

 

////

// The HTML form submit button wrapper function

// Outputs a button in the selected language

function tep_image_submit($image, $alt = '', $parameters = '') {

global $language;

 

$image_submit = '<input type="image" src="' . tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image) . '" border="0" alt="' . tep_output_string($alt) . '"';

 

if (tep_not_null($alt)) $image_submit .= ' title=" ' . tep_output_string($alt) . ' "';

 

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

 

$image_submit .= '>';

 

return $image_submit;

}

 

////

// Output a function button in the selected language

function tep_image_button($image, $alt = '', $parameters = '') {

global $language;

 

return tep_image(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image, $alt, '', '', $parameters);

}

 

////

// Output a separator either through whitespace, or with an image

function tep_draw_separator($image = 'pixel_black.gif', $width = '100%', $height = '1') {

return tep_image(DIR_WS_IMAGES . $image, '', $width, $height);

}

 

////

// Output a form

function tep_draw_form($name, $action, $method = 'post', $parameters = '') {

$form = '<form name="' . tep_output_string($name) . '" action="' . tep_output_string($action) . '" method="' . tep_output_string($method) . '"';

 

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

 

$form .= '>';

 

return $form;

}

 

////

// Output a form input field

function tep_draw_input_field($name, $value = '', $parameters = '', $type = 'text', $reinsert_value = true) {

$field = '<input type="' . tep_output_string($type) . '" name="' . tep_output_string($name) . '"';

 

if ( (isset($GLOBALS[$name])) && ($reinsert_value == true) ) {

$field .= ' value="' . tep_output_string(stripslashes($GLOBALS[$name])) . '"';

} elseif (tep_not_null($value)) {

$field .= ' value="' . tep_output_string($value) . '"';

}

 

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

 

$field .= '>';

 

return $field;

}

 

////

// Output a form password field

function tep_draw_password_field($name, $value = '', $parameters = 'maxlength="40"') {

return tep_draw_input_field($name, $value, $parameters, 'password', false);

}

 

////

// Output a selection field - alias function for tep_draw_checkbox_field() and tep_draw_radio_field()

function tep_draw_selection_field($name, $type, $value = '', $checked = false, $parameters = '') {

$selection = '<input type="' . tep_output_string($type) . '" name="' . tep_output_string($name) . '"';

 

if (tep_not_null($value)) $selection .= ' value="' . tep_output_string($value) . '"';

 

if ( ($checked == true) || ( isset($GLOBALS[$name]) && is_string($GLOBALS[$name]) && ( ($GLOBALS[$name] == 'on') || (isset($value) && (stripslashes($GLOBALS[$name]) == $value)) ) ) ) {

$selection .= ' CHECKED';

}

 

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

 

$selection .= '>';

 

return $selection;

}

 

////

// Output a form checkbox field

function tep_draw_checkbox_field($name, $value = '', $checked = false, $parameters = '') {

return tep_draw_selection_field($name, 'checkbox', $value, $checked, $parameters);

}

 

////

// Output a form radio field

function tep_draw_radio_field($name, $value = '', $checked = false, $parameters = '') {

return tep_draw_selection_field($name, 'radio', $value, $checked, $parameters);

}

 

////

// Output a form textarea field

function tep_draw_textarea_field($name, $wrap, $width, $height, $text = '', $parameters = '', $reinsert_value = true) {

$field = '<textarea name="' . tep_output_string($name) . '" wrap="' . tep_output_string($wrap) . '" cols="' . tep_output_string($width) . '" rows="' . tep_output_string($height) . '"';

 

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

 

$field .= '>';

 

if ( (isset($GLOBALS[$name])) && ($reinsert_value == true) ) {

$field .= stripslashes($GLOBALS[$name]);

} elseif (tep_not_null($text)) {

$field .= $text;

}

 

$field .= '</textarea>';

 

return $field;

}

 

////

// Output a form hidden field

function tep_draw_hidden_field($name, $value = '', $parameters = '') {

$field = '<input type="hidden" name="' . tep_output_string($name) . '"';

 

if (tep_not_null($value)) {

$field .= ' value="' . tep_output_string($value) . '"';

} elseif (isset($GLOBALS[$name])) {

$field .= ' value="' . tep_output_string(stripslashes($GLOBALS[$name])) . '"';

}

 

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

 

$field .= '>';

 

return $field;

}

 

////

// Hide form elements

function tep_hide_session_id() {

global $session_started, $SID;

 

if (($session_started == true) && tep_not_null($SID)) {

return tep_draw_hidden_field(tep_session_name(), tep_session_id());

}

}

 

////

// Output a form pull down menu

function tep_draw_pull_down_menu($name, $values, $default = '', $parameters = '', $required = false) {

$field = '<select name="' . tep_output_string($name) . '"';

 

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

 

$field .= '>';

 

if (empty($default) && isset($GLOBALS[$name])) $default = stripslashes($GLOBALS[$name]);

 

for ($i=0, $n=sizeof($values); $i<$n; $i++) {

$field .= '<option value="' . tep_output_string($values[$i]['id']) . '"';

if ($default == $values[$i]['id']) {

$field .= ' SELECTED';

}

 

$field .= '>' . tep_output_string($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '</option>';

}

$field .= '</select>';

 

if ($required == true) $field .= TEXT_FIELD_REQUIRED;

 

return $field;

}

 

////

// Creates a pull-down list of countries

function tep_get_country_list($name, $selected = '', $parameters = '') {

$countries_array = array(array('id' => '', 'text' => PULL_DOWN_DEFAULT));

$countries = tep_get_countries();

 

for ($i=0, $n=sizeof($countries); $i<$n; $i++) {

$countries_array[] = array('id' => $countries[$i]['countries_id'], 'text' => $countries[$i]['countries_name']);

}

 

return tep_draw_pull_down_menu($name, $countries_array, $selected, $parameters);

}

?>

Link to comment
Share on other sites

Hi,

 

I used Stephan's code to put a border around my image displays. It works just fine, but I have one problem. The border is the same size around all of my images. I have some that are narrow and the border does not wrap itself around them. All borders are the same size.

 

Is there a way that I can make the borders fit perfectly around different size images?

 

Thanks in advance.

Link to comment
Share on other sites

  • 2 weeks later...

This section of my html_output.php code (see below) is also much different - my version: osCommerce 2.2 Milestone 2, Feb. 2004 download

 

I want this image border feature, but am wondering if there are any other thoughts out there about accomplishing this as the discrepencies in this thread above seem problematic. - Regards B)

 

////

// The HTML image wrapper function

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

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

      return false;

    }

 

// 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="' . tep_output_string($src) . '" border="0" alt="' . tep_output_string($alt) . '"';

 

    if (tep_not_null($alt)) {

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

    }

 

    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;

      }

    }

Link to comment
Share on other sites

You guys are making this WAY to hard, and if the image is a link, the link will turn purple which sucks.

 

What I do is put a little table with a black background around the image.

 

<table width="20" border="0" cellspacing="0" cellpadding="1"><tr><td bgcolor="black">

// Image code goes here

</td></tr></table>

 

The above will put a perfect 1pixel around the image in ALL browsers. Some browsers will not keep your CCS border black, and it will look blue, or purple once it has been clicked.

I need to read the rules more often...

Link to comment
Share on other sites

strange I thought that you werent allowed to mention LOADED on this forum I have had several posts removed just for containing the word LOADED in the content of the post even though one of them was just to ask if the person was using a LOADED version or not, it turned out that they were not using a LOADED version, however the post was removed any way just for having mentioned LOADED in the text one time and it was not even a LOADED question, so maybe you guys can explain how it is that you can freely discuss about a LOADED version without a peep from a moderator on the subject of LOADED and how not to mention LOADED

No longer giving free advice. Please place deposit in meter slot provided.  Individual: [=] SME: [==] Corporation: [===]
If deposit does not fit one of the slots provided then you are asking too much! :P

Is your Osc dated try Phoenix  raising oscommerce from the ashes.

Link to comment
Share on other sites

The easiest (and best) way to do this is with a small piece of .css, thus:

 

In stylesheet.css:

 

.outline {
 border: 1px solid black;
}

 

Then in product_info.php you change from this:

 

tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"')

 

to this:

 

tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5" class="outline"')

 

 

and from this:

 

tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"')

 

to this:

 

tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5" class="outline"')

Link to comment
Share on other sites

Someone had posted the code in a message on the forum sometime ago. It was before they upgraded to this new forum software. I had used it on a store that I was working on. I wish I still had the code.

 

I don't know what code I added to get this effect, so I can't even copy it and share it. When the cursor passes over an image the border highlights. It wraps around each image perfectly. If anyone has any ideas, let me know.

 

Here is a capture of how is looks.

 

screen.gif

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...