Problem with how images are displayed in product page?

[origomedia]

Hi guys i uploaded 13 images to a product http://www.millionaireasia-indonesia.com/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=57&virtuemart_category_id=8&Itemid=620 I then deleted one which i did not need. As you can see when you click on the link the images spread over 3 lines instead of two lines of 6.

How do I get rid of the blank image space that should not be there?

Thanks Jim

[ivus]

Hi origomedia,

Use Firebug/Inspector.

Basically you're attempting to use media queries to dynamically resize the "already resized" thumbnail images with the following style:

vmsite-ltr.css:15

Code Select Expand



.additional-images img {
  margin-right: 8px;
  width: 50px;
  height: auto;
}



SO what you want it to do is resize to explicitly set the width to 50px and resize the height in aspect accordingly. HOWEVER... here are the actual dimensions of your thumbnail images:

• /images/stories/virtuemart/product/resized/03-exterior-night_300x400.gif - 300px X 232px
• /images/stories/virtuemart/product/resized/grand-lobby_300x400.gif - 300px X 228px
• /images/stories/virtuemart/product/resized/grand-room_300x400.gif - 300px X 228px
• /images/stories/virtuemart/product/resized/grand-executive-suite_300x400.gif - 300px X 228px
• /images/stories/virtuemart/product/resized/plaza-suite--master-bedroom_300x400.gif - 300px X 228px
• /images/stories/virtuemart/product/resized/penthouse-terrace-blessing-ceremony_3_300x400.gif - 300px X 228px
• /images/stories/virtuemart/product/resized/fountain-lounge_300x400.gif - 300px X 228px
• /images/stories/virtuemart/product/resized/burgundy_300x400.gif - 300px X 228px
• /images/stories/virtuemart/product/resized/c_300x400.gif - 300px X 228px
• /images/stories/virtuemart/product/resized/26-seafood-terrace_300x400.gif - 300px X 228px
• /images/stories/virtuemart/product/resized/sumire_yakitori-grill-section_300x400.gif - 300px X 228px
• /images/stories/virtuemart/product/resized/onfive_300x400.gif - 300px X 228px

In order for all the images to line up (display:inline; float:left;) ALL IMAGES MUST BE OF EQUAL DIMENSIONS. It only takes one to throw it all out.

You can fix it in one of 2 ways:

• resize your images (why a photographic image is a GIF format is beyond me?)
• because you're resizing them to such a small size, clarity isn't going to be a huge factor, simply set your height value in the CSS to be 40px explicitly.

Code Select Expand



.additional-images img {
  margin-right: 8px;
  width: 50px;
  height: 40px;
}



I hope this solves your problem.

BTW: this was a simple CSS issue, not a VM issue which you would have found plenty of answers on google about... just saying.

[origomedia]

Thanks Ivus,

Ok let me have a look at this and try to fix it. I actually haven't resized anything just uploaded the images that I have from the client. Maybe I can alter the settings so that the thumbs are bigger as I am currently just using the settings that were with it when i started using the template.

Thanks for your help.

Jim

[ivus]

Hi origomedia,

You've missed the point. All images must be the same size even before your upload. The VirtueMart image resizer only takes into consideration the width. It will resize what ever image you feed it to the WIDTH specified, and calculate the height respectively keeping the original aspect ratio in tact.

You don't need to fluff around to fix the problem as it doesn't affect anything else any where on the site.

Code Select Expand



.additional-images img {
  margin-right: 8px;
  width: 50px;
  height: 40px;
}



Will fix it for this instance.

[Djirko]

Hi origomedia,

You've missed the point. All images must be the same size even before your upload. The VirtueMart image resizer only takes into consideration the width. It will resize what ever image you feed it to the WIDTH specified, and calculate the height respectively keeping the original aspect ratio in tact.

You don't need to fluff around to fix the problem as it doesn't affect anything else any where on the site.

And is there any way around to change that? I want to force virtuemart to resize by height.