Masonry Image Gallery

Yeah, I know. I actually did it right after that error 500 :wink:
That went without issues, of course.

1 Like

I’ve updated the component with settings for allowing empty lines between images and disabling categories (both for creating galleries automatically).

Don’t think that the GitLab bug has been fixed yet. So if you already updated Discourse, you probably need to get the zip from GitLab.


Tested it on beta11, works like a charm! :heart: :heart: :heart:

1 Like

Just wanted to say my community loves this component. Many of our topics are image-heavy and it takes the reading experience from painful to pleasant. So thank you!


Hello. This component does not work for a published page. Can this be configured somehow?

Yeah, it’s not possible to use it on published pages. Published pages does unfortunately not seem to run javascript (from theme components).

1 Like

I think developers should think about this issue. If there is a page publishing function, then for its full use it would be worth making appropriate additions to the forum code. Or are you saying it’s absolutely impossible?

1 Like

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.