News:

Support the VirtueMart project and become a member

Main Menu

How can you change main image size in Product Details Page?

Started by niveek, October 30, 2013, 19:26:03 PM

Previous topic - Next topic

niveek

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.


jenkinhill

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
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

niveek

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.

niveek

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.

jenkinhill

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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum