How to center the detailed product image?

hiphoptools · #1 02-02-2006, 11:41 AM

Hello,

What do I have to edit in order to have all of my detailed products centered on the page?

Thank you.

balinor · #2 02-02-2006, 11:50 AM

They should be by default...at least they are in the 4.0 branch. Have a look at /modules/Detailed_Product_Images/product_images.tpl

hiphoptools · #3 02-02-2006, 12:00 PM

Thanks Balinor.

If you checkout

http://www.hiphoptools.com/shop/customer/product.php?productid=16133&cat=248&page=1

I want to center the product image.

I looked at /modules/Detailed_Product_Images/product_images.tpl

{* $Id: product_images.tpl,v 1.10 2003/08/11 10:45:10 svowl Exp $ *}
<HTML><TITLE>Detailed Image</TITLE><BODY TOPMARGIN=0 RIGHTMARGIN=0 LEFTMARGIN=0 BOTTOMMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
{if $images ne ""}
{capture name=dialog}
<div align=center>
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}
[img]{$images[image].tmbn_url}[/img]
{else}
[img]{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}[/img]
{/if}

{/if}
{/section}
</div>
{/capture}
{if $smarty.capture.dialog ne ""}
{include file="dialog_blank.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}
{/if}
{/if}
</BODY></HTML>

It looks to me like it is centered. [/url]

balinor · #4 02-02-2006, 12:03 PM

Ah, didn't realize you had a custom template. What you will want to do is add align="center" to the table cell that contains that image in your customer/main/product.tpl template.

hiphoptools · #5 02-02-2006, 12:21 PM

Thanks again Balinor. Should have told you it was a custom template. Sorry about that.

Below is the code from customer/main/product.tpl template

To me it still looks like it is centered.

{* $Id: product.tpl,v 1.78.2.2 2003/12/16 12:13:32 svowl Exp $ *}
{literal}
<SCRIPT language=JavaScript1.2>

</SCRIPT>
{/literal}

{include file="check_product_options_js.tpl"}
{if $product.product_type eq "C"}
{include file="modules/Product_Configurator/pconf_customer_product.tpl"}
{else}
{capture name=dialog}
{include file="location.tpl"}
<table border=0 width=100%>
<tr>
<td valign=top align=center rowspan=3 width=0> </td>
<td valign=top>{if $active_modules.Detailed_Product_Images ne "" && $images}<a href="javascript: productimagedetail({$product.productid})">{/if}{include
file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x
image_y=$product.image_y product=$product.product}{if $active_modules.Detailed_Product_Images
ne ""}</a>{/if}

{*{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x
image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url}*}
{if $active_modules.Detailed_Product_Images ne "" && $images}<a href="javascript: productimagedetail({$product.productid})">Detailed
Image</a>{/if}</td>
<td align=right valign=top width=60>{if $product.list_price gt 0 and $product.price
lt $product.list_price}
<table border=0 width=60>
<tr>
<td width=55 height=56 class="SaveMoneyLabel" background="{$ImagesDir}/save_money.gif" align=center valign=middle>

{math equation="lprice-price" price=$product.price lprice=$product.list_price
format="%d" assign=discount} ${ $discount } </td>
</tr>
</table>
{/if} </td>
</tr>
<form name=orderform method=post action="cart.php?mode=add">
<tr>
<td valign=top> <span class=> {if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{ /if}
</span>

<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr>
<td colspan=2><font class=ProductDetailsTitle>{$lng.lbl_details}</font></td>
</tr>
<tr>
<td class=Line height="1" colspan=2>[img]{$ImagesDir}/spacer.gif[/img]</td>
</tr>
<tr>
<td colspan=2></td>
</tr>
{if $config.Appearance.show_in_stock eq "Y" and $config.General.unlimited_products
ne "Y" and $product.distribution eq ""}
<tr>
<td width=30%>{$lng.lbl_quantity}</td>
<td nowrap>{if $product.avail gt 0}{$product.avail}{else}{$lng.txt_no}{/if}
{$lng.txt_items_available}</td>
</tr>
{/if} {if $product.weight ne "0.00"} {/if} {if $active_modules.Extra_Fields
ne ""} {include file="modules/Extra_Fields/product.tpl"} {/if} {if $active_modules.Subscriptions
ne "" and $subscription} {include file="modules/Subscriptions/subscription_info.tpl"}
{else}
<tr>
<td class=ProductPriceConverting>{$lng.lbl_price}:</td>
<td> {if $product.price ne 0} <font class=ProductDetailsTitle>{include
file="currency.tpl" value=$product.price}</font><font class=MarketPrice>
{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.price}</font>{if
$config.Taxes.use_vat eq "Y" and $product.vat gt "0"}, {$lng.lbl_including_vat}
{$product.vat}%{/if} {else}
<input type=text size=7 name=price>
{/if} </td>
</tr>
{/if}
</table>

<table border=0 width=100% cellpadding=0 cellspacing=0>
<tr>
<td colspan=2> <font class=ProductDetailsTitle>{$lng.lbl_options}</font>
</td>
</tr>
<tr>
<td class=Line height="1" colspan=2>[img]{$ImagesDir}/spacer.gif[/img]</td>
</tr>
<tr>
<td colspan=2></td>
</tr>
{if $active_modules.Product_Options ne ""} { include file="modules/Product_Options/customer_options.tpl"}
{/if}
<tr>
<td height=25 width=30%>{$lng.lbl_quantity}{if $product.min_amount
gt 1}

<FONT class=ProductDetailsTitle>{$lng.txt_need_min_amoun t} {$product.min_amount}
{$lng.lbl_items}</FONT>{/if}</td>
<td> {if $config.General.unlimited_products eq "N" and ($product.avail
le 0 or $product.avail lt $product.min_amount)} {$lng.txt_out_of_stock}
{else} {if $config.General.unlimited_products eq "Y"} {math equation="x+1"
assign="mq" x=$config.Appearance.max_select_quantity} {else} {math
equation="x/y" x=$config.Appearance.max_select_quantity y=$product.min_amount
assign="tmp"} {if $tmp<2} {assign var="minamount" value=$product.min_amount}
{else} {assign var="minamount" value=0} {/if} {math equation="min(maxquantity+minamount,
productquantity)+1" assign="mq" maxquantity=$config.Appearance.max_select_quantity
minamount=$product.min_amount productquantity=$product.avail} {/if}
{if $product.distribution eq ""}
<select name=amount>
{if $product.min_amount le 1}
{assign var="start_quantity" value=1}
{else}
{assign var="start_quantity" value=$product.min_amount}
{/if}
{section name=quantity loop=$mq start=$start_quantity}
<option value="{%quantity.index%}" {if $smarty.get.quantity eq %quantity.index%}selected{/if}>{%quantity.index%}</option>
{/section}
</select>
{else} <font class=ProductDetailsTitle>1</font>
<input type=hidden name=amount value=1>
{$lng.txt_product_downloadable} {/if} {/if} </td>
</tr>
<tr>
<td colspan=2>
<input type=hidden name=mode value=add>
{include file="customer/main/product_prices.tpl"} {if $config.General.unlimited_products
eq "Y" or ($product.avail gt 0 and $product.avail ge $product.min_amount)}
{if $js_enabled}

{if $smarty.get.pconf ne ""}
<INPUT type=hidden name="slot" value="{$smarty.get.slot}">
<INPUT type=hidden name="addproductid" value="{$product.productid}">
<a href="javascript:if (FormValidation()) {ldelim}document.orderform.productid.value='{$smar ty.get.pconf}';document.orderform.action='pconf.ph p';document.orderform.submit(){rdelim}">{include
file="buttons/pconf_add_to_configuration.tpl" style="button"}</a>

{/if} {if $product.forsale ne "B"} <a href="javascript:if (FormValidation()) document.orderform.submit()">{include
file="buttons/add_to_cart.tpl" style="button"}</a>
{if $login ne "" and $active_modules.Wishlist ne ""} {include file="customer/add2wl.tpl"}
{/if} {else} {$lng.txt_pconf_product_is_bundled} {/if} {else} {include
file="submit_wo_js.tpl" value=$lng.lbl_add_to_cart} {/if} {/if}

<input type=image src="{$ImagesDir}/null.gif" width=10 height=10 border=0 align=top class="no">

</td>
</tr>
</table>
</td>
<td align=right valign=top width=60> </td>
</tr>
<input type=hidden name=productid value="{$product.productid}">
<input type=hidden name=cat value="{$smarty.get.cat|escape:"html"}">
<input type=hidden name=page value="{$smarty.get.page|escape:"html"}">
</form>
</table>
{/capture}
{include file="dialog.tpl" title=$product.product content=$smarty.capture.dialog extra="width=100%"}
{/if}
{*
{if $active_modules.Detailed_Product_Images ne ""}

{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}*}
{if $active_modules.Upselling_Products ne ""}

{include file="modules/Upselling_Products/related_products.tpl" }
{/if}
{if $active_modules.Recommended_Products ne ""}

{include file="modules/Recommended_Products/recommends.tpl" }
{/if}
{if $active_modules.Customer_Reviews ne ""}

{include file="modules/Customer_Reviews/vote_reviews.tpl" }
{/if}

balinor · #6 02-02-2006, 12:25 PM

Nope...need to adjust this part. Replace this:

Code:

<td valign=top>{if $active_modules.Detailed_Product_Images ne "" && $images}

with this:

Code:

<td valign="top" align="center">{if $active_modules.Detailed_Product_Images ne "" && $images}

hiphoptools · #7 02-02-2006, 12:41 PM

Balinor.

It works perfectly. Thank you so much for your expertise.



	X-Cart forums © 2001-2020