How can I have a Larger Images for Product info then the images listed on the index, category listings?

[jesma]

Hi,

 

How can I have a Larger Images for Product Info/Details page then the Products Images listed on the index, category listings pages?

 

At the moment all the product images are the same size throughout the site (eg. new products listings on index, product listings on categories, product details page). What I would like to be able to have is for the Products Details (product_info.php) page to display a larger size of the product image, as I have so much whitespace on the Product Details/Info page, it's looks stupid having a tiny image in the center when I could fillthe space up with a bigger size image.

 

I looked at some of the settings in the admin to change image restricitons, but it seems to control the sizes of product images throughout the site, so whatever size product image I have in the index - new products listing, it's the same size as Product Info/Details page.

 

How can I specify the product image size on the Product Details/Info page without it effecting the the product image size on the index/category listings?

[jpweber]

The only way I know how is to go to your ADMIN, and go to configuration/images, and then your "small image" height and width are the ones that are displayed on your product_info page when you click on an actual product, as well as the ones displayed when you click on a category.

 

Anyway, what I do with a lot of my products, is I go into the product descriptions within my admin, and I hard-code the pictures in there. Click on your category, and then your product, then edit the product description.

 

Put in there something like this:

<table border="0" cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td width="33%" valign="top">

<p align="center">

<img src="/images/yourpicture.jpg" border="0" alt="blah blah" title=" blah blah" width="150" height="130" hspace="5" vspace="5">

</td>

<td width="33%" valign="top">

<p align="center">

<img src="/images/yourpicture.jpg" border="0" alt="blah blah" title=" blah blah" width="150" height="130" hspace="5" vspace="5">

</td>

<td width="34%" valign="top">

<p align="center">

<img src="/images/yourpicture.jpg" border="0" alt="blah blah" title=" blah blah" width="150" height="130" hspace="5" vspace="5">

</td>

</tr>

</table>

 

Well, at least that's what I do. Might have not solved your problem, but I hope this helped.

[jesma]

Interesting, the hardcoding in the description sounds like an easy way to get round it actually, not sure if I would want to keep doing it all the time for new products, but if all else fails...

 

But thinking about it, isn't their a way in a <td> tag or something, you could set a maximum width and height so when you put an image inside the tag it automatically fits the table? Or could it be the <image> tag? I'm just sure theirs a really simple HTML tag I could just put in the product_info.php that would resize all products in that page!!

 

Anyone know?

[spax]

A simple hack to double the thumbnail size in product_info.php, is to add a multiplier to the small image width and height.

In product_info.php, look for:

 

SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT

 

There are two instances of that, usually one under the other. Change both instances to this:

 

SMALL_IMAGE_WIDTH*2, SMALL_IMAGE_HEIGHT*2

 

That will double the size of the thumb, once you are on a product info page.

[jesma]

Spax.. thats works a treat! And so simple! Thanks.

 

I just keep finding other things too improve on now! I'm really not happy about the quality of the scaled down product images on listings pages. Their in proportion but they look jagged instead of smooth. Is their a way to fix this?

[jpweber]

They're probably bigger than the original picture size. You can try optimizing 'em in photoshop so they're twice as big as the original thumbnails, and then when you multiply 'em by 2, they'll look normal.

 

But that's true for any picture; the more you blow it up (bigger than it's original size), the more it gets distorted. Take bigger pictures or do your best to optimize your images in photoshop at a larger image size.

[spax]

As Jason says, when you oversize an image, it becomes pixelated. However, if you mean your large image looks jagged when it is downsized, for the thumbs, that is because the html is basically squashing a 600x400 (as an example) image into a 100x80 one. The thumb, even while it looks smaller, maintains the original image's dimensions.

To cure this, you need to look at installing one of the dynamic thumbnail image contributions. I use this one:

 

http://www.oscommerce.com/community/contributions,2226

 

and the nate_02631 15 Dec 2005 version.

 

It is an easy install but very effective.

[jesma]

Well, I'm off to bed now, tiring work this....

 

Yep, I meant the smaller thumbnail sizes on the product/catogory listings were looking a bit jagged. The larger image on product info looks lovely and smooth. I'll check out that contribution tomorrow and see how i go.

[jesma]

Hi,

 

I didn't try the contribution in the end as I don't think it's what I really want, the the x2 image size for Product Info also makes my pictures NOT smooth, even though it's small then the original size. So overall I'm not happy with either my small (listings image) or larger (product info) image.

 

I feel the only way I get the results I want is to upload 2 sizes of a product, one a smaller for the listings (category listings, homepage listings etc.) and 1 larger one for the product info. Is there anyway I could do this?

[spax]

Like I explained, the images are jagged because the html output is forcing your big image into a small image. That contribution, effectively, draws a new image for the thumbnail size. It is exactly what you want!

 

If you really want to upload two images for every product, you can try Dynamic MoPics. There are others but I have used this one and it works well. The big advantage with MoPics is you can have as many images for your products as you wish.

[Guest]

Just found this post. This is a great fix. I'm trying to understand images with this store as well.

Thanks,

Steve Lewis

[candlesofeden]

Can someone post a working website with this done so I can see it? Thanks.

[jpweber]

I have on-the-fly auto thumbnails (the contrib noted above) installed on my site. Go here: http://www.thevisiondepot.com/allprods.php (or any page) and check it out for yourself. Right-click and save an image -- not that all the thumbnails are titled "product_thumb". Basically, it takes large images (300 kb+, or whatever) and creates dynamic thumbnails, fit to proportion. It's a must in any OSC store, in my opinion. Much faster loading times, better pictures.

[candlesofeden]

I have on-the-fly auto thumbnails (the contrib noted above) installed on my site. Go here: http://www.thevisiondepot.com/allprods.php (or any page) and check it out for yourself. Right-click and save an image -- not that all the thumbnails are titled "product_thumb". Basically, it takes large images (300 kb+, or whatever) and creates dynamic thumbnails, fit to proportion. It's a must in any OSC store, in my opinion. Much faster loading times, better pictures.

 

Thank you for posting your site, it's very nice! I wanted to see a site that had bigger thumbnails as I think the current ones 100x100 are too small to get a healty respect for the product.

[peppa]

Hmm yes I think this is what I need!!( I know it is) I have asked about this and I got the same anwers! :thumbsup:

 

My large pictures are just fine but it is the Thumbs that look like >/;:%?#"

 

But yet I do not understand what it is I need to get! On the contributions page there is a lot of things but what is it I should download? How do I install it and where.... what settings to change a s o... :blush:

 

My launch of the shop is now 4 weeks late because this picture trouble... :angry:

 

Please.... HEEEEEEEEEEEEEEEEEEELLLLLLLLLLLLLP! :o

 

/sarimaria

[spax]

Hmm yes I think this is what I need!!( I know it is) I have asked about this and I got the same anwers! :thumbsup:

 

My large pictures are just fine but it is the Thumbs that look like >/;:%?#"

 

But yet I do not understand what it is I need to get! On the contributions page there is a lot of things but what is it I should download? How do I install it and where.... what settings to change a s o... :blush:

 

My launch of the shop is now 4 weeks late because this picture trouble... :angry:

 

Please.... HEEEEEEEEEEEEEEEEEEELLLLLLLLLLLLLP! :o

 

/sarimaria

 

 

Like I said, get this one.

 

 

http://www.oscommerce.com/community/contributions,2226

 

and the nate_02631 15 Dec 2005 version.

 

It is an easy install but very effective.

 

 

Just follow the instructions, they are quite straight forward.