Masonry Image Gallery

I agree with what you’re saying. I’m not a Discourse developer, so I don’t know what’s possible or not.


The GitLab bug has now been fixed. Thanks for reporting it @Jagster! :star:


Just out of curiosity, how does this bit work:

    &::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;

I can see it shift things around but I don’t really get it fully :thinking: 2 pseudoelements, without any width, both being placed on the second position…?

Hey @chapoi!

These two pseudo-elements are there to prevent the columns from merging. They don’t have any width since they’re not meant to be seen, but in the image below they’re represented with blue lines.


Without them, the columns could start to merge if the column heights differs to much.

Element 3, 6 and 9 in the image above are set to be in column 3 (with the order property set to 3). But if we removed the pseudo-elements, column 3 would starts directly below column 2 (even with order 3). See image below. “Column 3” is highlighted in green.


That’s because flexbox checks if there’s any space left in the column just before (compared to the highest column). If there is enough space left to fit the first element, it will insert it there.

However, the pseudo-elements acts like columns, so fluxbox will check the pseudo-element (instead of the real column) for empty space. And since the pseudo-elements have a height of 100%, fluxbox will not find any empty space and thus column 3 will start where we want it to start.

I hope that was clear and understandable. :sweat_smile:


Very clever solution!

Unfortunately I didn’t come up with that myself. :grin:

One of the users in the forum I host brought up that when flipping the screen of a mobile device (tablet, phone), the pictures to not get adjusted to the new resolution correctly. This happens when pictures have a different aspect (too high) than the screen. So something is missing on top and bottom of the picture. Is it possible to optimize this? I have no idea if this is possible or easily possible.

Thanks for the feedback! Yeah, it doesn’t refresh when flipping the device. I didn’t find a solution for that at the time, but I’ll look into it again.

1 Like

Unfortunately I haven’t found a good enough way of handling a flipped device.

Another thing, if y’all didn’t see the announcement, image grids has just been added to core. It doesn’t work exactly as this theme component, but it looks really great and it’s awesome to have it in core. Check this topic:


I created a post with six photos, using the masonry image gallery tags. So far, so good. I then added a link for each one so when a user clicks the image it’ll take them to another post. When I did that it still looked ok in the Onebox but the actual post lost its masonry format and just displayed the images sequentially.

Is this a bug or just something that won’t work because of the links?

1 Like

Hey @Octoberon! It wasn’t designed to work with links/onebox, so that’s probably the issue. Was designed to open a lightbox when you click on the image. Although I had a similar request awhile back… :thinking:

Btw, how did you add the link to the image?


Yes, I did wonder if that would be the case. To create the links I just highlighted the text for the image and used the usual hyperlink button in the editor to paste in a link to a different post on the same forum.

1 Like

In the image grid topic somebody mentioned hiding the composer button. Maybe that’s already solved with CSS or something, but I thought it could be of interest for other people as well. Maybe you don’t need a button if you have auto create enabled… :slight_smile: . Anyways, the option to hide the button is now added.

1 Like

Anyone else having issues with auto feature? We tested it with 3.1 and 3.2 stable and in both cases it’s not working and no masonry galleries are generated despite the categories being set up correctly.

1 Like

Hey @jrgong! Strange, it seems to work for me. Do you have a link to a post that’s not working?

1 Like

Wasn’t able to see that post since you have to log in. Sorry.

I think maybe at one point I had a log in to that staging site (right?), but anyhow can’t find it now.

1 Like

hey there

sorry, this link works: 350ml Challenge Just4Fun 🚀 Auf geht's 🚀 - #91 von Hoppsi - 350ml Challenge - Forum |


I suppose that you have auto enabled that specific category and have the minimum number of images required set to 3 (since you have three images in the post).

I noticed that there were an empty line between the images. Have you enabled the setting auto allow empty line?

1 Like

Yep, both settings have been enabled whole time

1 Like

Wasn’t able to reproduce this issue. The only thing I can think of is if maybe there’s another theme component (or plugin) installed that doesn’t play well with Masonry Image Gallery…

1 Like