Introducing image grids in posts

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.

4 Likes

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

5 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!

2 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?