Help Aligning Additional Images On Product Info Page

twilight62 · October 23, 2007

Hey,

I installed the additional images module successfully and can't work out how to make the additional images appear on the right hand side of the product info page, directly underneath the main product image.

If someone could point me to the file/code etc, most appreciated in advance.

Matt

Ps. Attached image shows part of the product info page with a "center" aligned additional image.

October 23, 2007

It would be a lot easier if I could see the source code for this page. Would you mind linking an example of a product with 2 images so that we can see what is going on?

twilight62 · October 24, 2007

http://www.covercollecting.com/product_inf...;products_id=86

That is a link to a product with 2 images.

Many thanks again in advance

Matt

Ps. Source code of this page is as follows:

(The additional Image Module Code Changes Are Commented with "// BOF: Additional Images" at the start and "// EOF: Additional Images" at the end)

<?php
/*
 $Id: product_info.php,v 1.97 2003/07/01 14:34:54 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

 require('includes/application_top.php');

 require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_INFO);

 // BOF: Additional Images
 if (empty($_GET['pID'])) { $_GET['pID'] = $_GET['products_id']; }

if (ADDIMAGES_MENU_LOCATION == 'product_info') { 
 include(DIR_WS_LANGUAGES . $language . '/' . FILENAME_POPUP_ADD_IMAGE);

// $navigation->remove_current_page();

 if (!empty($_GET['imagesID'])) {
$products_query = tep_db_query( "SELECT ai.products_id, ai.images_description, ai.thumb_images, ai.medium_images, ai.popup_images, p.products_image, p.products_image_med, p.products_image_pop, p.products_image_description FROM " . TABLE_ADDITIONAL_IMAGES . " ai, " . TABLE_PRODUCTS . " p WHERE ai.products_id=p.products_id and ai.additional_images_id = '".(int)$_GET['imagesID']."'");
$selected_image = tep_db_fetch_array($products_query);
 } elseif (!empty($_GET['pID'])) {
$products_query = tep_db_query( "SELECT products_id, products_image, products_image_med, products_image_pop, products_image_description FROM " . TABLE_PRODUCTS . " WHERE products_id = '".(int)$_GET['pID']."'");
$selected_image = tep_db_fetch_array($products_query);
 }

 $imagemenu = new displayonpageimagemenu ( $selected_image['products_id'] );

 // calculate menu size in pixels
 $extra_window_width = 24;  // space for web browser
 $extra_window_height = 86;  // space for web browser

 if (ADDIMAGES_POPUP_SHOW_ON_POPUP == 'true' && ($imagemenu->addimages_count > 1)) {
list ($menu_width, $menu_height) = $imagemenu->boxsize();
if (ADDIMAGES_POPUP_TABLE_LOCATION == 'sides') { 
  $extra_window_width += $menu_width; 
  if ($imagemenu->maximageheight < $menu_height) { $imagemenu->maximageheight = $menu_height; }
}
if (ADDIMAGES_POPUP_TABLE_LOCATION == 'above' || ADDIMAGES_POPUP_TABLE_LOCATION == 'below') { 
  $extra_window_height += $menu_height; 
  if ($imagemenu->maximagewidth < $menu_width) { $imagemenu->maximagewidth = $menu_width; }
}
 }
 //$imagemenu->maximageheight += 22; // add space for large image description text height
}
// EOF: Additional Images

 $product_check_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
 $product_check = tep_db_fetch_array($product_check_query);
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script language="javascript"><!--
function popupWindow(url) {
 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
izable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,le
ft=150')
}
//--></script>
<?php // BOF: Additional Images ?>
<script language="javascript"><!--
function showImage(img,width,height) {
 if (document.getElementById("mainimage")) {
document.getElementById("mainimage").src = img;
document.getElementById("mainimage").height = height;
document.getElementById("mainimage").width = width;
 }
}
//--></script>
<?php // EOF: Additional Images ?>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->

<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">
 <tr>
<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
</table></td>
<!-- body_text //-->
<td width="100%" valign="top"><?php echo tep_draw_form('cart_quantity', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params(array('action')) . 'action=add_product')); ?><table border="0" width="100%" cellspacing="0" cellpadding="0">
<?php
 if ($product_check['total'] < 1) {
?>
  <tr>
	<td><?php new infoBox(array(array('text' => TEXT_PRODUCT_NOT_FOUND))); ?></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
	  <tr class="infoBoxContents">
		<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
		  <tr>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			<td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></td>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
		  </tr>
		</table></td>
	  </tr>
	</table></td>
  </tr>
<?php
 } else {
// BOF: Additional Images: Added: , p.products_image_med, p.products_image_pop, p.products_image_description
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, p.products_image_med, p.products_image_pop, p.products_image_description, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
// EOF: Additional Images	
$product_info = tep_db_fetch_array($product_info_query);

tep_db_query("update " . TABLE_PRODUCTS_DESCRIPTION . " set products_viewed = products_viewed+1 where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and language_id = '" . (int)$languages_id . "'");

if ($new_price = tep_get_products_special_price($product_info['products_id'])) {
  $products_price = '<s>' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</s> <span class="productSpecialPrice">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';
} else {
  $products_price = $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id']));
}

if (tep_not_null($product_info['products_model'])) {
  $products_name = $product_info['products_name'] . '<br><span class="main2">[' . $product_info['products_model'] . ']</span>';
} else {
  $products_name = $product_info['products_name'];
}
// BOF: Additional Images
$additional_images = new displayimages ( $product_info['products_id'] );
// EOF: Additional Images
?>
  <tr>
	<td><table border="0" width="100%" cellspacing="0" cellpadding="0">
	  <tr>
		<td class="pageHeading" valign="top"><?php echo $products_name; ?></td>
		<td class="pageHeading" align="right" valign="top"><?php echo $products_price; ?></td>
	  </tr>
	</table></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td class="imgborder_productpage_main">
<?php
// BOF: Additional Images	ADDED to if statement:  && ADDIMAGES_GROUP_WITH_PARENT == 'false'
if (tep_not_null($product_info['products_image']) && ADDIMAGES_GROUP_WITH_PARENT == 'false') {
// EOF: Additional Images	
?>
	  <table border="0" cellspacing="0" cellpadding="2" align="right">
		<tr>
		  <td align="center" class="imgborder_productpage_main">
		  <?php
// BOF: Additional Images
if (ADDIMAGES_MENU_LOCATION == 'product_info') { 

if (ADDIMAGES_POPUP_TABLE_LOCATION=='above' && ADDIMAGES_POPUP_SHOW_ON_POPUP=='true' && ($imagemenu->addimages_count > 1)) {
  echo '<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td valign="middle" align="right" class="pageHeading">' . TEXT_MENU_TITLE . '</td></tr><tr><td class="imgborder_productpage" valign="middle" align="right">' . $imagemenu->altgroupoutput() . '</td></tr></table>';
}

echo '<table border="0" cellspacing="0" cellpadding="0"><tr>';
if (ADDIMAGES_POPUP_TABLE_LOCATION=='sides' && (ADDIMAGES_POPUP_TABLE_ALIGNMENT=='left' || ADDIMAGES_POPUP_TABLE_ALIGNMENT=='center') && ADDIMAGES_POPUP_SHOW_ON_POPUP=='true' && ($imagemenu->addimages_count > 1)) {
  echo '<td valign="middle" align="right" class="imgborder_productpage">' . TEXT_MENU_TITLE . '<br>' . $imagemenu->groupoutput() . '</td>';
}

echo '<td class="imgborder_productpage" valign="middle" align="right" width="100%">';
if (!empty($_GET['imagesID'])) {
  echo tep_image(DIR_WS_IMAGES . (!empty($selected_image['popup_images'])?$selected_image['popup_images']:(!empty($selected_image['medium_images'])?$selected_image['medium_images']:(!empty($selected_image['thumb_images'])?$selected_image['thumb_images']:''))), $selected_image['images_description'], (ADDIMAGES_POPUP_RESTRICT_IMAGE_SIZE=='true'?POPUP_IMAGE_WIDTH:''), (ADDIMAGES_POPUP_RESTRICT_IMAGE_SIZE=='true'?POPUP_IMAGE_HEIGHT:''), 'id="mainimage"') . (!empty($selected_image['images_description'])?$selected_image['images_description']:'');
} elseif (!empty($_GET['pID'])) {
  echo tep_image(DIR_WS_IMAGES . (!empty($selected_image['products_image_pop'])?$selected_image['products_image_pop']:(!empty($selected_image['products_image_med'])?$selected_image['products_image_med']:(!empty($selected_image['products_image'])?$selected_image['products_image']:''))), $selected_image['products_image_description'], (ADDIMAGES_POPUP_RESTRICT_IMAGE_SIZE=='true'?POPUP_IMAGE_WIDTH:''), (ADDIMAGES_POPUP_RESTRICT_IMAGE_SIZE=='true'?POPUP_IMAGE_HEIGHT:''), 'id="mainimage"') . (!empty($selected_image['products_image_description'])?$selected_image['products_image_description']:'');
}
echo '</td>';

if (ADDIMAGES_POPUP_TABLE_LOCATION=='sides' && ADDIMAGES_POPUP_TABLE_ALIGNMENT=='right' && ADDIMAGES_POPUP_SHOW_ON_POPUP=='true' && ($imagemenu->addimages_count > 1)) {
  echo '<td valign="middle" align="center" class="imgborder_productpage">' . TEXT_MENU_TITLE . '<br>' . $imagemenu->groupoutput() . '</td>';
}
if (!empty($imagemenu->maximagewidth) && !empty($imagemenu->maximageheight)) { echo '<td>' . tep_draw_separator('pixel_trans.gif', '4', $imagemenu->maximageheight) . '</td>'; }
echo '</tr></table>';

if (ADDIMAGES_POPUP_TABLE_LOCATION=='below' && ADDIMAGES_POPUP_SHOW_ON_POPUP=='true' && ($imagemenu->addimages_count > 1)) {
  echo '<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td valign="middle" align="right" class="imgborder_productpage">' . TEXT_MENU_TITLE . '</td></tr><tr><td class="imgborder_productpage" valign="middle" align="center">' . $imagemenu->altgroupoutput() . '</td></tr></table>';
}

} else {
?><script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_ADD_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . (!empty($product_info['products_image_med'])?$product_info['products_image_med']:(!empty($product_info['products_image_pop'])?$product_info['products_image_pop']:(!empty($product_info['products_image'])?$product_info['products_image']:''))), addslashes($product_info['products_name']), (ADDIMAGES_RESTRICT_PARENT=='true'?DISPLAY_IMAGE_WIDTH:''), (ADDIMAGES_RESTRICT_PARENT=='true'?DISPLAY_IMAGE_HEIGHT:''), 'hspace="5" vspace="5"') . '<br>' . (!empty($product_info['products_image_description'])?$product_info['products_image_description']:TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . (!empty($product_info['products_image_pop'])?$product_info['products_image_pop']:$product_info['products_image'])) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . (!empty($product_info['products_image_med'])?$product_info['products_image_med']:(!empty($product_info['products_image_pop'])?$product_info['products_image_pop']:(!empty($product_info['products_image'])?$product_info['products_image']:''))), $product_info['products_name'], (ADDIMAGES_RESTRICT_PARENT=='true'?DISPLAY_IMAGE_WIDTH:''), (ADDIMAGES_RESTRICT_PARENT=='true'?DISPLAY_IMAGE_HEIGHT:''), 'hspace="5" vspace="5"') . '<br>' . (!empty($product_info['products_image_description'])?$product_info['products_image_description']:TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>
</noscript><?php
}
// EOF: Additional Images
?>
		  </td>
		</tr>
	  </table>
<?php
}
// BOF: Additional Images
if (ADDIMAGES_TABLE_LOCATION=='above' && ADDIMAGES_SHOW_ON_PRODUCT_INFO=='true' && ADDIMAGES_MENU_LOCATION == 'popup') {
  echo $additional_images->altgroupoutput();
} else if (ADDIMAGES_TABLE_LOCATION=='sides' && ADDIMAGES_SHOW_ON_PRODUCT_INFO=='true' && ADDIMAGES_MENU_LOCATION == 'popup') {
  echo $additional_images->groupoutput();
}
// EOF: Additional Images
?>
	  <p><?php echo stripslashes($product_info['products_description']); ?></p>
<?php
$products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");
$products_attributes = tep_db_fetch_array($products_attributes_query);
if ($products_attributes['total'] > 0) {
?>
	  <table border="0" cellspacing="0" cellpadding="2">
		<tr>
		  <td class="main" colspan="2"><?php echo TEXT_PRODUCT_OPTIONS; ?></td>
		</tr>
<?php
  $products_options_name_query = tep_db_query("select distinct popt.products_options_id, popt.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
  while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
	$products_options_array = array();
	$products_options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_name, pa.options_values_price, pa.price_prefix from " . TABLE_PRODUCTS_ATTRIBUTES . " pa, " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pa.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pa.options_id = '" . (int)$products_options_name['products_options_id'] . "' and pa.options_values_id = pov.products_options_values_id and pov.language_id = '" . (int)$languages_id . "'");
	while ($products_options = tep_db_fetch_array($products_options_query)) {
	  $products_options_array[] = array('id' => $products_options['products_options_values_id'], 'text' => $products_options['products_options_values_name']);
	  if ($products_options['options_values_price'] != '0') {
		$products_options_array[sizeof($products_options_array)-1]['text'] .= ' (' . $products_options['price_prefix'] . $currencies->display_price($products_options['options_values_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) .') ';
	  }
	}

	if (isset($cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']])) {
	  $selected_attribute = $cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']];
	} else {
	  $selected_attribute = false;
	}
?>
		<tr>
		  <td class="main"><?php echo $products_options_name['products_options_name'] . ':'; ?></td>
		  <td class="main"><?php echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute); ?></td>
		</tr>
<?php
  }
?>
	  </table>
<?php
}
?>
	</td>
  </tr>
  <tr>
	<td><?php
// BOF: Additional Images
if (ADDIMAGES_TABLE_LOCATION=='below' && ADDIMAGES_SHOW_ON_PRODUCT_INFO=='true' && ADDIMAGES_MENU_LOCATION == 'popup') {
  echo $additional_images->altgroupoutput();
}
// EOF: Additional Images
?></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>

 <tr>
	<td class="main"></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
<?php
}

if (tep_not_null($product_info['products_url'])) {
?>
  <tr>
	<td class="main"><?php echo sprintf(TEXT_MORE_INFORMATION, tep_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($product_info['products_url']), 'NONSSL', true, false)); ?></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
<?php
}

if ($product_info['products_date_available'] > date('Y-m-d H:i:s')) {
?>
  <tr>
	<td align="center" class="smallText"><?php echo sprintf(TEXT_DATE_AVAILABLE, tep_date_long($product_info['products_date_available'])); ?></td>
  </tr>
<?php
} else {
?>
  <tr>
	<td align="center" class="smallText"><?php echo sprintf(TEXT_DATE_ADDED, tep_date_long($product_info['products_date_added'])); ?></td>
  </tr>
<?php
}
?>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
	  <tr class="infoBoxContents">
		<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
		  <tr>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			<td class="main"></td>
			<td class="main" align="right"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_image_submit('button_in_cart.gif', IMAGE_BUTTON_IN_CART); ?></td>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
		  </tr>
		</table></td>
	  </tr>
	</table></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td>
<?php
if ((USE_CACHE == 'true') && empty($SID)) {
  echo tep_cache_also_purchased(3600);
} else {
  include(DIR_WS_MODULES . FILENAME_ALSO_PURCHASED_PRODUCTS);
}
?>
	</td>
  </tr>
</table></form></td>
<!-- body_text_eof //-->
<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
</table></td>
 </tr>
</table>
<!-- body_eof //-->

<!-- footer //-->
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
<!-- footer_eof //-->
<br>
</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

twilight62 · October 24, 2007

Ah don't worry I found the solution!

Go to your admin control panel:

Configuration > Additional Images > Product Info: Table alignment > Edit > (left:center:right)

Help Aligning Additional Images On Product Info Page

Recommended Posts

twilight62

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

twilight62

Link to comment

Share on other sites

twilight62

Link to comment

Share on other sites

Archived

Browse

Activity