Image Thumbnail Size on Category VM3

[lostra01]

Hello there!

I hope someone can help me out with this. I wouldn't consider myself an expert in Web, but usually I'm doing stuff myself. Now I'm trying to set up a Webshop for a friend using Virtuemart. So far when I needed elements changed on the site, I used the "Inspect Element" function, then checked the corresponding files, and made the changes where needed. However, I ran into an issue. When I'm on the page, displaying all products for a single category, the Image thumbnails are way too small. I've tried turning on Dynamic, and deleted the thumbnails to recreate them, but they stay the same size. The Inspect Element function didn't help this time, when I try to change the size of the image, it lets me change the width, but the height seems fixed, so the whole image gets strached. Is there any way to increase this size while maintaining aspect ratio? I'd need bigger images compared to the name/description/price/button.

Thank you very much in advance!

Andrew

[GJC Web Design]

without a live url and versions no one can help...

[jenkinhill]

Start with the obvious requirement :::: http://forum.virtuemart.net/index.php?topic=128401.0

The image size is initially set by height/width settings in  Configuration/Templates/Media Files Settings  (I usually just use height to maintain aspect ratio) and then finaly sized using css and depending on the template used. Generarlly for class browseProductImage I would use max-height in px with max-width set to 100%.

But maybe you don't use default VM templates. You provided no information.

[lostra01]

Hello there! Sorry for the late answer!

I've stated in the Topic that I'm using Virtue Mart 3, but it seems, that's not enough, sorry So the exact version is: 3.0.12 and I do use the default VM template, all I'm doing is just changing fonts and colors here and there, no templates, just some custom changes.
I've tried setting up the maximum height to a fixed amount, then deleted the re-sized folder to recreate the thumbnails, but it totally messed up the whole site. So the URL is the following: www.patapult.hu

The problem would help me fix a lot of issues, like the "Details" (Tovább) button placement, because if the images are not the same size, it's totally out of position.

[GJC Web Design]

??  http://www.patapult.hu/index.php/lovasfelszereles/chaps-labszarvedo

.vm-product-media-container {
  height: auto;
  margin-bottom: 15px;
  max-width: 100%;
  text-align: center;
}

.browseProductImage {
max-height: none;
  max-width: 100%;
  width: auto;
}

allows the full sized thumb

[Rob3DSands]

Hi,
Php Version 5.5.31, Joomla! 3.4.8 ,VirtueMart 3.0.12

site URL: http://kazooni.com/
page URL with thumbnails in question: http://kazooni.com/index.php/antiques/j-v-shoe-tree-co-wooden-shoe-tree-sz-9b-detail

Having a similar problem. Developing a site and having issues adjusting thumbnail images.

Need to adjust image thumbnail width and height. Tried adjusting settings  at > Virtuemart >Configuration. Under Shopfront Settings the "Select the default template for your Shop" is set to my own template and "Category Template" is set to my own template. Under Media Files Settings the "Enable Dynamic Thumbnail Resizing" is checked, "Thumbnail Image Width" is set to 200, Thumbnail Image Height" is set to 300. The images on the front end did not change at all on the front end. The thumbnail images are the same small 45px X 60px images they were before the adjustment. The images are not 200px X 300px like desired. I have also tried these settings with the default template with no result.

What am I doing wrong please? What do I need to do

[jenkinhill]

On the page you link to the main image is actually 1,717px × 2,576px  and scaled by css to 173px × 260px
The 3 thumbs underneath are 200px × 300px scaled to 50px × 75px by css

You should look at the css for the display and override the styles if you wanmt something different. Use Firebug to work this out.  http://forum.virtuemart.net/index.php?topic=116620.0
http://docs.virtuemart.net/tutorials/templating-layouts/106-override-vmsite-ltr-css.html

[Rob3DSands]

Hi Jenkin,

Where is the default vmsite-ltr.css located? The instructions on the

"OVERRIDE VMSITE-LTR.CSS" page suggest to override this file.

http://docs.virtuemart.net/tutorials/templating-layouts/106-override-vmsite-ltr-css.html

The only files I found to override was the  com_virtuemart (see pics)

and that created a subcategory with some php files (see pics)

Should I create a brand new css file in cpanel called vmsite-ltr.css and declare a link meta to it in the header somehow?

Thank you

[jenkinhill]

With VM3 the file was renamed vm-ltr-site.css as a new naming convention was established, and some of the docs have not been updated.
components/com_virtuemart/assets/css/vm-ltr-site.css

You can use that file to create an override.

I conventionally create a custom.css file and use that for all my css overrides, as there are usually overrides required for all templates and other extension layouts. I simply add a link to the custom.css file as the last element to load in the Joomla template head<head>, although some commercial templates already have a facility to use custom.css.

And I would make sure that whoever uploads image files does not use such large images. Resize them to the maximum size likely to be displayed, ie as shown in the product detail lightbox.

[Rob3DSands]

Hi Jenkin,

All the files and folders were copied as directed on the page OVERRIDE VMSITE-LTR.CSS page.

http://docs.virtuemart.net/tutorials/templating-layouts/106-override-vmsite-ltr-css.html

Attached are some pics from cpanel file manager showing files that were copied.

I did not find a way to override vmsite-ltr.css in Joomla backend, so it was copied in Cpanel (see pic)

I do see the file vmsite-ltr.css is now available to edit in Joomla Backend>Extensions>Templates>kazoonivirtuemart02 (see pic)

Did I override correctly? What code do I look for in the file vmsite-ltr-css, to change my image width and height?

[jenkinhill]

That works OK. Get used to using Firebug to view the css and test edits.

The current relevant styles are:

.main-image img {
    max-height: 260px;
    max-width: 100%;
}

.additional-images img {
    height: auto;
    margin-right: 8px;
    width: 50px;
}

Adjust the max-height for the main image and width for the additional images, determining the best values for you with Firebug.

[Rob3DSands]

Hi Jenkin,

I was able to resolve all my issues with your help.
Also I will use the firefox firebug developer tool and will keep an eye on image sizes.

Thank you for all you help.

Rob

[lostra01]

Thank you very much for helping, it actually got solved!

[ivacademyru]

Hi I have the same problems with virtuemart 3.0.18
and instructions for vm2 dont work
Please reply instruction how to solve this problem in virtuemart 3.0.18