RE: Displaying Portrait & Landscape Images In Set Size Square

[bunglebonce]

Hi,

Congratulations on the new version - will definitely be updating.

I am currently using version 14.4.0

I am trying to display a horizontal grid of 4 images in a fully responsive layout grid.

The problem is, that the images are both portrait and landscape, and so really I need them to display at a fixed height and width so that they display neatly.

Is there a way, using either version 14.4.0, or the new version, to display both portrait and landscape images in a fixed height/width square thumbnail within a layout grid, so that they display neatly?

Or is there a better way to use your software to achieve this?

Any help would be much appreciated.

Thank you

[Pablo]

Do you mean this?
https://www.wysiwygwebbuilder.com/suppo ... natra.html

This was created layout grids. But you can also use a flexgrid.

[bunglebonce]

Hi there,

Thanks for your quick reply.

It is more like what is being discussed here...

https://stackoverflow.com/questions/122 ... -thumbnail

...where you place any image, portrait or landscape, into a fixed square container.

That way the images display neatly, and not all over the place, if one is portrait, and then the next landscape.

if you need me to send you a visual of what I mean, then please let me know.

Thank you

[Pablo]

I could not find any screenshot of what it looks like on the specific URL.

But maybe this is what you are looking for?
https://www.wysiwygwebbuilder.com/suppo ... llery.html

[bunglebonce]

Hi there,

Again, thank you for your quick response.

Sorry, no, that is not what I mean.

I am obviously not explaining myself very well.

I will attempt to mock up something visual to show you tomorrow, and get back to you.

Thanks for trying to help though, it is much appreciated.

[BaconFries]

Ok I may be wrong, but when you refer to a set square size, do you mean a set size thumbnail? Take a look at the following fiddle showing what you are possibly wanting to achieve....
https://jsfiddle.net/cfbuwxmr/1/
And from stackoverflow
https://stackoverflow.com/questions/426 ... s-a-square
From Codepen
https://codepen.io/KristinB/pen/tdKvL
Screenshot

[bunglebonce]

Hi there,

Thanks for the reply.

Yes, that is exactly what I am talking about - especially the stackoverflow link. Thank you.

However, unfortunately I have been trying all morning to implement those ideas using Web Builder, but am not having much success.

I am not quite sure what would be the best tools to use.

For example - what would be the best way to create those square thumbnails, and display them in a layout grid within Web Builder?

Or is that not the best way to achieve this?

Any help would be much appreciated.

Thanks again for your help.

[Pablo]

The photo collage object always uses square images
http://wysiwygwebbuilder.com/photocollage.html

Also, in the photo gallery you can use a different image for the thumbnail and the large images.
So, the thumbnail can be square and the large image another format.

[bunglebonce]

Hi again,

Thanks for your reply.

What I am looking to do is replicate what can be seen in the screenshot found at the following link...

https://we.tl/t-T2Hw8gxLL4

As you can see, there are various shaped images, but all of the the writing and buttons below the images line up perfectly, regardless of the image shape.

Can this be done using Web Builder?

And if so, what would be the best way to achieve this?

Thanks again for your help and patience.

If you could hep me solve this problem it would be much appreciated.

[Pablo]

Maybe the images in your screenshot do have the same size/aspect ratio? Spacing around the content is transparent or white?

Based on your screenshot I would say that cards maybe be useful.
https://wysiwygwebbuilder.com/cards.html

[bunglebonce]

Hi there,

Thanks once again for your reply.

Yes, I would agree that from a display perspective, cards are the closest to the screenshot I sent you.

Especially as you can make all of the cards the same height, regardless of the image aspect ratio, using your card deck and bottom margin trick.

However, as far as I can tell, a card cannot be set up as a form in Web Builder?

For a page displaying goods for sale, I would need each card to be able to be a form, as each card would display and hold the form data for each product (like in the screenshot I sent you).

Could I do this manually by adding custom html to the card?

Unless of course, there is a better way to achieve this using Web Builder?

Also, as far as I can tell, you cannot do things such as CSS animations or shadows on an image inside a card, whereas you can with items placed in a layout grid?

Many thanks for you continued help.

It is much appreciated.

[Pablo]

There is currently no option to use a card as a form.

Cards items do support animations:
https://www.wysiwygwebbuilder.com/suppo ... -demo.html

[bunglebonce]

OK Pablo and Baconfries,

Thanks for the clarification and both of your help over the last few days.

[BaconFries]

Glad to have helped in some way