Author Topic: Resize the main product image  (Read 26693 times)


  • UK Web Developer & Consultant
  • Global Moderator
  • Super Hero
  • *
  • Posts: 28471
  • Always on vacation
    • Jenkin Hill Internet
Resize the main product image
« on: February 26, 2012, 21:49:27 pm »
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:
Code: [Select]
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"'false"class='modal'"true); ?>

and replace with
Code: [Select]

<?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

Jenkin Hill Internet,
Lowestoft, Suffolk, UK

Unsolicited PMs/emails will be ignored.

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

Currently using VirtueMart 4.0.12 10777  J 3.10.11 PHP 7.4.30