Different thumbnail sizes

Written by Max Milbers on 03 November 2015.

With VM 3.0.12 or higher it is easy to use different thumbnail sizes in different areas of your shop.

Assuming "Enable Dynamic Thumbnail Resizing" is configured in VM, if a thumbnail image does not exist for the size specified in "Thumbnail Image Width" and "Thumbnail Image Height", it is created.

This results in one thumbnail being created for the size specified e.g. coat_0x200.jpg

Configuration for dynamic auto thumbnail creation

"Enable Dynamic Thumbnail Resizing" Ticked
"Thumbnail Image Width" = 0 (can be left to 0)
"Thumbnail Image Height" = 200 (set to the thumbnail size required)

The 0 for the "Thumbnail Image Width" value enables the thumbnail image to maintain the image aspect ratio of the original image. For the settings shown above, a thumbnail will be created from the main image.

Main image:- coat.jpg
Resized folder thumbnail:- coat_0x200.jpg

Stores that require more than one thumbnail size

Some stores may require a different thumbnail image size to be used depending on the store page being displayed.

e.g. Thumbnails:- coat_0x200.jpg and coat_0x50.jpg

Virtuemart allows more than one product "thumbnail" in the product image resized folder, and will create thumbnails (in addition to the VM configuration settings) through use of template overrides.

To have a template view create a thumbnail that is different from the configuration settings and use this thumbnail, a simple override to the layout is required that adjusts the function "displayMediaThumb".

function displayMediaThumb($imageArgs='',$lightbox=true,$effect="class='modal' rel='group'",$return = true,$withDescr = false,$absUrl = false, $width=0,$height=0)

The last two parameters of the function call determine the thumbnail size to use/create in this view.

Example - Override the thumbnail size for additional images on the product details page

To use a diffrent sized thumbnail than that set in the main VM configuration, a template override can be created.

/templates/YourTemplate/html/com_virtuemart/productdetails/default_images_additional.php

To use/create an additional image thumbnail of width 50px the "displayMediaThumb" override would look like this.

if(VmConfig::get('add_img_main', 1)) {
   echo $image->displayMediaThumb('class="product-image" style="cursor: pointer"',false,$image->file_description, true, false, false, 50, 0);
   echo '<a href="'. $image->file_url .'" style="display:none;" title="'. $image->file_meta .'" rel="vm-additional-images"></a>';
} else {
   echo $image->displayMediaThumb("",true,"rel='vm-additional-images'",true,$image->file_description, false, 50, 0);
}

The resulting thumbnail would be named:- imagename_50x0.jpg and would be shown for additional image display in the product details page.

< Prev Next >