Resize thumbnails with GD
 

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:

WITH:

VERSION 4.1.11

skin1/product_thumbnail.tpl

REPLACE:


WITH:

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.

Re: Resize thumbnails with GD
 

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.

Re: Resize thumbnails with GD
 

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.

Re: Resize thumbnails with GD
 

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

Re: Resize thumbnails with GD
 

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.

Re: Resize thumbnails with GD
 

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).

Re: Resize thumbnails with GD
 

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)?

Re: Resize thumbnails with GD
 

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!

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

Re: Resize thumbnails with GD
 

Nice..mod

Re: Resize thumbnails with GD
 

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


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

Re: Resize thumbnails with GD
 

Hi,
This is because there is no $tmbn_url
Try to add it .

Re: Resize thumbnails with GD
 

Yes, you can change the values by editing "include/lib/phpunsharmask.php" file. Search for the following string:


Yes.

Re: Resize thumbnails with GD
 

xplorer: is it a way to configure those values in the Admin? A form inside the Mod?

Re: Resize thumbnails with GD
 

No. The only way to change these parameters is editing the file I mentioned

Re: Resize thumbnails with GD
 

Maybe someone will customize the script and have this feature available for an easy configuration.

Re: Resize thumbnails with GD
 

I seem to be having trouble with this, I have performed the steps several times but it just doesn't seem to be working, not sure what else to try, I have tried placing the imagcache folder in different places but to no avail.

The instructions are so simple but it just doesn't seem to work.

Re: Resize thumbnails with GD
 

You might try checking your spelling. It is imagecache, not imagcache.

Re: Resize thumbnails with GD
 

Nice spot but I only spelt it wrong here.

Re: Resize thumbnails with GD
 

OK, so I found the problem

{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={$tmb n_url}" alt="{$product|escape}"{if $show_border eq "Y"} class="ProductBorder"{/if} />{/if}

This line had a / before imager.php so read src="/imager.php/product_thumb.jpg, I removed the leading / and all is working fine now.

Great mod, will really help me as I have 1000s of products.

Re: Resize thumbnails with GD
 

cool mod, I think its working, I saw a bunch of small files in my imagecache folder.

Couple questions for all you smart people in here:
Is there a way to just get rid of the option of a "product image" since the product thumbnail upload does everthing and there is no need for a thumb and a product upload?

This one I really need:
Can we cap the max image size either height or width so ALL the product images would be same height? (or width) that shows up in the main product details page? I'm afraid some of these providers are going to upload huge images. (too large on screen) Need to have it re-make them to a uniform size. (I think 4.2 can do this, can we do it in 4.1.11 somehow?

This would be huge for me, very much appreciate your thoughts on this.

Re: Resize thumbnails with GD
 

Did you take a look at phpThumb() http://phpthumb.sourceforge.net/ ?

In my opinion is far better than Smart Image Resizer. With a lot of options in the URL like Unsharp Mask, Clip, Quality, etc.

Did anyone use it with X-Cart?

Could you please give me more idea about Thumb Generators in PHP (Image Resizers)? I am trying to find one better the phpThumb.

Re: Resize thumbnails with GD
 

Thx for that, I will have to look into how/if you use it with xcart, since I'm not too slick in that area I don't expect much. But let me know if you figure it out, I'd be very interested to hear what you came up with.

Thx

Re: Resize thumbnails with GD
 

It looks like its squishing it into a square thumb, anyone know how to have it size and crop to a square? I was looking at the file imager.php and it mentions some stuff about cropping, but I don't know how to implement it.

It has this:

// Resizing and cropping a JPEG into a square:
// <img src="/image.php/image-name.jpg?width=100&amp;height=100&amp;cropratio=1: 1&amp;image=/path/to/image.jpg" alt="Don't forget your alt text" />


Help?
thx

Re: Resize thumbnails with GD
 

width=100&amp;height=100&amp;cropratio=1: 1

try to play witht he crop ration along with the width and height.

maybe width=100&amp;height=150&amp;cropratio=1: 1.5

just a guess tho.

Re: Resize thumbnails with GD
 

Thanks Ashley,

The problem is I can't find that code in the php or the thumbnails.tpl, (its above the "code starts here" part) the guy from post #1 figured out how to integrate this php script into xcart. Waaaay beyond me right now. His code is in post #1, the php is attached if you want to look at it.

Thanks

Re: Resize thumbnails with GD
 

Ok this code

// Resizing and cropping a JPEG into a square:
// <img src="/image.php/image-name.jpg?width=100&amp;height=100&amp;cropratio=1: 1&amp;image=/path/to/image.jpg" alt="Don't forget your alt text" />


Is a comment and has nothing to do with the actual implementation of the mod.

Just follow the instructions in the first post and you should be ok.

Re: Resize thumbnails with GD
 

I know, I already have the mod working, but it sizes/squishes instead of sizing/cropping to a square image, I was just wondering if someone out there might want to implement the cropping aspect of this php script. I am too green at this point.

thx

Re: Resize thumbnails with GD
 

try this instread in product_thumbnail

{* $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;cropratio=1 :1&amp;image={$tmbn_url}{else}{if $full_url}{$http_location}{else}{$xcart_web_dir}{/if}/image.php?type={$type|default:"T"}&amp;id={$produc tid}{/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}

Re: Resize thumbnails with GD
 

This works! No more squished thumbnails! (for those of us who don't want to photoshop every dang ol' product.)

Alright Ashley!:D/

Re: Resize thumbnails with GD
 

cool... glad I could help.

Re: Resize thumbnails with GD
 

Hi again,

The thumbnails are not lining up very well, some are higher or lower than others on the page. Is there anything in the above code from Ashley that might affect this? I can't make out what its doing in the code. Would the problem for sure be in the product_thumbnails.tpl or might it be somewhere else? I have that mod where there are 5 products per row but it was working fine before.

Thanks for any suggestions.

Re: Resize thumbnails with GD
 

yep, its definately in the product_thumnails code. Anyone know what part tells it how to line up on the page?

{* $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}&cropratio=1 :1&image={$tmbn_url}{else}{if

$full_url}{$http_location}{else}{$xcart_web_dir}{/if}/image.php?type={$type|default:"T"}&id={$produc tid}{/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}
{* xCartMod.com - Dynamic Images *}
{if $active_modules.Detailed_Product_Images ne "" and $config.Detailed_Product_Images.det_image_thumbnai ls eq "Y"}<script type="text/javascript"

language="JavaScript 1.2"><!--var orig_image_src='{if $tmbn_url}{$tmbn_url}{else}{if

$full_url}{$http_location}{else}{$xcart_web_dir}{/if}/image.php?type={$type|default:"T"}&id={$productid} '{/if};--></script>{/if}
{* xCartMod.com - Dynamic Images *}

{* Image sizer with GD and mod for non thumb squish by ashley *}

Re: Resize thumbnails with GD
 

I take out this {*style="margin:5px;*} and it moves some into line. Seems like its different every time. sometimes the 1st thumb is lower and the rest are fine and I comment this out and then the first 2 are lower than the last 3.


Could it be my 5 in a row mod in products.tpl?

Re: Resize thumbnails with GD
 

I'll check it out in a bit. off to the gym :)

Re: Resize thumbnails with GD
 

NEVER MIND! I think I got it where it works. Some had 2 lines of product name (but it was really happening on some that didn't) But the config I have now is working.

BESIDES, we may have a bigger problem afoot. Google images probably won't index these images as well. I've emailed Joe, the writer of this php image sizing script. I'm quoting him here, hope that's ok:

"That's a great question--I hadn't even really taken that into consideration. Unfortunately, I believe it will hinder google images from finding your images. You could probably get around this by using mod_rewrite. I've been meaning to do some mod_rewrite stuff with SIR for a while but haven't gotten around to it, so if you whip something up, please send it to me."

ok, so anyone know mod_rewright stuff? Doesn't that do it on the fly like xcart script?
Will creating static HTML pages solve this google image indexing problem with GD image sizer?

yeah, intense huh?

Re: Resize thumbnails with GD
 

glad you got it working.

Re: Resize thumbnails with GD
 

Ashley, are you familiar with this script? Could you tell me how to have it resize the main product image as well? Like anything over 500x500 would get cropped and sized? (its doing the thumbnail great, must be a way to do the main image too huh?)

Thanks!

Re: Resize thumbnails with GD
 

Is it possible to have this automatically resize detailed pics as well? How would that be done if possible?

Re: Resize thumbnails with GD
 

Hi ,
I used this resizer and works fine in my old site.
But now we have migrated to the new server and found that this one is not working .No image is displayed .
How to solve this.
New server have lastest version of php and gd library is enabled too.
Please advice me soon.
Thanks

Re: Resize thumbnails with GD
 

Still this mod didn't works.
Any body had this problem.I am just getting the image name instead of image.
FYI:
PHP version-PHP Version 5.2.9-0.dotdeb.1
GD Library

GD Support -enabled
GD Version -bundled (2.0.34 compatible)
FreeType Support -enabled
FreeType Linkage -with freetype
FreeType Version -2.3.7
T1Lib Support-enabled
GIF Read Support -enabled
GIF Create Support -enabled
JPG Support-enabled
PNG Support -enabled
WBMP Support -enabled
XPM Support -enabled
XBM Support -enabled

I think this two is the major requirement right.?
Please guide me.