Introducing image grids in posts

[pfaffman (Jay Pfaffman)]

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

[merefield (Robert)]

@Samantha_O

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.

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);
  }
}

[rahim123]

@pmusaraj

(I.e. pasting a URL to an image and wrapping it in [grid] tags doesn’t work in the composer either.)

[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.

[Paracelsus]

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.

[Lilly]

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

Image Alignment and Grid

Summary Adds image grid and alignment buttons to composer toolbar Repository https://github.com/Lillinator/image-alignment Install Guide How to install a theme or theme component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component This theme component inserts buttons on the post composer toolbar to align uploaded images with text left or right, in center of post, …

[hello-smile6 (9pfs)]

@rahim123

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.

That definitely sounds like a bug!

[thoka (Thomas Kalka)]

Beautiful. Unfortunately neither available via email nor in published pages.

[rahim123]

@hello-smile6

@rahim123

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.

That definitely sounds like a bug!

Yep, I filed a separate bug report:

Code block image link gets modified when hotlinked image is downloaded

It happens when using the  Markdown convention in a code block and then using the same code outside of the code block to actually display the image. It happens after about 5 minutes once Discourse downloads the hotlinked image.  [image] Original: [image]

[Canapin (Coin-coin le Canapin)]

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.

[cogdog (Alan Levine)]

This works elegantly! I just did a demo

Grids of Images

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.

[jrgong]

@pmusaraj

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.)

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

[pmusaraj (Penar Musaraj)]

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.

@pmusaraj

…we could automatically add the [grid] wrappers to uploads of multiple images, probably 3+ uploads.

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.)

[huynhthai824 (Sora &\)]

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!

[Arkshine]

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

[huynhthai824 (Sora &\)]

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

[packman (Chris McMahon)]

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.