Virtuemart Logo

VirtueMart 2.0 – How to Change the Thumbnail Size of Your Products

Written on . Posted in VirtueMart.

Below are the instructions to change the size of your product thumbnails to the size you really want:

Go to Components -> VirtueMart

Click the Configuration button

In the Templates tab, tick the Enable Dynamic Thumbnail Resizing? box and set Thumbnail Image Width and Thumbnail Image Height to your desired values

Save & Close

Using FTP, browse to your /images/stories/virtuemart/product and /images/stories/virtuemart/category folders, and delete the resized folder

Create a new folder structure: /templates/YOUR-TEMPLATE/html/com_virtuemart/category

Copy the file \components\com_virtuemart\views\category\tmpl\default.php and place the copy in /templates/YOUR-TEMPLATE/html/com_virtuemart/category

Open /templates/YOUR-TEMPLATE/html/com_virtuemart/category/default.php

Change div class=”width30 floatleft center” to div class=”width100 floatleft center” and change div class=”width70 floatright” to div class=”width100 floatright center”

Add the following code to your template CSS file: .browse-view .row .product .spacer img, .related-products-view .row .product .spacer img{max-width:100%;}

Admire your handiwork.

 
Discover More VirtueMart Troubleshooting Solutions

Sara Thornton

Sara is a Jack (or Jill) of many trades. A web designer and developer, an ethical SEO implementer, an AdWords advocate, as well as being our in house user-guide creator and trainer. In her spare time she loves a bendy/stretchy yoga session, and feels most happy when she's near the ocean (ideally with a ridiculously absorbing book).

Comments (35)

  • Kent

    Reply

    I understood the first part of your solution then…. I’m sorry, I have no idea what you’re talking about. I have Joomla and Virtuemart 2.0.2 and in the template sec in the admin it has a place to change the size of a thumbnail, which I’ve done, and made sure the dynamic resizing box is checked. I’ve also deleted and reloaded thumbnails several times. That was suggested in several posts. My product thumbnails are still tiny.

    I have no idea about code or html or even where to look for the css files you are talking about.

    Does VM not allow store owners setting up a basic website with a shopping cart the ability to choose a size of a product thumbnail? That seems like a pretty basic feature of a shopping cart. Any help would be appreciated on where in the admin/back end config area of virtuemart I should looking?

    Thanks and frustrated – Kent

    • Sara Thornton

      Reply

      Hello Kent,

      Thanks for your post, and sorry to hear that you’re having problems with the thumbnails.

      The files mentioned in the article above can be accessed through an FTP program such as FileZilla (free) https://filezilla-project.org/, and will need FTP access details (you should be able to get these from your hosting provider).

      As VirtueMart is created by volunteers they are still working out a few of the bugs in Version 2.0, but it unfortunately takes time to do so.

      There are a couple of VirtueMart extensions out there which allow a user-friendly way of editing the thumbnail size, but I haven’t personally used any of them and so wouldn’t be able to recommend any in particular: http://extensions.joomla.org/search?q=virtuemart+thumbnails

      If you’d like me to walk you through how the FTP solution works, just let me know and I can drop you a line directly.

      Best wishes,
      Sara

  • Daryn

    Reply

    Bought 2 books on Amazon to learn this and neither of them showed me how whilst your tutorial got it done in seconds. You are a rock star, thank you!

  • Janis Keim

    Reply

    Hi Sara–
    I followed this article to the letter, thinking I was going to be able to resize the thumbnails for my client who wanted them larger. I walked though your steps yesterday without having any issues. I was swapping out images for some of the categories and noticed they weren’t getting resized, but never got the issue resolved.

    Today, when I FTP’d into the website, I noticed the “resized” folders weren’t re-created, so I manually created them, thinking that would resolve the mix of thumbnail sizes, but I was still having issues with some images not resizing.

    So upon logging into the backend of the website, I noticed VM 2.6.4 was available, so I updated. Still the mix of two different dimensions of thumbnails. Then I had one of those “ah ha” moments. I noticed the paths in these two areas were slightly different:

    Product Media URL
    Category Media URL

    So I FTP’d back in there and found the “resized” folders and deleted them. Upon deletion, I saw a notice that said to recreate the folders, which I had not seen yesterday. Anyhow, I now have the thumbnail sizes the same on the site, although the original images will need some tweaking.

    Just wanted to share my own success from your steps above and to mention the tidbit of a non-default value being used in the two Media URLs.

    Thank you so much for saving me buckets of time trying to figure out how to resize thumbnails in VM.

    Janis

    • Sara Thornton

      Reply

      Hi Janis,

      What wonderful feedback! Thank you so much for sharing, and I’m glad to see that you found success in the end.

      Hopefully your comment will help others who encounter the same issues.

      Have a great day,
      Sara

      • sjeng

        Reply

        Hi Sarah,
        Got a problem with the CSS. Did everything you said, but I missed something.
        In the new template folder: /templates/YOUR-TEMPLATE
        there is no CSS-folder, only the new structure ( /templates/YOUR-TEMPLATE/html/com_virtuemart/category ) I suppose I have to put: .browse-view .row .product .spacer img, .related-products-view .row .product .spacer img{max-width:100%;} into this folder.
        Can you tell me what I ,v missed ?
        Thanks for the help
        Jan Hugo

        • Sara Thornton

          Reply

          Hi Jan,

          The CSS changes will just go in your normal CSS override location, which tends to be template dependant (i.e. different templates can have different ways of overriding existing CSS). You can normally find your CSS file in your template/css folder, and then check with your template provider on how to override your template CSS.

          Alternatively you can edit the original CSS files (although this is not recommended, as it’s not upgrade proof), and you’ll probably be able to find this file in /templates/YOUR-TEMPLATE/css/.

          Good luck!
          Sara

  • Ike

    Reply

    Hi

    Hi Sara,

    Thanks for the post. I got stuck at the last bit.

    Change div class=”width30 floatleft center” to div class=”width100 floatleft center” and change div class=”width70 floatright” to div class=”width100 floatright center”

    I am using virtumart 3.0 and i cant find the above line in the default.php file i copied to the category folder.

    Thanks

  • Heidi

    Reply

    Thank you so much for this! Amazing tutorial that even I understood!

    I do have a bit of a followup question though. (No worries if you don’t have the time to answer I do understand everyone is majorly busy these days)

    But if you could tell me how I can centre the “Related Products” view for Virtuemrt. At the moment it is left justified but would look fab if it was in the centre instead.
    Is it a template issue that I have or is there way to edit the Virtuemart files themselves?

    Thanks in advance.

    • Sara Thornton

      Reply

      Hi Heidi,

      Glad this tutorial helped!

      For centring the “Related Products” view, you might be able to do this via your template (depending on the template you’ve used).
      I’d recommend checking out the options that your template offers, and if no luck there, you might be able to create a custom.css file and force the centring that way.

      Hope this helps,
      Sara

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect With Us

Blog

Contact Us

4 Redwood Lodge, Reigate
Surrey, RH2 0LU, UK

Privacy Policy

WebHolism Limited © 2006 - 2023
Registered in England and Wales, Registered Number 7290215
ICO Registered: ZB042427