X-Cart forums - Easy dynamic thumbnail generation

Page 2 of 4

Show 40 posts from this thread on one page

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

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

- - Easy dynamic thumbnail generation (https://forum.x-cart.com/showthread.php?t=22308)

Alltribes

07-10-2006 12:48 PM

It's probably the quotes that is messing it up. Try it with " quotes.

tahirfayyaz

07-11-2006 07:59 AM

I have tried all the following possibilities and still it does not work and the image location is always wrong

Quote:

{* $Id: product_images.tpl,v 1.12 2004/05/28 12:21:05 max Exp $ *}
{if $images ne ""}
{capture name=dialog}
<table width=100%>
<tr>
<td>
<table>
{section name=image loop=$images}
{if $images[image].image_path|replace:"server path to remove":"http://www.urbanretro.co.uk/home/tahir786/public_html/urbanretro-co-uk/xcart/images/detailed"}
<tr><td>{thumb file=`$images[image].image_path` longside="100" link="false"}</td></tr>

{/if}
{/section}
</table>
</td>
<td>
<img src={$images[0].image_path|replace:"server path to remove":"http://www.urbanretro.co.uk/home/tahir786/public_html/urbanretro-co-uk/xcart/images/detailed"} name="main_image"/>
</td>
</tr>
</table>
{/capture}
{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra='width="100%"'}
{/if}

Quote:

{* $Id: product_images.tpl,v 1.12 2004/05/28 12:21:05 max Exp $ *}
{if $images ne ""}
{capture name=dialog}
<table width=100%>
<tr>
<td>
<table>
{section name=image loop=$images}
{if $images[image].image_path|replace:"server path to remove":"http://www.urbanretro.co.uk/home/tahir786/public_html/urbanretro-co-uk/"}
<tr><td>{thumb file=`$images[image].image_path` longside="100" link="false"}</td></tr>

{/if}
{/section}
</table>
</td>
<td>
<img src={$images[0].image_path|replace:"server path to remove":"http://www.urbanretro.co.uk/home/tahir786/public_html/urbanretro-co-uk/"} name="main_image"/>
</td>
</tr>
</table>
{/capture}
{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra='width="100%"'}
{/if}

Quote:

{* $Id: product_images.tpl,v 1.12 2004/05/28 12:21:05 max Exp $ *}
{if $images ne ""}
{capture name=dialog}
<table width=100%>
<tr>
<td>
<table>
{section name=image loop=$images}
{if $images[image].image_path|replace:"server path to remove":"home/tahir786/public_html/urbanretro-co-uk/"}
<tr><td>{thumb file=`$images[image].image_path` longside="100" link="false"}</td></tr>

{/if}
{/section}
</table>
</td>
<td>
<img src={$images[0].image_path|replace:"server path to remove":"home/tahir786/public_html/urbanretro-co-uk/"} name="main_image"/>
</td>
</tr>
</table>
{/capture}
{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra='width="100%"'}
{/if}

I have even tried all 3 of the above with single quotes instead but it still does not work. The image source just keeps coming out wrong with that added home/tahir786/public_html/urbanretro-co-uk/ in the middle that is not needed. Is there any other way apart from the above to say where the img src is in the code.

Thanks.

Tahir

Alltribes

07-11-2006 11:15 AM

Replace "server path to remove" with the part you want to cut out. The second set of quotes after the : should be empty.

JWait

07-12-2006 03:39 AM

Re: Easy dynamic thumbnail generation

Quote:

Originally Posted by Alltribes

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.

Where would I edit the code? I presently have my images in the "files" directory and there is already a "cache" directory inside it.

The first image is the default (no image available). Whenever I click on the thumbnail on the product page, I now get a 404 error in the popup window. I used the first example of your product_images.tpl in xcart version 4.1.2.

Also, how would I get just a "stack" of the detail image thumbnails with the main product thumbnail at the top of the stack... like this;

Product Thumbnail

Detail Thumbnail

Detail Thumbnail

... and have the popup window open on the detail photo of which ever is clicked.

Alltribes

07-12-2006 06:16 AM

Re: Easy dynamic thumbnail generation

Quote:

Originally Posted by JWait

Where would I edit the code? I presently have my images in the "files" directory and there is already a "cache" directory inside it.

The cache directory is defined here:

Code:

### ц°bergebene Parameter auswerten und verifizieren

   if (empty($params['cache'])) $_CONFIG['cache'] = 'images/cache/';

Below this you can aslo set certain paramaters to default to the settings you want, so you don't have to set them in the templates themselves.

Quote:

Originally Posted by JWait

The first image is the default (no image available). Whenever I click on the thumbnail on the product page, I now get a 404 error in the popup window. I used the first example of your product_images.tpl in xcart version 4.1.2.

Also, how would I get just a "stack" of the detail image thumbnails with the main product thumbnail at the top of the stack... like this;

Product Thumbnail

Detail Thumbnail

Detail Thumbnail

... and have the popup window open on the detail photo of which ever is clicked.

In my first product_images.tpl, the first image is not a detailed product image, it's the product's main image, you probably don't have that set if it's not loading.

Getting a stack of thumbs like you want is possible, but you'd need to rewrite the product_images.tpl.

It would be easiest to remove the link the the main image entirely and just use the default product_images.tpl. Just replace the image links with the {thumb} function.[/code]

tahirfayyaz

07-12-2006 06:45 AM

Hey Alltribes. Thanks so much I got it all working now. My first mod and its a beauty.

Sorry for being a pain but I need to know 1 last thing, something simple. How do you set the border to 0. I have put border="0" in the product_images.tpl in every place possible but the border does not go. Where exactly do I put border="0" to get rid of the border?

Thanks a million

Tahir

Alltribes

07-12-2006 07:32 AM

To get rid of the border put the border="0" in the html parameter. Here's an example:

Code:

{thumb file="images/visuals/rallyewm02/Rallye142.jpg" width="150" link="false" html='border="0"'}

tahirfayyaz

07-12-2006 10:04 AM

great thanks

tahirfayyaz

07-13-2006 01:57 AM

I have got this all working now. Thanks for all the help alltribes. When my site is launched I will place a link so people can see it in action

qinwubi

07-19-2006 08:03 PM

that's COOL

thanks Alltribes. I'm in debt.
To others, here's a live site showing the effect, using exactly the technology as explained by Alltribes. I made some cosmetic modifications though. Still under development, only 2 dummy products. Hopefully it helps.

qinwubi

07-19-2006 08:04 PM

forgot to cite the site

http://www.nexteve.com/home.php

Eddie Hillegers

07-20-2006 12:14 AM

That's a very nice idear, no product image, just the detailed images.
i think i'll do the same if you don't mind.

Cheers Eddie

Alltribes

07-20-2006 08:38 AM

Quote:

Originally Posted by Eddie Hillegers

That's a very nice idear, no product image, just the detailed images.
i think i'll do the same if you don't mind.

Cheers Eddie

That's why I posted it. Enjoy.

mrkenzie

08-09-2006 03:46 PM

For a Windows server, I had to nake the following change in product_images.tpl:
Find:

Code:

Image{$images[image].imageid}.src = "{$images[image].image_path}";

and replace with:

Code:

Image{$images[image].imageid}.src = "{$images[image].image_path|replace:"\\":"/"}";

There may be an easier or better way, but that was the only way I knew how to do it.

PhilJ

10-06-2006 04:12 AM

Re: Easy dynamic thumbnail generation

Is it me or has some of the code in the examples on page 1 missing? Perhaps due to the forum upgrade... I can't seem to get the image swapping method working. Can anyone post their working code?

I notice that the plugin has just been updated with frame and overlay support :)

mrkenzie

10-06-2006 03:39 PM

Re: Easy dynamic thumbnail generation

The new forum messed up the image tags in the code.

where you see [img] blah blah blah [img]

you need to make a valid tag (i.e. <img src="" />

PhilJ

10-07-2006 07:22 AM

Re: Easy dynamic thumbnail generation

Ahh ok, many thanks.

mitash

10-09-2006 06:30 AM

Re: Easy dynamic thumbnail generation

Hello this is a great mod and I have been looking for it for a long time...

I am not sure what I am doing wrong....

I installed the plugin
I copied the file....

I have installed the store here...

http://www.purebaby.net.au/mitash/

Code:

{if $images ne ""}

{capture name=dialog} 

<table width=100%>

<tr>

<td>

<table>

{section name=image loop=$images}

{if $images[image].image_path|replace:"server path to remove":"home/pur6105/public_html/mitash/"}

<tr><td>{thumb file=`$images[image].image_path` longside="100" link="false"}</td></tr>





{/if}

{/section}

</table>

</td>

<td>

<img src={$images[0].image_path|replace:"server path to remove":"home/pur6105/public_html/mitash/" } name="main_image"/>

</td>

</tr>

</table>

{/capture}

{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra='width="100%"'}

{/if}

I want to be able to achieve something like this...

http://www.ebonist.nl/samenstellen/product.php?productid=16138&cat=248&page=1

I have added multiple images here...
However it is not working...

http://www.purebaby.net.au/mitash/product.php?productid=16219&cat=262&page=2

Please help!

Thanks in advance
Ash

Alltribes

10-09-2006 10:24 AM

Re: Easy dynamic thumbnail generation

Code:

|replace:"server path to remove":"home/pur6105/public_html/mitash/"

Your problem is right there.

It should look like this:

Code:

|replace:"home/pur6105/public_html/mitash/":""

Just fix all the places that appears and it should work.

mitash

10-09-2006 02:34 PM

Re: Easy dynamic thumbnail generation

Thanks heaps for your reply...

I have modifed it to....

Code:

|replace:"home/pur6105/public_html/mitash/":""

However it still looks the same....

Here is my file....

Code:

{if $images ne ""}

{capture name=dialog} 

<table width=100%>

<tr>

<td>

<table>

{section name=image loop=$images}

{if $images[image].image_path|replace:"home/pur6105/public_html/mitash/":""}

<tr><td>{thumb file=`$images[image].image_path` longside="100" link="false"}</td></tr>





{/if}

{/section}

</table>

</td>

<td>

<img src={$images[0].image_path|replace:"home/pur6105/public_html/mitash/":""} name="main_image"/>

</td>

</tr>

</table>

{/capture}

{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra='width="100%"'}

{/if}

http://www.purebaby.net.au/mitash/pr...cat=262&page=2

Am not sure if I missed any step...
Thanks for helping with this...

Alltribes

10-10-2006 05:13 AM

Re: Easy dynamic thumbnail generation

Hmm, the link doesn't work.

In any case, from looking at the site I think perhaps the mitash/ doesn't need removed. Try this:

Code:

|replace:"home/pur6105/public_html/":""

mitash

10-10-2006 05:43 AM

Re: Easy dynamic thumbnail generation

Hi Thanks for your reply...

Here's the link...
http://www.purebaby.net.au/mitash/product.php?productid=16219&cat=262&page=2

Everything is installed under purebaby.net.au/mitash/ so i think we might need mitash there...
What do you think..?

I can give u my username and password if you can have a quick look for me pls...

Alltribes

10-10-2006 07:30 AM

Re: Easy dynamic thumbnail generation

Hmm, I think I know the problem. You're using the code for 4.0 on a 4.1 store.

The image urls are different between the two versions. The |replace sections are for the 4.0 version only. Remove them and it should work.

mitash

10-11-2006 05:57 AM

Re: Easy dynamic thumbnail generation

Hi I am using 4.1.3 version

I tried what you suggested however still not working...?

Thanks
Ash

Alltribes

10-11-2006 06:50 AM

Re: Easy dynamic thumbnail generation

Maybe the forum move messed up more than the <img> tags. Here's my current code for product_images.tpl on my 4.1.3 store:

*fixed

Code:

{if $images ne ""}

{capture name=dialog} 

<script language="JavaScript" type="text/javascript">

{section name=image loop=$images}

{if {$images[image].image_path}

Image{$images[image].imageid} = new Image();

Image{$images[image].imageid}.src = "{$images[image].image_path}";

{/if}

{/section}

</script>

<table width="100%">

<tr>

<td>

<table>

{section name=image loop=$images}

{if {$images[image].image_path neq ""}

<tr>

<td>

<a href="#" onmouseover="document.main_image.src=Image{$images[image].imageid}.src;">{thumb file=`$images[image].image_path` longside="100" link="false" html="alt='`$product.product`' border='0'"}</a>

</td>

</tr>

{/if}

{/section}

</table>

</td>

<td>

<img src="{$images[0].image_path}" name="main_image" alt="{$product.product}" />

</td>

</tr>

</table>

{/capture}

{include file="dialog.tpl" content=$smarty.capture.dialog extra='width="100%"'}

{/if}

This uses image preloading unlike the template you're trying to use. Make sure you disable the detailed product images popup.

I'll try and find the time to sort out the code on the first page and make sure it all works still. I've got some other goodies to add to this mod as well (first detailed image as the thumbnail!). I've already updated the 4.1x preloading code with the above code.

mitash

10-11-2006 02:38 PM

Re: Easy dynamic thumbnail generation

Thanks heaps for your help and for your patience with this mod....

I have implemented your code...
It is working however, it shows very big thumbnails.....

http://www.purebaby.net.au/mitash/product.php?productid=16219&cat=262&page=2

Not sure what's going on there....

Also, instead of displaying the imgaes and thumb nails in the detailed images section I am hoping to have the positioning of the imgages and thumbnails like this...

http://www.ebonist.nl/samenstellen/product.php?productid=16138&cat=248&page=1

Thank you muchly!

Ash

Alltribes

10-12-2006 07:15 AM

Re: Easy dynamic thumbnail generation

Oops, my bad. I moved the thumbnailing code to my product_thumbnail.tpl since I'm using the first detailed image for all my thumbnails. The good news is it IS getting the correct image paths, hehe.

I've edited my previous code (and the 4.1x preloading script on page 1) so the thumbnail code is in the product_images.tpl again.

mitash

10-12-2006 07:40 AM

Re: Easy dynamic thumbnail generation

wow...

Thats fantastic...
It's working now... thatnks you so much for your help! =)

Only one thing I would like to display images like this...
at the moment they are coming up in detailed images section/position......

I want to do the swap thing where the first image is.... like this page....

http://www.ebonist.nl/samenstellen/product.php?productid=16138&cat=248&page=1

mitash

10-12-2006 08:10 AM

Re: Easy dynamic thumbnail generation

Here's the working URL

http://www.purebaby.net.au/mitash/product.php?productid=16219&cat=253&page=1

Just want to fix the positioning now....

Thanks
Ash

Alltribes

10-12-2006 10:25 AM

Re: Easy dynamic thumbnail generation

Quote:

Originally Posted by mitash

That should be easy enough to do. Simply replace this (in product.tpl):

Code:

{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" type="P"}

With this:

Code:

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}

<p />

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

{/if}

Also remove

Code:

{capture name=dialog}

and

Code:

{/capture}

{include file="dialog.tpl" content=$smarty.capture.dialog extra='width="100%"'}

from product_images.tpl.

DanUK

10-24-2006 12:35 AM

Re: Easy dynamic thumbnail generation

Hi, got a question about this mod. Do the product exports show the path to the original image i.e. the non cached image path? If so, how would you go about getting a list of cached image paths for various exports?

I'm guessing that whatever code is responsible for displaying the image on the product page can be reproduced to do this.

Thanks

Dan

Alltribes

10-24-2006 06:38 AM

Re: Easy dynamic thumbnail generation

This mod doesn't make any changes to the exports. The paths of the created thumbnails are not stored in the database, so will not show up in exports. The file name for the thumbs is a md5 hash of the file name and the various parameters you set.

Theoreticaly you could use the code from the plugin that generates the md5 and modify it to store the thumbnail path in the database so it can be exported. Personaly I'm working on loading the path of the first detailed image into the thubmnail table.

Though loading the actual path to the generated thumbnail into that table would be a better solution, it's beyond my current abilities.

pinklinoleum

10-27-2006 11:52 PM

Re: Easy dynamic thumbnail generation

Hey Alltribes.... i was wondering if i could get your help on this one. i am still struggling to get it to work on 4.X

You can see what i have here:
[url] http://www.motonekoparts.com/product.php?productid=16165&cat=67&page=1

the images show up... but no swapping happens

I have modified the pluggin it in a couple places so the image would load instead of [img]
...was this neccessary? i didn't read any other posts about modifying the plugin, but i couldn't any images to load otherwise.

here is my product_images.tpl

Code:

{* $Id: product_images.tpl,v 1.12 2004/05/28 12:21:05 max Exp $ *}

{if $images ne ""}

{capture name=dialog} 

<script language="JavaScript" type="text/javascript">

{section name=image loop=$images}

{if {$images[image].image_path}

Image{$images[image].imageid} = new Image();

Image{$images[image].imageid}.src = "{$images[image].image_path|replace:"home/content/m/o/t/motonekoparts/html/":""}";



{/if}

{/section}

</script>

<table width="100%">

<tr>

<td>

<table>

{section name=image loop=$images}

{if {$images[image].image_path}

<tr>

<td>

{thumb file=`$images[image].image_path` longside="100" link="false" html="alt='`$product.product` '"}

</td>

</tr>

{/if}

{/section}

</table>

</td>

<td>

<img src="{$images[0].image_path|replace:"/home/content/m/o/t/motonekoparts/html":""}"> 

</td>

</tr>

</table>

{/capture}

{include file="dialog.tpl" content=$smarty.capture.dialog extra='width="100%"'}

{/if}

any suggestions? Thanks for sharing this great feature with everyone.

-michelle

Alltribes

10-31-2006 06:54 AM

Re: Easy dynamic thumbnail generation

You've got a couple errors.

You have an extra { on line 18:

Code:

{if {$images[image].image_path}

You may also want to change that to

Code:

{if $images[image].image_path neq ""}

in case the image_path shows up, but is blank.

After line 20 you removed

Code:

<a href="#" onmouseover="document.main_image.src=Image{$images[image].imageid}.src;">

That's your problem, right there.

Also on line 21 you;re not using the |replace function, yet your thumbs do seem to be loading. Not sure what's up with that.

Code:

{thumb file=`$images[image].image_path` longside="100" link="false" html="alt='`$product.product` '"}

pinklinoleum

10-31-2006 07:22 AM

Re: Easy dynamic thumbnail generation

yeah, i can see how it wouldn't be working now! i used the final edit from post #7 ....

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

anyways... here is my revised product_images.tpl

Code:

{if $images ne ""}

{capture name=dialog} 

<script language="JavaScript" type="text/javascript">

{section name=image loop=$images}

{if $images[image].image_path}

Image{$images[image].imageid} = new Image();

Image{$images[image].imageid}.src = "{$images[image].image_path}";

{/if}

{/section}

</script>

<table width="100%">

<tr>

<td>

<table>

{section name=image loop=$images}

{if $images[image].image_path neq ""}

<tr>

<td>

<a href="#" onmouseover="document.main_image.src=Image{$images[image].imageid}.src;">{thumb file=`$images[image].image_path` longside="100" link="false" html="alt='`$product.product`' border='0'"}</a>

</td>

</tr>

{/if}

{/section}

</table>

</td>

<td>

<img src="{$images[0].image_path|replace:"home/content/m/o/t/motonekoparts/html/":""}">

</td>

</tr>

</table>

{/capture}

{include file="dialog.tpl" content=$smarty.capture.dialog extra='width="100%"'}

{/if}

i think the problem is here:

Code:

<img src="{$images[0].image_path|replace:"home/content/m/o/t/motonekoparts/html/":""}">

when i try and name it as name="main_image" it won't show up

thanks for your help!
-michelle

my version of X-Cart is 4.0.18

Alltribes

11-02-2006 08:09 AM

Re: Easy dynamic thumbnail generation

Hmm, I'm not sure what to tell you. You definately need the name="main_image" as that's the "hook" the java uses to swap out the main image.

Try removing the quotes around {$images[0].....}.

pinklinoleum

11-02-2006 10:34 AM

Re: Easy dynamic thumbnail generation

well... after some more trial and error i finally get her working!! yay! thanks again for sharing this with everyone! here is my product_images.tpl for 4.0.18 if it can help anyone else....

Code:

{if $images ne ""}

{capture name=dialog} 

<script language="JavaScript" type="text/javascript">

{section name=image loop=$images}

{if {$images[image].image_path}

Image{$images[image].imageid} = new Image();

Image{$images[image].imageid}.src = "{$images[image].image_path|replace:"server path to remove":""}";

{/if}

{/section}

</script>

<table width="100%">

<tr>

<td>

<table>

{section name=image loop=$images}

{if {$images[image].image_path neq ""}

<tr>

<td>

<a href="#" onmouseover="document.main_image.src=Image{$images[image].imageid}.src;">

{thumb file=`$images[image].image_path` longside="100" link="false" html="alt='`$product.product`' border='0'"}</a>

</td>

</tr>

{/if}

{/section}

</table>

</td>

<td>

<img src="{$images[0].image_path|replace:"server path to remove":""}" name="main_image" alt="{$product.product}" />

</td>

</tr>

</table>

{/capture}

{include file="dialog.tpl" content=$smarty.capture.dialog extra='width="100%"'}

{/if}

pinklinoleum

11-02-2006 11:29 AM

Re: Easy dynamic thumbnail generation

i just have one last question for you....

i am using transparent gifs for my thumbs... anyway to preserve that transparency? right now the cached thumbs all have a black background. i tried adding background="transparent" in the HTML, but that didn't work for me.

any thoughts? thanks again,
michelle

Alltribes

11-03-2006 06:01 AM

Re: Easy dynamic thumbnail generation

Sorry, I can't help you there. I have no experience at all with image manipulation via PHP. You'll have to hire someone to look at the plugin, or contact Christoph Erdmann.

pinklinoleum

11-05-2006 03:51 PM

Re: Easy dynamic thumbnail generation

ok, i'll try him. many thanks for your help

All times are GMT -8. The time now is 11:32 PM.

Page 2 of 4

Show 40 posts from this thread on one page