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]
[/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]
[/grid]
Here’s an even more complex method to make the external images clickable to see the full sized version:
[grid]
[](https://github.com/KDE/plasma-workspace-wallpapers/blob/master/IceCold/contents/images/5120x2880.png?raw=true)
[](https://getwallpapers.com/wallpaper/full/b/5/f/563687.jpg)
[](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 
… 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.
7 Likes
i just made a theme component that adds image alignment and grid buttons to the composer toolbar
10 Likes
That definitely sounds like a bug!
1 Like
Beautiful. Unfortunately neither available via email nor in published pages. 
2 Likes
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.
4 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.
7 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?
4 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.
3 Likes
Are they’re any plans for images in grids to be replicated in emails?
3 Likes
Not at this time, no. To be quite honest, CSS in emails is still a major headache. Email clients vary widely between each other, and it’s super hard to get anything consistent rendered.
5 Likes
Fully understood, thanks for the confirmation 
3 Likes
Ugly, but could work: send only one composed image for a grid.
For enhanced user experience, it could be linked to the appropriate grid on the live site.
1 Like