X-Cart forums - First detailed image instead of thumbnail

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - First detailed image instead of thumbnail (https://forum.x-cart.com/showthread.php?t=15579)

First detailed image instead of thumbnail

Ever wanted to replace the thumbnail on the product page with the first image from your detailed images and then have your detailed images section start with the second detailed image?

Well here is how to do it :)

This code is for the 4.0 branch (the version for 3.4 and 3.5 is very similar)

You need to modify two files:
customer/product.tpl
modules/detailed_product_images/product_images.tpl

You will also need to make a new file:
modules/detailed_product_images/product_images_one.tpl

In product.tpl
find this:

Code:

<TD valign="top" align="left" rowspan="2" width="100">

{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 id="product_thumbnail"}

</TD>

replace with this:

Code:

{***----ORIGINAL THUMBNAIL----

<TD valign="top" align="left" rowspan="2" width="100">

{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 id="product_thumbnail"}

</TD>

----ORIGINAL THUMBNAIL----***}



{***--FIRST DETAILED IMAGE--***}

<td valign="top" align="left" rowspan="2" width="100">

{if $active_modules.Detailed_Product_Images ne ""}







{include file="modules/Detailed_Product_Images/product_images_one.tpl" }

{/if}

</td>

{***--FIRST DETAILED IMAGE--***}

Then in product_images.tpl
find this:

Code:

<img src="{$images[image].tmbn_url}">

Replace with this:

Code:

{***----ORIGINAL CODE-------

<img src="{$images[image].tmbn_url}" alt="{$images[image].alt|escape}">

--------ORIGINAL CODE***}



{***--Startwithsecondimage---***}

{if $images[image].tmbn_url ne $images[0].tmbn_url }

<img src="{$images[image].tmbn_url}" alt="{$images[image].alt|escape}">

{/if}

{***--Startwithsecondimage---***}

Make a new file in modules/detailed_product_images called product_images_one.tpl

Put this code in it:

Code:

{* $Id: product_images_one.tpl,v 1.7.2.2 2005/07/29 10:43:25 CCS Exp $ *}

{if $images ne ""}

<div align=left>

{section name=image}

{if $images[image].avail eq "Y"}

{if $images[image].tmbn_url}

<img src="{$images[image].tmbn_url}" alt="{$images[image].alt|escape}">

{else}

<img src="{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}" alt="{$images[image].alt|escape}">

{/if}









{/if}

{/section}

</div>

{/if}

That's it :)

hi light speed um could u give us an example of the mod or give us a link to your site that shows an example of this mod that would be great :D

Don't really need an example, it does just what it says :) Nice one...moving it to Custom Mods.

Quote:

Originally Posted by slade

hi light speed um could u give us an example of the mod or give us a link to your site that shows an example of this mod that would be great :D

Yeah it's pretty straight forward :)

I have boomers cart-lab tabbed mod installed also and you can see my little mod works fine with that :)

oh cool nice mod :) sorry for my dumbness :oops:

Hey,

Really cool mod and was looking for a long time and you saved my time a lot..

cheers !!!!!

Works great! Does anyone know how this could be modified so the "detailed images" box only shows up if there are more than one detailed image? I have lots of products with only one image, and I now have one detailed image on top (nice) but a big old empty dialog box at the bottom. Looks like there is something missing.

Thanks again for the great mod!

Quote:

Originally Posted by mortickles

There is probably a way to set an if statement at the detail dialog insert but I am too swamped to look into it. Maybe somebody else can take a stab at it?

wrap it with

Code:

{if $images[1].image}



detailed include code



{/if}

Thanks, Shan, worked like a charm! For the information of others following this thread, I wrapped Shan's code around the following line in customer/main/product.tpl:

{include file="modules/Detailed_Product_Images/product_images.tpl" }

Now here's another question for Shan or any other expert. If I have no image at all, how do I get the "no image" graphic to appear? Right now it's blank (where the first detailed image goes, which is where the thumbnail used to be).

I really appreciate the help!

try

Code:

{if $images eq ""}



no image code here



{/if}

Hmmm, I can't seem to get this last bit (the code to show the "no image" image) to work. I've tried inserting it in a couple of places, now the "no image" image always shows up (if there already is a detailed image, now it shows up along with the "no image" one).

Am I trying it in the wrong place? I'm assuming it should somehow go in the modules/detailed_product_images called product_images_one.tpl somewhere. (Lightspeed posted this code in the opening message of this thread.)

Again, thanks for your help! I'm awed by the quick and kind responses in this forum.

sorry, i put

$image

instead of

$images

i updated my other post

Works great now. Thanks for the great mod and the great help getting it up and running!

If in your product.tpl you want to show the thumbnail when there is not detailed images, use:

Code:

{if $active_modules.Detailed_Product_Images ne "" && $images ne ""}



{include file="modules/Detailed_Product_Images/product_images_one.tpl" }{else}{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 id="product_thumbnail"}{/if}

In my detailed images it still showed the first detailed image in the detailed section below, after using it as the thumbnail.

Looking at the code of product_image.tpl I assumed this was because images were in the database.

I modified the code to start the loop iteration after the first image to fix the problem.

Code:

{section name=image loop=$images start=1}

This is a great mod, but ? is there a way to also have the first detailed image show up as the thumbnail image in the catagory section also? Basically wanting to use the detailed image as the product image. Just curious if this can be also done?

Thanks

Quote:

Originally Posted by airman

I am very interested in this as well. I use the code from Lightspeed and Shan, and it works well, but it would be nice to integrate this into the thumbnail view in the category display.

love the code, but looking to do this...
we want the 2nd detailed image to popup in a seperate window when detailed images are clicked. some of our detailed images will be rather wide and will throw off the format of our xcart window.

thanks

Quote:

Originally Posted by airman

Then you would have oversized images being reduced in size by the browser. The thumbnail pages would load slowly. Not a good browsing experience for your customers.

Quote:

Originally Posted by Audiolines

There are pop up mods here. Just do a search and then look at my code and put it in the pop up mod.

Hi,

I'm trying to apply this mod:

Quote:

<TD valign="top" align="left" rowspan="2" width="100">
{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 id="product_thumbnail"}
</TD>

I find:

Code:

</TD></TR></TABLE>




{/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 id="product_thumbnail"}

</TD>

Is this the correct place to modify and is it customer/main/product.tpl?

Thank you.

Re: Question on mod

Quote:

Originally Posted by lannyg

Hi,

I'm trying to apply this mod:

Quote:

I find:

Code:

</TD></TR></TABLE>




{/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 id="product_thumbnail"}

</TD>

Is this the correct place to modify and is it customer/main/product.tpl?

Thank you.

In 4.0.18 the raw code in customer/main/product.tpl looks like this:

Code:

<TD valign="top" align="left" rowspan="2" width="100">

{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 id="product_thumbnail"}

</TD>

What version are you trying to work on?

I'm using 4.0.18. Shall I post the entire code here? I can not locate the part you modified. I find the product.tpl in customer/main, is this the correct tpl?

Quote:

Originally Posted by lannyg

I'm using 4.0.18. Shall I post the entire code here? I can not locate the part you modified. I find the product.tpl in customer/main, is this the correct tpl?

Here is the complete customer/main/product.tpl file from 4.0.18 with the part separated out that needs replacing with code I provided in the instructions on page one of this thread.

Code:

{* $Id: product.tpl,v 1.96.2.25 2005/11/17 11:40:11 max Exp $ *}

{if $active_modules.Special_Offers}

{include file="modules/Special_Offers/customer/product_offers_short_list.tpl" product=$product}

{/if}

{include file="form_validation_js.tpl"}

{if $product.product_type eq "C" && $active_modules.Product_Configurator}

{include file="modules/Product_Configurator/pconf_customer_product.tpl"}

{else}

{capture name=dialog}

<TABLE border="0" width="100%">

<FORM name="orderform" method="post" action="cart.php?mode=add" onsubmit="javascript: return FormValidation();">

<TR>





---------------------------------------------------------



<TD valign="top" align="left" rowspan="2" width="100">

{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 id="product_thumbnail"}

</TD>





------------------------------------------------------------





<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><SPAN id="product_avail_txt">{if $product.avail gt 0}{$product.avail}</SPAN>{else}{$lng.txt_no}{/if} {$lng.txt_items_available}</TD></TR>

{/if}

{if $product.weight ne "0.00"}<TR><TD width="30%">{$lng.lbl_weight}</TD><TD nowrap><SPAN id="product_weight">{$product.weight}</SPAN> {$config.General.weight_symbol}</TD></TR>{/if}

{if $active_modules.Extra_Fields ne ""}

{include file="modules/Extra_Fields/product.tpl"}

{/if}

{if $active_modules.Feature_Comparison ne ""}

{include file="modules/Feature_Comparison/product.tpl"}

{/if}

{if $active_modules.Subscriptions ne "" and $subscription}

{include file="modules/Subscriptions/subscription_info.tpl"}

{else}

<TR><TD class="ProductPriceConverting" valign="top">{$lng.lbl_price}:</TD>

<TD valign="top">

{if $product.taxed_price ne 0 || $variants ne ''}

<FONT class="ProductDetailsTitle"><SPAN id="product_price">{include file="currency.tpl" value=$product.taxed_price}</SPAN></FONT><FONT class="MarketPrice"> <SPAN id="product_alt_price">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price}</SPAN></FONT>

{if $product.taxes}

{include file="customer/main/taxed_price.tpl" taxes=$product.taxes}{/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_amount} {$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) and $variants eq ''}

<SCRIPT type="text/javascript" language="JavaScript 1.2">

var min_avail = 1;

var avail = 0;

var product_avail = 0;

</SCRIPT>

{$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=1}

{/if}

{math equation="min(maxquantity+minamount, productquantity+1)" assign="mq" maxquantity=$config.Appearance.max_select_quantity minamount=$minamount productquantity=$product.avail}

{/if}

{if $product.distribution eq "" and !($active_modules.Subscriptions ne "" and $subscription)}

{if $product.min_amount le 1}

{assign var="start_quantity" value=1}

{else}

{assign var="start_quantity" value=$product.min_amount}

{/if}

<SCRIPT type="text/javascript" language="JavaScript 1.2">

var min_avail = {$start_quantity|default:1};

var avail = {$mq|default:1}-1;

var product_avail = {$product.avail|default:"0"};

</SCRIPT>

<SELECT id="product_avail" name="amount"{if $active_modules.Product_Options ne '' && $product_options ne ''} onchange="check_options();"{/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}

<SCRIPT type="text/javascript" language="JavaScript 1.2">

var min_avail = 1;

var avail = 1;

var product_avail = 1;

</SCRIPT>

<FONT class="ProductDetailsTitle">1</FONT><INPUT type="hidden" name="amount" value="1"> {if $product.distribution ne ""}{$lng.txt_product_downloadable}{/if}

{/if}

{/if}

</TD></TR>

<TR><TD colspan="2">

<INPUT type="hidden" name="mode" value="add">

{if $variants eq ''}

{include file="customer/main/product_prices.tpl"}

{/if}

{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}">

{include file="buttons/button.tpl" button_title=$lng.lbl_pconf_add_to_configuration style="button" href="javascript:if (FormValidation()) `$ldelim`document.orderform.productid.value='`$smarty.get.pconf`';document.orderform.action='pconf.php';document.orderform.submit()`$rdelim`"}








{/if}

{if $product.forsale ne "B"}

{include file="buttons/add_to_cart.tpl" style="button" href="javascript: if(FormValidation()) document.orderform.submit();"}



{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}

{if $active_modules.Feature_Comparison ne ""}

{include file="modules/Feature_Comparison/product_buttons.tpl"}

{/if}








</TD>

</TR></TABLE>

</TD>

<TD align="right" valign="top" width="60">

{if $product.taxed_price gt 0 and $product.list_price gt 0 and $product.taxed_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="100-(price/lprice)*100" price=$product.taxed_price lprice=$product.list_price format="%3.0f" assign=discount}

<SPAN id="save_percent">{ $discount }</SPAN>%

</TD></TR></TABLE>{/if}

</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.producttitle content=$smarty.capture.dialog extra="width=100%"}

{/if}








{include file="customer/main/send_to_friend.tpl" }

{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}

{if $active_modules.Product_Options ne '' && $product_options ne ''}

<SCRIPT type="text/javascript" language="JavaScript 1.2">

check_options();

</SCRIPT>

{/if}

I think I have another mod against this file is why it's not the same. I'll do some back tracking. Thank you for your help :)

Quote:

Originally Posted by lannyg

I think I have another mod against this file is why it's not the same. I'll do some back tracking. Thank you for your help :)

No problem :D

Good luck getting what you need accomplished!