X-Cart forums

[Pop Electronics]

It got me frustrated: having a nice looking shop with very ugly by browser resized images. I didn't want that anymore and looked for a solution. So I found one.
It resizes thumbnails on the fly and stores them on the server, so it only needs to do this once for every image and not over and over again.

This mod will save you a lot of bandwidth when you have a lot of products and customers.

Also see the difference:

These are actual screenshot from my shop:

BEFORE MOD:

http://www.popelectronics.nl/img/before.jpg http://www.popelectronics.nl/img/before1.jpg

AFTER MOD:

http://www.popelectronics.nl/img/after.jpg http://www.popelectronics.nl/img/after1.jpg

This is how to do it:

First we'll need to download a php script by Joe Lencioni called Smart Image Resizer: http://shiftingpixel.com/2008/03/03/smart-image-resizer/

Once you unpacked the image.php file rename it to imager.php (because there already is such a file in X-Cart, we don't want to overwrite that one).
Upload the file into your X-Cart installation folder.

Next make a folder and name it: imagecache
Make sure this folder is writable (777)

Now we need to change 1 file. Make sure you have a backup.

VERSION 4.1.8-4.1.9

skin1/product_thumbnail.tpl

REPLACE:

{if $config.Appearance.show_thumbnails eq "Y"}<img{if $id ne ''} id="{$id}"{/if} src="{if $tmbn_url}{$tmbn_url}{else}{if $full_url}{$http_location}{else}{$xcart_web_dir}{/if}/image.php?type={$type|default:"T"}&amp;id={$productid}{/if}"{if $image_x ne 0} width="{$image_x}"{/if}{if $image_y ne 0} height="{$image_y}"{/if} alt="{$product|escape}"{if $show_border eq "Y"} class="ProductBorder"{/if} />{/if}

WITH:

{if $config.Appearance.show_thumbnails eq "Y"}<img{if $id ne ''} id="{$id}"{/if} src="/imager.php/product_thumb.jpg?width={$image_x}&amp;image={$tmbn_url}" alt="{$product|escape}"{if $show_border eq "Y"} class="ProductBorder"{/if} />{/if}

VERSION 4.1.11

skin1/product_thumbnail.tpl

REPLACE:

{* $Id: product_thumbnail.tpl,v 1.19.2.1 2007/07/09 05:00:35 svowl Exp $ *}
{if $config.Appearance.show_thumbnails eq "Y" or ($type ne "T" and $type ne "")}<img{if $id ne ''} id="{$id}"{/if} src="{if $tmbn_url}{$tmbn_url}{else}{if $full_url}{$http_location}{else}{$xcart_web_dir}{/if}/image.php?type={$type|default:"T"}&amp;id={$productid}{/if}"{if $image_x ne 0} width="{$image_x}"{/if}{if $image_y ne 0} height="{$image_y}"{/if} style="margin:5px;" alt="{$product|escape}" />{/if}

WITH:

{* $Id: product_thumbnail.tpl,v 1.19.2.1 2007/07/09 05:00:35 svowl Exp $ *}
{if $config.Appearance.show_thumbnails eq "Y" or ($type ne "T" and $type ne "")}<img{if $id ne ''} id="{$id}"{/if} src="{if $tmbn_url}./imager.php/product_thumb.jpg?width={$image_x}&amp;image={$tmbn_url}{else}{if $full_url}{$http_location}{else}{$xcart_web_dir}{/if}/image.php?type={$type|default:"T"}&amp;id={$productid}{/if}"{if $image_x ne 0} width="{$image_x}"{/if}{if $image_y ne 0} height="{$image_y}"{/if} style="margin:5px;" alt="{$product|escape}" />{/if}

Now run: www.[yourxcartsite].com/cleanup.php
(replace this with your own site )

That's it!

Note: this will only work if you have the images on the server (filesystem), not when you have images in the database.

Have fun with it! I hope you enjoy and if so let me know by posting a reply here.

[JWait]

Thank you. This looks like a very simple modification that if it works well will be a real time saver. Unfortunately, I don't have the time to check it out right now but will keep it for future reference.

[Pop Electronics]

Added the same function for 4.1.11 installs, it is a little different. See 1st post.

Also added before and after pictures.

So you see this makes a big improvement on thumbnails and even takes less bandwidth, because when your normal image is let's say 20kb and the browser resizes it it is still 20kb. When you use the resize mod it's likely to be about 3-5kb. Now this doesn't do a lot for 2 customers but on busy sites with hundreds of customers a day this will improve your website speed as well.

[JWait]

What does this do exactly?
Does it eliminate the need to upload thumbnails to the images/T/ folder?

[Pop Electronics]

The way I use my shop is upload just 1 image for every product, the large image (this is besides detailed images, just on the add product page). I always use the top image, leave the 2nd image blank.

What X-Cart does is resize the images you have uploaded in the browser to the width you entered in the options (for my shop it's 145 pixels wide, however most pictures I upload are around 300-400 pixels wide).

What this mod does is resize the image through the GD library on the server and save it into the filesystem, so it doesn't need to resize the picture every single time (just like the template cache you have).
This will save bandwidth, time (because you don't have to resize yourself and upload 2 images) or when you don't upload 2 pictures like me it saves a lot of frustration because of ugly looking browser scaled images.
It saves bandwidth because the browser normally receives the full image (20kb or so) and resizes them according to your specifications. This script resizes them by using the GD library so they still look nice and sharp, then it saves it so you only have a 2-5kb download for each image.

I actually never uploaded images myself, besides doing so through the admin page in the thumbnail entry.

This is how I upload all of my pictures:

http://www.popelectronics.nl/img/screen.jpg

This also works for large images:

http://www.popelectronics.nl/img/screen2.jpg

I never use any other option and never upload more than 1 image. With the mod they all look nice, wherever you put them in your shop.

Have a look at www.popelectronics.nl so you can see for yourself.

[xplorer]

Resizing with GD has one pitfall - thumbnails look too soft. This is why the upcoming version 4.2 not just resizes images with GD, but also applies "unsharp mask" filter on thumbnails that makes the thumbs clean and sharp.

Note: I've just looked through the Smart Image Resizer (the link posted above) code and noticed that it applies a "sharpness" filter on images too (it uses imageconvolution() function that is available starting from php 5.1.0).

[ADDISON]

xplorer:

1. Maybe I am not happy by the results of your default values for the unsharp mask effect. Can we control the values the "unsharp mask" filter effect inside the script (Amount, Radius, Threshold)?

2. Did you use Unsharp Mask for PHP (http://vikjavev.no/computing/ump.php)?

[xtestedx]

Hi love how easy this is to use! I applied it to my detailed images!!
I have 4.11 heres the code if anyone wants it!

{* $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="./imager.php/product_thumb.jpg?width=300&amp;image={$images[image].tmbn_url}" alt="{$images[image].alt|escape}" />

{else}
<img src="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}

Need a bit of help applying it to the normal images though?? I don't kow about the whole {include= product thumb... ) dealo?

[Vetrivel]

Nice..mod

Originally Posted by xtestedx

Hi love how easy this is to use! I applied it to my detailed images!!
I have 4.11 heres the code if anyone wants it!

{* $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="./imager.php/product_thumb.jpg?width=300&amp;image={$images[image].tmbn_url}" alt="{$images[image].alt|escape}" />

{else}
<img src="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}

Need a bit of help applying it to the normal images though?? I don't kow about the whole {include= product thumb... ) dealo?

[inboxnews]

This works great with everything except Download Expander. Download Expander calls the following:

<a href="product.php?productid={$product.productid}">{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product}</a>&nbsp; </td>

Unfortunately, the above code displays no image , however, everything else seems to work just fine. Thanks for the post!