Resize product image

Hi, some of our product images (both grouped and simple) are small - but the image displayed is so huge and its surrounded by white space - that you can't even see the content (text, price etc) below - some users will assume that is it and not realise you have to scroll down.

What's the best place (presume in CSS) to resize these product image areas? It would be ideal to just have an automatic sizing of course, so that huge whitespace is not included - these images do not have whitspace in them, it is purely generated by the template. However, if not poss, a manual resize is needed!

I'm not using the cloud zoom, just straight Motion theme, although when i did use it, it did not seem to resolve the issue.

TIA, Phil.

Hi Phil,

The theme itself does not resize images. It is the nopCommerce framework that resizes the images.
You can set the size of the images from the administration -> Settings -> Media Settings.

Thanks

Thanks Boyko, but unfortunately if I half the standard nopCommerce "product detail image size" from standard 300 to 150px, it actually halves the size of the picture, but your template still leaves the same huge amount of whitespace after it! Try it (with a fairly small product image) and you'll see what I mean.

So we need to adjust that somehow! Sorry to be a pain, but it's ruining all the other great design with this layout, and many users won't realise there is more content following (need the scroll bar).

Thanks for your attention, Phil.

Hi Phil,

The space for the main image on the product page should be more than 400px by design.
Are all of your images small or only a few of them are small?
If you could provide a link to your web site would be great, so that we can advice.

Thanks

Ah, so it's not auto adjustable to shrink to size of image - that would be ideal but maybe not easy I expect! Have sent url to Milen for you.

There are mixed images but would be happy to make them all a third of size if nec. If you give me the best place to adjust css or cshtml I can apply any size no prob - would be greatly appreciated! Phil.

whether this issue is resolved if so how this was rectified, i am facing same situation.

I figured it - would be useful for others, who needs to modify
File to change : 'CloudZoom.CSS'
File Path  :  {root}\Plugins\SevenSpikes.Plugins.CloudZoom\Themes\Motion\Content\  folder.
Note :  the path 'Motion' will change depending upon the theme you are using.

change the line-height: pixel under .gallery.picture-wrapper

I am having a similar issue, and I have tried to figure this out.  The sevenspikes-cloud-zoom box on the product page is set to 580 x 580 px.  Is it possible to resize it or something else to something smaller like 360 x 360?  My images are not that large, and I would like to shrink the white space so the long description and tabs are closer to the buy button.  Any help will be appreciated.

Hi Richard,

You can reduce the space for the images by adding the following styles in your admin -> plugins -> nop motion theme -> settings -> custom head styles textbox:

@media (min-width: 981px){
.product-details-page .gallery { width: 360px; }
}

@media (min-width: 981px) {
.gallery.sevenspikes-cloudzoom-gallery .picture-wrapper, .gallery .picture-wrapper > .picture { line-height: 240px; }
.gallery .picture-wrapper { width: 240px; }
.product-details-page .overview { margin-left: 370px; }
.gallery .picture-wrapper:only-child, .gallery .picture-wrapper:only-child > .picture { line-height: 360px; }
}

This will make your images 360px x 360px and will increase the space for the overview column.

Hope that helps!

Worked perfectly.  Thank you for your support.