Wanting this kind of "Masonry" Look

The way these products flow is exactly what I want for my products page. None of the Masonry Stacks I’ve seen seem to be able to handle the flowing columns AND the flowing rows. In other words, all the stacks I’ve seen either adhere strictly to straight columns OR straight rows, but the example above has neither. I love that!

Let me know if there are any thoughts how this look could be achieved using stacks!!



That page is made with stacks. It is Total CMS 2 made by Weaver’s Space but it is not released. I believe you can get that look with Total CMS which is currently out, but not 100% sure.

1 Like

I posted about this on JW’s site, and the answer there seems to allude to CMS not being able to achieve it :(:(. So sad about that!!


Ok good to know that then. Good luck.

The Grid of the Framework source can do this imho.
And @habitualshaker should be able to tell you more…


Yes - Grid Plus in Source can do this kind of layout. The recent project from Webdeer is a good example of that. Click on the image below to see an example.

image https://forums.realmacsoftware.com/uploads/default/original/3X/2/e/2e0bb79db8bb476d020440f2f48de156aeb905d6.jpeg


Strictly speaking, that is not a Masonry layout in the supplied link. You would normally expect the tiles to be much more irregular and the whole grid to be asymmetric in appearance (random with some items being taller than others). With a Masonry, the concept is to purposefully create a disjointed grid. Like how the Masonry stack does it.

Instead what you have presented appears to be a CSS grid. The difference being that the items all conform to the same grid lines. You could accomplish the same layout with the Intrinsic stack.

So far as CMS is concerned, I can’t see why you could not place your preferred CMS stack(s) in each grid cell, to make the content editable. If you need to generate a true masonry layout which is entirely CMS editable, I know that the WebYep stack pack has a Masonry option.

The Filter stack is also gaining a Masonry layout option in the next free update, if you need the ability for people to sort / filter the items shown.


Thanks! That’s the stack I’m currently using… but to my knowledge I can’t achieve any kind of staggered grid (masonry-ish). Is that correct?

No, but “Masonry” look may be in an update later this year :wink:


Thanks Will for reminding me of this great little function!!! :slight_smile:

I’ve never really noticed that before. ;-(
So I just tested it (for my first time in WY) - works great, looks great, as easy to use as most of the other wy-stacks!!! :+1:

So now I will immediately change my WY-“Gallery” in one current project and use WY-“Masonry” with Imag/Lightbox and Shorttext instead.

Off topic:
… one thing I’ve tested the last days (for the first time) but still don’t fully understand is the WY-“Read more”-stack.
I think I just don’t even know how to use it right. It seem that I even do not know how and/or where to put it right.

And after an upload my demo-site “crashed” … noch content was shown at all (even no other header/footer/grafphics)… just an “empty” white page.

From the user guide:

Read More

The WebYep Read More Element is used for customizable links to a detailed view at the end of product descriptions or teaser texts.

This element is represented by the following PHP code:

<?php webyep_readMore("read", "Read More", "readmorepage.php", "_self", 550, 240); // WebYepV2 ?>

Arguments for the webyep_readMore() PHP function call:
(see “Attributes of the Read More Element” below for details)

  1. "Fieldname": A string – the field name for this element.
  2. "LinkText": A string – a default text for the link.
  3. "target_page.php": A string – the URL of the link.
  4. "TargetFrame": A string – the name of the frame, that should be the target of the link.

Attributes of the Read More Element

Field name

A distinctive name for that element. This name will be displayed in the page in edit mode to give the user a hint on what this elements content stands for and to distinguish the different WebYep Elements in a page.

Link Text

The default text for the Read More edit button. If left blank, WebYep will display the element’s name instead next to the edit button.

Page (URL)

The URL (or filename) of a page to be shown when a visitor clicks the link.

If the Read More Element is positioned inside a Loop Element (see [WebYep Loop Element]), the Read More Elements behave much like a WebYep Menu Element’s item: The page shown when clicking the image can have different WebYep content depending on which link (in which loop row) the visitor clicked on.

So one could for example create a loop (WebYep Loop Element) of brief product descriptions with a product title (Short Text Element), a short description (Long Text Element) and a Read More Element in the looped block. By assigning the URL of a detail page to the Read More Element visitors can click on the link to see the detail page for that product.

Target Frame

If the page which URL you entered in the “Target Page” attribute should be opened in another HTML frame you can enter this frame’s name here.

So all it basically does is to create a link or button at the end of some text. The URL is not changeable but the content author is able to login to change the button or link label.

This stack was carried in previous versions of the WebYep stacks. I carried it over into this version of the WebYep stacks, in response to a few users asking me for it. I imagine it is not used too often, but it is an official part of the WebYep CMS core, so therefore I continue to provide it in “stack variant”.

The WebYep Toggle stack seems to get used more, if you have titles that need to be clicked to reveal larger areas of content.

Try this: Montage II from doobox