Resize the main product image

[jenkinhill]

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.

eg.
        .medium-image {
            width:350px;
        }

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 Expand


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


and replace with

Code Select Expand


<?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/  -   http://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

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 {
          max-width:160px;
}

The fancybox modal link is automatically applied to this image for 2.0.16