X-Cart forums

[Acquamarina]

Just changing the layout of product descriptions and need to change the size of the detailed image when it is set to appear on the product page (not as a pop up). It would be best to do it without actually re-sizing each individually, but rather just make the browser do it.

Is it possible to have the template set the size for the image or do I have to re-size and re-upload all the images individually? Some older ones are too large and create horizontal scrolling. Looked in product_images.tpl but did not see it. Maybe I just don't know what to look for.

Thanks in advance.

[ARW VISIONS]

you can do ti with CSS most likely.

[Shamun]

Should be able to control it if you put the img class with a max width of what you want. That will (should) autoscale height as well.

Example from this page:

<img border="0" title="eXpert" src="new_xcart_images/ranks/NX5.gif"/>

The above has no max size defined. If it was bigger, it would appear bigger. The below is constrained to 30 pixels and will scale the height to still be a 1:1 ratio.

<img border="0" title="eXpert" src="new_xcart_images/ranks/NX5.gif" width="30px"/>

[Acquamarina]

Thanks, guys. This is the template:

{* $Id: product_images.tpl,v 1.16.2.1 2006/05/18 08:02:40 max Exp $ *}
{if $images ne ""}
{capture name=dialog}
<center>
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}
<img src="{$images[image].tmbn_url}" alt="{$images[image].alt|escape}" style="padding-bottom: 10px;" />
{else}
<img src="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" alt="{$images[image].alt|escape}" style="padding-bottom: 10px;" />
{/if}
<br />
{/if}
{/section}
</center>
{/capture}
{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra='width="100%"'}
{/if}

Gosh, a bit lost here. One thing I can tell is that the width of 100% refers to the dialog box, but not sure how to force the image into a width of say 480 pixels, leaving the height alone to maintain ratio. It's easy to do i html, not sure how to get it on this template, though. It looks like it could be done on the line:

style="padding-bottom: 10px;"

But I am not good at css. Is this the place to add the width?

Thanks again!

[ARW VISIONS]

this is a tempalte file, the CSS file is skin1.css

[Shamun]

<img src="{$images[image].tmbn_url}" alt="{$images[image].alt|escape}" style="padding-bottom: 10px;" width="PUTYOURSIZEHERE"/>

Is the thumbail for max width.

<img src="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" alt="{$images[image].alt|escape}" style="padding-bottom: 10px;" width="PUTYOURSIZEHERE" />

Is the full size image for max width.

[Acquamarina]

Got it! Thanks! Now I have to try it. Most of my visitors do not like the zoom feature from x-cart (I don't like it either), I did a poll for image display.

Is there a way to create a link to the full size image? I need to use a 1600x1200 full size view linked to the 400 max width image (the old fashioned way), opening on another tab or window. That seemed to be what they liked the most. Selling old stuff you really have to show minute details.

I did embed that as html in some of the item descriptions but because the large image file has to be compressed that method really slows down the page load.

Is that possible?

[Acquamarina]

Hi,
Just tried that and unfortunately, it did not work. It is probably done in css, the width doesn't load when looking at the page source.

From the source:

<tr><td class="DialogBox" valign="top"><center>
<img src="http://......com/images/D/image-file.jpg" alt="Image Alt" style="padding-bottom: 10px;" />

From skin1.css

}
TD.DialogBox {
TEXT-ALIGN: left;
PADDING: 10px;

From the module template:

{capture name=dialog}

The problem in changing the style/class is that I do not know where else in the site it might be used. Is there a way to find out or maybe it is better to create a new one, maybe call it IM.DialogBox and determine the size of the image there.

Not sure how to call it in the detailed images template. I don't know css other than a faint idea of how it works.

Thank you for any suggestion you might have.

[Shamun]

<a href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" target="_blank"> <img src="{$images[image].tmbn_url}" alt="{$images[image].alt|escape}" style="padding-bottom: 10px;" width="PUTYOURSIZEHERE"/> </a>

Replace that with your thumbnail.
It will keep the thumbnailed image, but when clicked it should open the detailed in a new window.

[Acquamarina]

Tal, that works great! You rock!

I had forgotten that x-cart uses the full size image as a thumbnail - no wonder it did not work. The changes I made were on the second line of code, so it did not affect the thumbnail which is what I wanted to change in this case.

Thank you so very much! I had to stop adding products until I could figure this out. Now I can go back to work.

This community and the giving nature of it's members are the best things about x-cart. Thanks again!