Introducing image grids in posts

Yes, but not without [grid] tags. Automatically converting images into a grid without tags would violate the CommonMark spec, we very much prefer to avoid that. (In my first internal draft of this feature, I did start with an automatic grid.)

Instead, what I have been thinking as the next step here is that we could automatically add the [grid] wrappers to uploads of multiple images, probably 3+ uploads. This would be especially useful for mobile uploads, adding tags manually on mobile is clunky and chances are that if you’re uploading 3+ images at once from your phone, they are photos and reasonable candidates for a grid layout.

We don’t have any plans yet for when we are going to add this, but it’s certainly something we’d like to do.

9 Likes

It should be possible though to generate the static html from the JavaScript and publish the “cooked” DOM to enable a number of useful features such as this grid and the TOC

1 Like

The cooked HTML alone is not enough. The grid, TOC and similar features also need the JS that interacts with the HTML to create that feature. And that JS lives in the Ember app, it can’t be easily extracted for the non-Ember published pages.

2 Likes

I just played around with this yesterday and was recommended to pass my feedback & thoughts here on this thread…

  • I like that it is “automagic” in that it sets a grid itself
  • It might be a nice added feature to order the images without needing to copy/paste images around in the list - maybe just adding in numbers to the beginning of each image?
  • I like that you can easily toggle the grid off in the preview, but to get it to be added back, you need to re-add the code, seems like an area for an improved experience to have the grid icon appear when you have added in more than one image to be able to toggle on/off as needed.
  • One final possible future feature would be the ability to pick a particular image to “highlight” or feature within the grid so that it appears larger than others or stands out in some way.

All in all, though, great new option to add multiple images without images taking over a post :slight_smile:

5 Likes

Maybe a composer tool that you could select the images and it would insert the tag before and after?

4 Likes

You could do something like:

.d-image-grid:hover {
  img {
    -webkit-filter: brightness(60%);
    transition: 0.5s; 
  }
}

.d-image-grid:not([data-disabled]) .d-image-grid-column img, .d-image-grid:not([data-disabled]) .d-image-grid-column>.lightbox-wrapper, .d-image-grid:not([data-disabled]) .d-image-grid-column>.lightbox-wrapper>.lightbox {
  &:hover {
    img {
     -webkit-filter: brightness(100%);
     transition: 0.5s; 
    }
    transition: 0.5s;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}
3 Likes
[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

Hmm, it would be nice if this worked. I encourage users to link to their external images hosted elsewhere, and I disabled downloading hotlinked images to save space.

The following alternative might work, but most users won’t know how to format it in Markdown that way (they’re used to just pasting the image URL on its own line):

[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

Here’s an even more complex method to make the external images clickable to see the full sized version:

[grid]
[![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg "")](https://github.com/KDE/plasma-workspace-wallpapers/blob/master/IceCold/contents/images/5120x2880.png?raw=true)
[![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg "")](https://getwallpapers.com/wallpaper/full/b/5/f/563687.jpg)
[![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg "")](https://www.pixelstalk.net/wp-content/uploads/2016/06/Download-hd-nature-wallpaper.jpg)
[/grid]



Edit: I originally used URLs to external images, but Discourse replaces text even inside code blocks with the link to the downloaded hotlink, which feels like a bug. It should never mess with the contents of a monospaced code block.

3 Likes

Great new feature :clap:… a thing one of our users asked is if there is some sort of markup cheat sheet to help people remember this manual procedures, a bit like the keyboard shortcuts dialog popup associated with the keyboard icon.

6 Likes

i just made a theme component that adds image alignment and grid buttons to the composer toolbar

6 Likes

That definitely sounds like a bug!

1 Like

:yum: Beautiful. Unfortunately neither available via email nor in published pages. :cry:

1 Like

Yep, I filed a separate bug report:

2 Likes

Yes, published pages have very restricted access to Discourse features. Even regular lightboxes don’t work on them. Clicking an image will directly open the URL instead of showing the image viewer.

3 Likes

This works elegantly! I just did a demo

If it counts at all I’d vote for having the features of the image alignment/.grid buttons theme component.

If there was a feature for images I would like to have it would be a way to add a caption, In our community I advocate for attributing images, which is not the best use of the image description.

5 Likes

How about adding it at least as an opt-in option in core settings including an explicit warning? that way forum admins can make that decision if they want to choose so and know that they violate the CommonMark spec.

Cheers
Jr

1 Like

I understand your wish here (I have the same wish, I’d love for multiple uploaded photos to automatically be in a grid without the user doing anything), but from a maintenance perspective, this opt-in option is untenable. We run thousands of Discourse instances, and having the same markup behave differently in some instances but not others can cause all sorts of headaches. It’s sadly not maintanable.

This above is our best bet as a next step. (Not sure when it will happen, but contributions here are certainly welcome if someone wants to tackle it.)

8 Likes

i run this code

posts = Post.where(‘raw LIKE ?’, ‘%

%’)
posts.each do |p|
p.update!(raw: p.raw.gsub(/
(.*?)</div>/m, ‘[grid]\1[/grid]’))
p.rebake!
end

but have eror

i deleted symbol (’ and type again but not succesfull
Can you find the error?
thank you!

3 Likes

Hi Sora, you need to enter the Rails console first: rails c

3 Likes

Can we setup default all images upload that they will automatically arranged into a nice grid?

3 Likes

I don’t know if this is intended behaviour, but if you add images to a grid that are below the lightbox max image width/height settings then they are displayed in reduced size but with no way (*) to expand them to their original size.

For example, I created a grid with 11 uploaded images. Eight were 640x480, so below the default image width/height for lightboxing of 690x500 and the other three were 1200x372, 750x521 and 750x509. The last three were lightboxed (class=lightbox-wrapper). The first eight were class=image-wrapper, so were only displayed as approx 300x250 and couldn’t be expanded to see them in their original larger size.

(*) This behaviour can be changed by reducing the max image width/height settings, but that then affects all other images in the forum.

I think it would be better if all the images in a grid were automatically lightboxed or alternatively have different settings to the main image lightboxing setttings.

1 Like