VirtueMart Forum

VirtueMart 2 + 3 + 4 => General Questions => Topic started by: alquemius on October 12, 2017, 05:14:33 AM

Title: Main Product Image resize VirtueMart 3.2.4
Post by: alquemius on October 12, 2017, 05:14:33 AM
Hi guys I am absolutely new to Virtuemart, a complete virgin, so please bare with me....


VirtueMart 3.2.4
Joomla 3.8.1
PHP 7
You may see the a test tab at this page:
http://www.filakitaki.com/index.php/en/test


I am trying to set up un test product to learn a bit about virtuemart and to have a base to go from with the following products; yet its a bit of a mess to change the image size no matter what I do it stays small.  I ve seen some tutorial but they are V1 and V2 tutorials with coding and I guess I am not doing something right or maybe its a version thing.

on the other hand.... I just dont get why virtuemart being such a cool and potent storefront can't make it easier to handle image sizing without having to go on coding like getting a super cool car but hey! Guess what? You got to make your own steering wheel LOL!



Any guidance on how to deal with images would be super appreciated!  Have a good day/evening!!
Title: Re: Main Product Image resize VirtueMart 3.2.4
Post by: Studio 42 on October 12, 2017, 11:32:55 AM
You have a css in Virtuemart.
.browseProductImage {
    max-height: 90px;
    width: auto;
    max-width: 100%;
}

max-height: 90px; is why it not resize correctly.
Try to add in your template css
img.browseProductImage {max-height: 300px;}
for eg. or
img.browseProductImage {max-height: 100%;}

Title: Re: Main Product Image resize VirtueMart 3.2.4
Post by: alquemius on October 12, 2017, 14:30:56 PM
Thank you Studio42!

Are you talking about virtuemart.css ? Where may I find that file ?


Title: Re: Main Product Image resize VirtueMart 3.2.4
Post by: Studio 42 on October 12, 2017, 14:37:43 PM
You can simply add the rule in your template.
Directly in any CSS file of your template or if you can add custom CSS rules in the template style.
Title: Re: Main Product Image resize VirtueMart 3.2.4
Post by: alquemius on October 12, 2017, 15:04:02 PM
Alright, will give it a go.

Thank you Studio 42!
Title: Re: Main Product Image resize VirtueMart 3.2.4
Post by: marvays on November 01, 2018, 16:25:56 PM
Hi. I have question. How I can make css for centered image, with overflow.
The input images are different in size and different aspect ratios. I need a product image to display 250px x 250px. min-height and min-width is 250px. Align to center. I've been trying it for an hour and I can not.
Title: Re: Main Product Image resize VirtueMart 3.2.4
Post by: Studio 42 on November 01, 2018, 17:43:32 PM
Have you try this https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Or https://www.anthony-brard.com/centrer-une-image-horizontalement-et-verticalement-dans-un-bloc
Title: Re: Main Product Image resize VirtueMart 3.2.4
Post by: GJC Web Design on November 01, 2018, 19:50:08 PM
surely better to make them the same size .. pad out with whitespace etc

nothing looks worse than varying sizes and shapes of images.. bah
Title: Re: Main Product Image resize VirtueMart 3.2.4
Post by: Milbo on November 06, 2018, 20:17:13 PM
There is also an automatic resize of the main image. Modern templates may omit the css width, heigth stuff and just use the vm resize feature. It depends on your template. Do you use the vmbeez?

Another idea is to override the css with an extra css style added to the header. but templaters may hate that also. Not simple to find a nice solution which fits to anyone.