Easy dynamic thumbnail generation
 

This isn't a mod for x-cart really. It's a plugin for Smarty: http://www.cerdmann.com/thumb/

See the above link for info on how to use the various paramaters. You'll need to create a images/cache/ directory, or edit the php to point to where you want the thumbnails to be cached.

Save the following code as function.thumb.php and put it in your smarty plugins directory.

Hmm, this looks similiar to Telafirma's mod, have you incorporated this and may we see the output?

I haven't incorporated this with anything yet. You could easily replicate the look of Telafirma's mod with this though. Simply define the main image then use the {thumb} function for the detailed images.

I'm in the process of making something similar only using javascript image swapping instead of opening them in a new window.

Moving this to Program Logic, as it really isn't a completed mod.

I'd be interested to see the final results, please keep us posted

Of course it's a completed mod. The fact it's a smarty plugin instead of a seperate php file shouldn't matter.

Here is my modules/Detailed_Product_Images/product_images.tpl

It needs some formatting, and I've only tested it on 4.1x, but I think it should work with 4.0x. This will just change your detailed images to thumbnails with an image popup when you click on it. The default image is displayed normal size. I'll be refining this as I go on.


*edit*

Here is another modules/Detailed_Product_Images/product_images.tpl
This one uses javascript mouseover image swapping. It ignores the main product image and just uses the detailed images. As in the above example I've only tested in in 4.1x, but it should work on 4.0x. My next task is to preload the detailed images.


*edit2*

Here is the above code, now with image preloading and now using imageid instead of orderby.

*fixed


*edit*

Here is the preloading script for 4.0x, now using imageid instead of orderby:

Cool mod! I'm trying it on 4.0.18 and the problem I run into is that returns the full server path of the image - which of course won't display properlly in the browser. Any ideas?
thanks,
Glen

Try using smarty's replace function to strip off the unneeded part of the image path.

what exactly does this do?

Instead of displaying all the detailed images at once, it displays the first image and a side bar of thumbnails. When you mouseover the thumbnails the main image changes to display the large version of that thumbnail.

For an example, see the product pages at my live site: Alltribes.com.

It uses a different script, but the end result is essentialy the same.

Great mod, i realy like it! hope you or somebody can help me with the
following.

i'm getting the error:
Warning: imagejpeg(): Unable to open '../../skin1/images/cache/b1f12a28db86daf25cc16ec2fd282dac.jpg'
for writing in /Smarty-2.6.9/plugins/function.thumb.php on line 329

path is correct it shows the big image but not the thumbnail.
maybe it's in the wrong directory but it's the third one i put it
in all giving the same error message.
all directory's have chmod 777 also gave the image 777 without luck

thanks Eddie

i'm using X-cart 4.0.18

Sounds like 1 of 2 problems.

1. The skin1/images/cache directory doesn't exist
2. The skin1/images/cache directory doesn't have write permissions.

Probably #2. I forget to do that all the time.

Thanks for the quick reply.

the directory exists and they all have write permissions
i do get the big image in featured products so i know the path and
such are ok.

cheers Eddie

Have you edited the function.thumb.php to point the cache directory somewhere else? If not you need to create the images/cache under your www root. If that doesn't work try it in your store root (i.e. store/images/cache/)

Got it! i had to take your second mod because i had to
replace all the image paths like this


In your last mod with preloader i couldn,t get the mouseoverlink to work wit the

the images and cache directory's are placed under store

but it's working, thanks very much, i like it.

cheers eddie

Hmm, I'll have to look into the preloader on 4.0.18. I'm sure it's just something with the smarty syntax. I need a working version for 4.0.18 anyway to see how fast it is compared to my current mod.

Looks like a nice mod. Anyone has this online on their site and willing to post a link?

Really want to see the result :)

Hey alltribes exactly what I was looking for. I will try this out on the weekend and if i get it running I will let everyone see.

Thanks.

Tahir

Ok, I think I figured out the problem /w 4.0.18. Instead of:
Use:
That got it working for me, just a simple change in syntax. You should be able to use the preloading template now.

Got the preloader working halfway.
i get the images but after a mouseover it chances to the last image
and than gets locked up, i think it's javascript related because if you
view the pagesource everything is there.

Image0 = new Image();
Image0.src = "/samenstellen/images/cache/d_38.gif";
Image0 = new Image();
Image0.src = "/samenstellen/images/cache/d_39.gif";
Image0 = new Image();
Image0.src = "/samenstellen/images/cache/d_40.gif";
Image0 = new Image();
Image0.src = "/samenstellen/images/cache/d_41.gif";
</script>
<tr><td>[img]images/cache/4314547fabe40818438c2e98033ca920.gif[/img]</td></tr>


<tr><td>[img]images/cache/32d2076704113ad58fdf9845fb49ad65.gif[/img]</td></tr>


<tr><td>[img]images/cache/db7523fe115c642349f7b87b65fa632f.gif[/img]</td></tr>


<tr><td>[img]images/cache/db3ae42fa5ac3fb13d35a72f43399ddd.gif[/img]</td></tr>


</table>
</td>

<td>
<img src=/samenstellen/images/cache/d_38.gif name="main_image"/>

it must be in de onmouseover syntax i think.
and there is a differens in paths: new image: samenstellen/images/cache
onmouseover images/cache

funny thing is i dont get a broken image


Cheers Eddie

Alltibes, i wil sent you a pm so you can see what's going on,
my shop is still under a password protected area.

You need to set the orderby field for the detailed images. Otherwise the swapping won't work. I've edited the original code and reposted it. It now uses imageid instead of orderby to preload the images.

That does the trick! i,m very glad with this mod.
A perfect way to show your detailed images in large.

thanks very much. Eddie

to get rid of the border around the thumbnails i changed


in function.thumb.php to this


maybe a bit rude but it does the trick for me

Cheers Eddie

You don't need to change the source, just stick the border=0 in the html parameter.

re-size images
 

It is a wonderful mod / addition to x-cart. Thank you very much.

Is it a way using the same function to re-size the image?

Thanks.

Sure, just change the paramaters. I have it set so the pictures are 100 pixels on their longest side. Read the link in the first post for all the different parameters you can use. I think all you need to do is change longside="100" to longside="400".

I don't know how you'd integrate it with x-cart directly, but you can use it to display the image in the proper dimensions after it's uploaded.

Thank you for your replay.
Thanks.

What I am trying to achieve is to have the original image (and detailed images if there are any) displayed on the product page as a thumbnail that will open in a popup window if they are clicked. Presently we are using the telefirma image mod in xcart version 4.0.18 and are very happy with it, but plan to change to 4.1 when it is stable. Will this plugin work for what we are trying to do? If so any help in incororating it would be appreciated.

perfect squares and a question...
 

in reply to how to make them square... no, dont use photoshop, it will take for ever.

look at http://www.cerdmann.com/thumb/ they have an example, about forcing it to crop on the sides.



==========

second, i have a problem, i am trying to replace the normal product_thumbnail.tpl so that all the pictures will go 'into' the mod, but i get an error here..

{thumb file=$tmbn_url longside="100" link="true"}


Fatal error: Smarty error: thumb: parameter 'file' cannot be empty and must exist in /hsphere/local/home/samor/edecodrive.com/Smarty-2.6.12/Smarty.class.php on line 1095


Can anyone help? i already tryed, double quotes, single quotes, etc... i even tryed entering the name of file, directly... but it still says that error..

Yes, it will do that, the very first product_images.tpl I posted will do that. It uses the main image as well as the detailed product images. The detailed product images are displayed as thumbs and open a window with the full sized image when clicked. It needs work, though. The images pop up in a full sized window. I'll take a look at it.

When i produce my html catalog into the root, the path to the tumbnails
is incorrect " images/cache " instead of " samenstellen/images/cache "

My quick and dirty solution is to copy the " images/cache " to the root as well
but it's not a very nice solution is ther a way out of this?

Cheers Eddie[/b]

Just use the smarty replace function.
*edit* Hmm, that won't work either. I'll look into it. I haven't tested this with html catalog.

That does work exept for the first loading detailed image that becomes a broken
link, as soon as you do a mouseover it finds the detailed images

I'm trying to use the {thumb} plugin to resize the thumbnail images I'm displaying in my recommends.tpl. So far, I haven't been able to figure out the correct variable for the thumbnail image path. Can anyone tell me how this should be formatted for thumbnails: thanks!
Glen

Hi,

How exactly do i edit the product_images.php file

Do I replace the entire file with

or do I keep certain parts of the file

I get this error

Parse error: syntax error, unexpected T_VARIABLE, expecting '(' in /xcart/modules/Detailed_Product_Images/product_images.php on line 54

Thanks

Tahir

You don't edit product_images.php, you edit product_images.tpl.

And yes, you replace the whole thing.

Hi Thanks.

I have done that. Now when I enter a product page it does not show the detailed image only the small thumbnails. I checked the root of the detailed image and it has the wrong path. It should be;

http://www.urbanretro.co.uk/xcart/images/detailed/d_20_01.gif

but instead it comes up as

http://www.urbanretro.co.uk/home/tahir786/public_html/urbanretro-co-uk/xcart/images/detailed/d_20_01.gif

I am not sure if this is a problem with my shared hosting (clook.net) or I need to change something in the file. I have tried everything but still not working

Thanks for any help

Read back earlier in the thread where I explained how to use replace to remove the unneeded part of the server path.

Hi I tried that but still not working do I tried to remove everything starting from http://www.urban...etc and I tried just removing the part I dont want. I think I just keep making a small mistake.

Thanks. Tahir