VirtueMart 2.0 – How to Change the Thumbnail Size of Your Products
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.
Kent
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
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
Manos Mantzas
You are clear, brief and right to the point. You ROCK! 😀
Thanks for everything! 😀
Sara Thornton
Thanks Manos!
Glad the article helped 🙂
Best wishes,
Sara
Christian
Great and easy!! Wish all fixes were this easy
Sara Thornton
Thanks for the feedback Christian – glad to help!
Thanks,
Sara
Olayinka
Hello Sara,
Thanks for your article. However, that option “Enable dynamic thumbnail resizing” is already ticked in my virtue mart, but the thumbnail pictures still do not display the specified dimensions, but rather the dimensions are greatly reduced.
Sara Thornton
Hello Olayinka,
Thanks for your post. Did you follow the rest of the article instructions, such as deleting the “resized” folder, and making the FTP file changes?
Thanks,
Sara
Reemet
Sorry but did not work for me also… 🙁
Sara Thornton
Hello Reemet,
Thanks for your post. Did you follow all of the article instructions, such as deleting the “resized” folder, and making the FTP file changes?
Anthony
Sara,
You are amazing!
Thank you for sharing this sweetie
Sara Thornton
My pleasure Anthony!
Thank you for your lovely feedback.
Juma Khalfan
well explained God bless you and may HE shower more knowledge to you.
Sara Thornton
Glad to help Juma!
constantinos
Please i want to contact with me, at my email…..Please i have big problem with my web site!!!
constantinos
If need i’ll pay!!!!!
Please contact soon!!!!!
Sara Thornton
Hello Constantinos,
I have just sent you an email directly so that we can discuss how we might be able help with your website.
Kind regards,
Sara
Daryn
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!
Sara Thornton
Our pleasure!
Enjoying revelling in the awesome glow of problem resolution 🙂
VirtueMart 2.0 Troubleshooting
[…] Change the size of my product thumbnails […]
Jane
Very easy to follow instructions. First time when I got into the CSS. If I can do it, everyone can do it. Thank you!
Sara Thornton
Glad the article helped and thanks so much for your feedback 🙂
Janis Keim
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
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
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
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
sjeng
Hi Sarah,
Blood, sweat & tears
But it works !
Thank you.
Jan Hugo
Sara Thornton
Hi Jan,
So glad you had success!
Thanks for letting me know and have a beautiful day,
Sara
manos stathakis
Hi, My joomla template is from artisteer and there is no com_virtuemart folder in my Template html folder.
The only folder that is called com_virtuemart is in components folder and in administrator folder. What I am supposed to do?
Thanks you very much.
Sara Thornton
Hi Manos,
If you double check the instructions above they will guide you through how to create the missing folder structure in your template html folder.
Hope this helps,
Sara
Ike
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
Sara Thornton
Hi Ike,
Thanks for your post.
This solution is for VirtueMart 2.0, so it might not work (or even be needed) for VirtueMart 3.0.
Your best bet is to check the VirtueMart 3 forums to see if there’s a configuration fix or alternative fix for VirtueMart 3.0: http://forum.virtuemart.net/
I hope that this helps,
Sara
Heidi
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
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
BJ
Great post, i just followed the instructions and got exactly what i wanted. Thanks a lot!!!!