I get more and more about blocs and so I come up with my next big issue, which I cannot solve and cannot find any tutorials about. I want to create an image placeholder or/and finally a masonry gallery that might work like the images are buttons to open up either a lightbox/popup/modal. I have to different approaches like this here:
So far, always if I place an image inside a frame no matter masonry or normal and try to change the aspect ratio of the frame it also changes the aspect ratio of the image instead of placing the image to left right top or bottom and “cut” the image.
What am I missing here with placing images without distorting them
and
might be the “gridcontainer” (css grid) be my way to a solution?
With Iconic Gallery you can create galleries without image distortion and also masonry galleries. Please check in the demo, if this fits your requirements: https://iconic.blocsaddons.com/
I’ll put that in the wishlist. From my common sense It is absolutely necessary to have images just fill its imageboxes, isn’t it?
And - also to have a placeholder/box stay in the size, it is setup. It is not helpful for layout to have imageboxes completely change its size after placing images.
And of course it would be very cumbersome to setup images before for that kind of gallery.
The Iconic Gallery on the other hand is not a proper masonry - working on the website - in this case - a stonemason, and also for me as photographer and designer the masonry there looks not as a real world masonry is build - if you any played with lego, this is not how the stones - the wall - will keep its shape for a long time:
Now, as I do not fill in: object-fit: cover
but: .object-fit-cover
it works as expected.
Thanks, I was not aware to have to change spelling - I overread too quickly.
Next following question for masonry - looks fine now in the largest breakpoint, which I set to 2500 - to change and setup the next smaller breakpoint 991 - 769
and even smaller, it is always three columns and I cannot change height in between breakpoints. Is this true?
On this tutorial one can see very clear that Eldar is exactly missing what I am missing too. With putting in that class: object-fit-cover
It might solve exactly what I want to approach?
I check this out but if in advance there’s some advice on where or what to look at, I would appreciate that.
As one may see from my examples from : steinmetz-binder.de
I not only want some images but also some text in that grid.
I’ll come back to that mentioned wishlist as soon as I experienced some more but that “fill” or" cover" option would be great anyway, I guess. Adobe once had a “9-dot” button to “organize” where to put images if the frame is too small or didn’t fit the same aspect ratio while sparkle uses some buttons to place images either at the top - centered - bottom
or left - centered - right.
One is the CSS, the other in a class that applies that CSS.
Utility Classes are classes already part of Bootstrap, which is the framework Blocs users.
Learning the utility classes can be useful. The style options in the class editor of blocs is not exhaustive.
You will find web design is different to graphic design. Often to build what you would like to, you need to learn some basics beyond just knowing how to use an app. Much like Photoshop really.
