You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

Resize the main product image

Started by jenkinhill, February 26, 2012, 21:49:27 PM

Previous topic - Next topic


VirtueMart 2 uses the image you upload for products as the main image on the product details page. So if the uploaded image is large then you will see a large image.

For VM versions 2.0.2 to 2.0.14

If you need the main product image a certain smaller size you can add a descriptor for the class medium-image into the VM css file, vmsite-ltr.css or append it to your Joomla template css file so it does not get overwritten by an upgrade.

        .medium-image {

If instead you want to use a thumbnail image of the product with a modal box to show the large image, then make a copy of the template file at  joomla_root/components/com_virtuemart/views/productdetails/tmpl/default_images.php
Around line 26 find:

<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"'false"class='modal'"true); ?>

and replace with

<?php echo $this->product->images[0]->displayMediaThumb('class="product-image"',true,"class='modal'"); ?>

Save the file and use as a template override in joomla_root/templates/your-joomla-template/html/com_virtuemart/productdetails/  -

The above is for all versions 2.0.2 to 2.0.14 only, for version 2.0.16 the following applies:

Add a max-width for the div main-image as a css override.
eg add the following to the end of your joomla template css file.

.main-image img {

The fancybox modal link is automatically applied to this image for 2.0.16
Lowestoft, Suffolk, UK

Retired from forum life November 2023

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