Multicol in Blocs?


#1

Any chance we could see Multicol in Blocs as described in the link below?

The magic is thatYou do not need to add Media Queries and change the number of columns for various breakpoints, instead we specify an optimal width and the browser will work it out.

Content can also span more than one column.


#2

It was mentioned previously a year ago also.

The custom “masonry gallery bric” provided as part of the developer api uses “columns” if I recall correctly. With that, in the appearance sidebar you can add/remove images so the basic integration of using and interacting with columns has already been proven in app and the UI.

So I would think it would be possible to have a generic column bric and allow the column settings to be set via the sidebar. Allowing users to drop in various content visually and adjust settings. But only @norm could conclude how that fits in the scope of the app at its present state.


#3

I’ll build it. hang tight.


#4

After 20mins I realize the only way to do this in a bric and make it generic so that any elements can be used is a bad hacking of the Bootstrap .container .row .col layout. Really bad and not worth it IMHO. It just isn’t possible in the current api to get exactly what you’d want.

Not hard to do in HTML bric though.


#5

Thanks for trying. I guess we’ll wait and see what the API allows in the near future, since it is currently undergoing changes.


#6

That’s why I mentioned only @norm knows the scope of the present state. :wink:

Unless nativity implemented and not via the API, it would be messy with so many things. Before you even factor in features like row controls, freehand controls, and how content relates with everything.


#7

Hi @ Flashman

Maybe this can be a simple workaround yet. Class added in Page Settings that is applied to a DIV with a paragraph custom class padding.

multicol.bloc (203.0 KB)

I have made the width to 1170px with a col-width at 20em. Then you can play with these to get what you desire. That said obviously worth for LG and MD breakpoints, while SM and XS especially would not make sense.

Would though be great to have this available directly in Blocs settings.

MDS


#8

Thank you @MDS what you have done here is quite clever and it’s interesting how the column width can be edited via the em values under page settings. You are correct that this isn’t entirely sensible for smaller devices, but could in theory be adapted by adding a second bloc with different em settings using visibility options.


#9

Hi @Flashman In my opinion, however 2 columns side by side on a small device does not make sense. But indeed your suggestion may be feasible.

MDS


#10

Certainly on XS, but there may be some instances where it could work on SM. That’s very much a theoretical observation though.


#11

Yep. Exactly.


#12

Hi, is there any way to get a masonry gallery with more than 3 colums, like: https://karltaylor.com/overview/ ?
THX


#13

There is no obvious way to do this, at least from the testing I did just now. I even tried changing the page width and image size, hoping to squeeze more in but that simply adds larger spaces between them.


#14

@THX Yes, you can make a masonry gallery with more colums, the images just get smaller. Using six columns the images still look pretty good.

casey


#15

I think the idea is to have the images expand, shrink and change layout as required. If you look at that web link and change the width of your browser it’s pretty flexible.


#16

I only see two images and as I shrink the page it goes to one?

Casey


#17

On a 32" display I can see anything from one image to five across the screen. It dynamically reformats as required. Having a large display is great for web design, not least because it forces you to think beyond average desktop sizes when building a site.


#18

I agree that would be nice but if you look at the stats very few users go beyond the 1920 resolution. I’m not sure what is so special about the masonry gallery, I changed my res to 1900 and can now see three. But any masonry gallery should flow with the screen size that you configure with the breakpoints. I could be made with the additional XL breakpoint.

casey


#19

Norm doesn’t seem too enthusiastic about adding an XL breakpoint. This is more about physical screen area than resolution. A 32" display could be 2K, 4K or 5K resolution with the same physical viewing area. This is just about how many images will fit into an area and the overall layout. In terms of resolution, even my 6" smartphone is higher than 1920 resolution at 1080 x 2160.


#20

I get the resolution and how big your screen size is. The extra break point would be handy for things like, my point is just how many people have 32 inch monitors that surf the web using a full screen browser? I totally agree with having the bigger monitor for designing would be nice, I ve been toying around with getting a 27 inch UBC-C one myself just for my photography and webdesign.

Here’s one with 6 images at the first two breakpoints, three images and sm and two images at xs.

http://hicontentdesign.com/masonry/

Casey