News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

Image Thumbnail Size on Category VM3

Started by lostra01, December 22, 2015, 22:46:32 PM

Previous topic - Next topic

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...
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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

GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

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
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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
Web site design, eCommerce design, you own first Online Business Order Now and Get - 10% off  at IT IVAcademy lab just contact us, click www.ivacademy.net