-
Posts
-
i’m unsuccessfully trying to find a way to have a Masonry style layout on a page for ALB blocks that contain both an image and text & icon-list in each block, and have it all collapse nicely for viewport resizing.
first try – adding a 1/3 block containing an image & text & iconlist multiple times. tho i can change the height of each row to be individual, it’s still row-based. so if one block has a long height based on content, then the next blocks not having much content don’t wrap like a masonry style gallery with differing image heights.
second try – i added the Grid Row ALB option, but that’s also row-based. is there any simple css overrides to turn a series of Grid Rows into a Masonry style layout?
third try – creating a portfolio post with the needed content then using the Masonry ALB block. but this will only show the featured image, title, & excerpt. is there a way to have the Masonry ALB block to show the portfolio posts’ content under the featured image? or is there a way to have styled text & icon lists inside the excerpt box?
or, does anyone have any suggestions on Plugins that can accomplish this? all the ones i’ve found will also only show an image or an image plus title in the Masonry gallery. it also seems like most don’t play well with many “themes”, so i’d be nervous trying them.
i also found some rather complex combos of html, css, & javascript that aren’t WordPress oriented that i’m not sure how to implement.
so hoping for some guidance here for a more elegant solution than just trying to match up similarly height’ed blocks & use the regular alb blocks.
thanks!
Hey SyberKnight,
Thank you for the inquiry.
Could you provide a screenshot or a mockup of the layout that you want to create? Looks like this is not possible using the default elements because you cannot combine or show an icon list in a masonry element, so your other option is to get a custom code somewhere with the layout that you are after, or find a custom plugin. Unfortunately, we do not know of any plugin that has this feature.
Best regards,
Ismaelhi Ismael,
thanks for your reply.
yeah, i kinda figured after playing with all the options (a lot).so, to answer your question (see attached screenshots) – i have a bunch of people’s headshots to put on a page and under them list links to other places that are relevant to that person. problem is, some have a LOT of links whereas others have just one or two. so i was trying to find a way to wrap the blocks in a masonry style so there wouldn’t be a lot of empty space. does that make sense?
aside from adding custom code (which i’d rather not do if i can get away with it), i think my only option is what i started doing here in these screenshot/test page is – which is to just have 4 x 1/4 layout blocks and just try to visually add other entries where the height would aprox match across the 4 columns.
i did the same thing with the “grid” layout block, but it seems to produce the exact same affect (is there any reason i should use that instead?).am open to other suggestions, but understand there may not be any other than what you said about adding custom code.
thanks for your help!i’ve actually had a few instances lately where it would be great to have the ability to wrap blocks of content. i know i can put an image in a text block and align it right or left to have the text next to it wrap around. but what if i want to have a block of content (like say and image AND some text) to have a border & have text content it’s next to wrap around it. like a pullquote or something other than just an image. so consider this a wishlist item :-)
thanks.Hi,
Thank you for the info.
Even if we managed to render shortcodes inside the masonry content, this might still not work as you would expect because the size of the masonry item does not rely on the length of the content but on the size of the images and the aspect ratio. Based on the screenshot, the images that you are planning to use have the same sizes and aspect ratio, so this will just create a normal grid without the masonry style or tiled grid that you are probably after.
Have you tried using the Content Elements > Team Member element? You should be able to attach or add different links to the item using this element.
Best regards,
Ismael
- You must be logged in to reply to this topic.