VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: thefbi on June 28, 2022, 09:57:33 AM

Title: Frontend image category layout - Images size
Post by: thefbi on June 28, 2022, 09:57:33 AM
Hi,
I have a problem in frontend general category layout.
I see if my images are not the same ratio, the layout is broken. See screenshot.
Is there a way to force this images size in the configuration ?

VM 4.0.2 16661
Joomla 3.10.10
Title: Re: Frontend image category layout - Images size
Post by: Jörgen on June 28, 2022, 10:32:33 AM
Probably best to make the images the same aspect ratio, but here is one example of cropping with css.

Should be easy enough to to do in your template.

Jörgen
Title: Re: Frontend image category layout - Images size
Post by: GJC Web Design on June 28, 2022, 11:00:54 AM
as they say .. shite in == shite out ...  why not make the effort of the same sized images?
Title: Re: Frontend image category layout - Images size
Post by: thefbi on June 28, 2022, 14:12:52 PM
Quote from: Jörgen on June 28, 2022, 10:32:33 AM
Probably best to make the images the same aspect ratio, but here is one example of cropping with css.

Should be easy enough to to do in your template.

Jörgen

Hi, thank you, but i did not see example here...
Title: Re: Frontend image category layout - Images size
Post by: thefbi on June 28, 2022, 14:14:43 PM
Quote from: GJC Web Design on June 28, 2022, 11:00:54 AM
as they say .. shite in == shite out ...  why not make the effort of the same sized images?

Yes, i know, but it is not me.
The client makes his own changes, and although I have already explained to him several times that he needs images of the same size, he can't do it. So I'm looking for an "automatic" way to do it for him.
Title: Re: Frontend image category layout - Images size
Post by: Jörgen on June 28, 2022, 14:32:08 PM
Sorry

https://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped (https://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped)
https://stackoverflow.com/questions/15167545/how-to-crop-a-rectangular-image-into-a-square-with-css (https://stackoverflow.com/questions/15167545/how-to-crop-a-rectangular-image-into-a-square-with-css)

Jörgen
Title: Re: Frontend image category layout - Images size
Post by: Studio 42 on June 28, 2022, 15:51:10 PM
You do not need to resize images, if you use a modern responsive template using right CSS rules for product row / columns
Here for eg a sample https://gist.github.com/fotan/ae20d38c242193e338fc
But if you use right Html for your render, you should not have this problem.
Title: Re: Frontend image category layout - Images size
Post by: thefbi on June 28, 2022, 16:46:35 PM
Thanks to both of you!
I'll see it.