VirtueMart 2.x. How to change product image dimensions

This tutorial is going to show you how to change product image dimensions in a VirtueMart template.

If product images in your template have landscape (portrait) orientation and you  need to change it to a new image with portrait (landscape) orientation:

1. Login to the administratior backend of the Joomla site.
2. Go to the top menu Components ->Virtuemart.

3. Click on Products on the left.

4. Look for the product you want to change the image of and click on it.
5. Click the Product Images tab to upload a new image.

6. Scroll down till you see Browse  under Upload File and click on it.

7. Navigate to a new image that has a different (landscape vs portrait) orientation on your computer, click on it and click Open.

8. Click on Save at the top right of the page.
9. You should see a message saying “Product successfully saved”. Proceed to uploading a thumbnail (needed only unless Enable Dynamic Thumbnail Resizing under VirtueMart -> Site tab is enabled) – under Upload File select Replace thumb, click Browse to navigate to the image and upload it. Click Save.
10. Open the product info page from the front ends of your site in the Firefox browser with Firebug installed. Using Firebug you need to determine what height the new image should be and what line in .css should be edited for that.

11. Open  the Firebug window  by clicking on its icon at the top right corner of your Firefox browser.
12. Select Click an element in the page to inspect.
13. Click the image frame and manually change its height in Firebug.

14. Right click on the name of the .css file in Firebug and select Copy location. It should be a virtuemart.css located in the templates/theme_###/css/ folder on your FTP, butsometimes a different file/location depending on your particular template design.
15.  Open an empty file and right click to paste the location. Look for the same .css on your FTP  file and open it to make the changes.
16. Copy the whole line where the height was changed from Firebug  and change the same line in .css with it.
17. Save the changes made to the .css file.

18. Refresh the product page again. The frame for the new image should now look correctly.

Feel free to check the detailed video tutorial below: