VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: niveek on October 30, 2013, 19:26:03 PM

Title: How can you change main image size in Product Details Page?
Post by: niveek on October 30, 2013, 19:26:03 PM
This is the version of Joomla and VM I am running

Joomla 2.5.14
Virtuemart 2.0.24

Is there a way to change the main image size in the product details page? I looked in several pages in this forum that addressed this issue but they are not for the versions I'm running. I tried the solutions anyways but none of them worked for me.

It seems like there should be a very easy way to do this but I have spent many hours trying with no luck. Any help is appreciated. Thanks.

Title: Re: How can you change main image size in Product Details Page?
Post by: jenkinhill on October 30, 2013, 20:37:20 PM
The image is the full size image downsized using css, applied to the width of the holding div, eg <div class="width60 floatleft">, and the size values for main-image. These are defined in vmsite-ltr.css and can be overriden by adding new styles to the end of the joomla template.css or by using a custom.css

You can work this out using Firebug. See http://forum.virtuemart.net/index.php?topic=116620.0
Title: Re: How can you change main image size in Product Details Page?
Post by: niveek on October 30, 2013, 21:29:08 PM
Thanks for the info.
I've tried modifying the css but that didn't work out for me.

In the vmsite-ltr.css file line 163
.main-image img {max-width:100%;height:auto}
.main-image img.medium-image,.featured-view .spacer img,.latest-view .spacer img,.topten-view .spacer img,.recent-view .spacer img{max-width:100%;height:auto;width:auto;}

I tried changing the max-width but nothing happened. Am I just looking at the wrong place completely?

As you can probably tell I am a noob at this. Which css file and which line should I look for to modify?
Thanks.
Title: Re: How can you change main image size in Product Details Page?
Post by: niveek on October 30, 2013, 23:13:57 PM
OK I finally figured it out. This is for anyone who is running in to the same problem.
The CSS file you need to modify is located at
joomlaroot\templates\templatename\html\com_virtuemart\themes\default\assets\css\productdetails\images\default.css

The ID of the image is actually big-image. Not main-image or medium-image.
There you can change the dimensions however you want. Adjusting the max-width till you find something that works for you is a good way to approach it.
Title: Re: How can you change main image size in Product Details Page?
Post by: jenkinhill on October 30, 2013, 23:41:19 PM
Quote from: niveek on October 30, 2013, 23:13:57 PM
The CSS file you need to modify is located at
joomlaroot\templates\templatename\html\com_virtuemart\themes\default\assets\css\productdetails\images\default.css

Only if you are using a commercial theme using overrides, and big-image probably only applies for your theme supplier. My filenames refer to the standard, default VirtueMart installation.