Great!
But please note that decreasing the size in the setting also limits max-size for image in posts.
For example,
If you set the max width to 300px, images larger than 300px will get lightboxes but at the same time, the max width for image in posts will be 300px regardless of whether you use Tiles / Slick or not.
Yeah I understand. I set it to 590px width and 400px height
But what’s the bad thing about lightbox?
Hi, That’s amazing but I think we need multi files uploader now 
There’s nothing bad about lightboxes here. What you want to avoid is having small images in a grid that you cannot enlarge.
Here’s an example:
These are two of your images that are not big enough to have lighboxes by default in Discourse.
Without putting them in a grid, they look ok and you can see everything, but if you add them to a Tiles grid
!
You can see that they’re not big enough to see all the details, and because no lightboxs are generated for them, you cannot enlarge the images by clicking on them.
Now, if you compare those to these other images (which are big enough for Discourse to create lightboxes for them)
You’ll notice that the images above are still small, but you can click on them and they will be enlarged in a lightbox view.
That’s why Tiles ignore images that have no lightboxes. The assumption is that if you want to use images in a gallery, they’re probably large.
I’m not sure I follow, multi-file upload should already be possible. Use the native Discourse file uploader - which supports multi-file selection - and then highlight the code and click the gallery button. Check the op and let me know if you need more help.
It took me a while to understand it myself, so I will post what I understood:
If you set the maximum thumbnail width & height to a quite small value, any image posted outside of a tiles / slick addon element will get resized to a quite small preview thumbnail and will only be visible in it’s normal size after clicking on it.
That might be considered a bad thing ™ because it requires every reader of posts with images to click on every image before he can see it in a reasonable size.
I have resolved all issues at this time. (Sorry it has taken so long to get back to you. I had the end of my semester and I was thoroughly swamped.) There were no errors in the logs.
The New Topic Button Theme resolved automagically.
I was only able to resolve the issues with Tiles by restoring to a brand new Discourse instance. I had also upgraded from Ubuntu 16.04 to 18.04 within the past 25 days. (The site is now also behind an Nginx reverse proxy.)
At first a restore in the new instance did not resolve the issue. I was getting the Lightboxes but no Tiles. I attempted rebaking all posts from the command line and lost all of the tested lightboxes that had been created.
I restored again and rebuilt a couple of posts manually and the lightboxes created and Tiles then worked as well.
I am guessing something must have been screwy in the the posts, possibly due to a rebake I had run before, but I am not sure ultimately what was happening. In the end, I attributed the fix to the restore of the website in a new install of discourse.
Great theme component, my users love it
Question: Is there any way to set up a shortcode like [tile_gallery] ... [/tile_gallery]?
I see it as more user friendly compared to actual html tags.
Not at this time, no.
My users are struggling with the tile image gallery.
Whenever a list of images has line breaks in between each, the gallery button puts multiple divs - one around every single image. Anybody else having that issue?
Yes, but that’s not how it’s supposed to work. If you upload a group of images together, then there’s no line-breaks between them. I will definitely look into ways to prevent this from happening, but the best thing I can recommend now is to create a tutorial topic on your site if your users are having such a big problem with it.
I pushed updates to Tiles / Slick, so, please update the themes.
The update ensures that they work with the image LazyLoad theme which I recommend you use if your posts contain a lot of images.
I removed one dependency from Tiles and also added a setting to change the composer icon in both Slick and Tiles:
I think we can agree that desired user behavior often does not align with actual behavior.
Hi @Johani,
In a user’s profile preferences, /u/{username}/preferences/profile the toolbar icons for Slick Gallery and Grid Gallery appear in the “About me” editor, which I believe is supposed to be text-only, since there’s no “upload” icon available for images.
Hi,
This is awesome as it seems Discourse doesn’t have its own way to nicely display a lot of pictures.
However, I don’t want to decrease the max image size which is very fine by default and I can’t ask my users to be aware of their image size each time they want to post a gallery in order to prevent the overlap issue that was described twice in this topic. Would be nice if we could just force the lightbox on any image size.
Hi @Southpaw
Good catch! I’ve updated Slick and Tiles to remove the buttons from the About me editor. Thanks for reporting.
Fair enough. Let’s try this (rough idea for now but worth exploring)
max_image_width and max_image_height to 0.cooked img:not(.thumbnail):not(.emoji) {
width: unset;
max-width: 100% !important;
height: auto;
max-height: unset !important;
}
#reply-control .d-editor-preview img:not(.thumbnail):not(.emoji) {
width: unset;
max-width: 100% !important;
height: auto;
}
.mfp-bottom-bar {
min-width: 350px;
}
The good:
All images uploaded to posts will now have lightboxes. Even very tiny ones. So you can use them in Slick / Tiles
The bad:
While all images will display properly (no overflow) and maintain their original aspect ratios (no stretching / squeezing), really large images will not be resized (read: full file size). The image is properly sized in the post with CSS but will still be in full size. Depending on your usage, this can be a performance issue. The https://meta.discourse.org/t/lazyload-images/90472 theme component may come in handy here.
The ugly:
This requires old posts to be rebaked to take effect on them.
A new “major” update for this component is out, please update.
Key changes:
65% reduction in size
I moved away from the Masnory library and the component now uses colcade.js which is also written by David DeSandro - I also added waitForImages by Alexander Dickson - They are both released under the MIT license. The total gzipped size of the component is now just over 2.6kb.
No more http requests
Due to how lightweight everything is. I inlined all the scripts and this component now needs no http requests.
Pre-render the grid
Tiles will now pre-render the grid before images are loaded. This means the grid has a fixed height and each image knows its place before it loads and there won’t be any jumping around 
.
A pre-rendered grid looks like this:
and each image is gently faded into its slot when it’s done loading.
images are loaded sequentially and as soon as an image is done loading it shows up immediately.
This is not currently possible. What you can do is add the large image outside the gallery div like so:
and then add this CSS to a theme component
.lightbox-wrapper + p + .tiles-initialized {
margin-top: -.8em;
}
.tiles-initialized {
width: calc(100% + .5em);
left: -.25em;
position: relative;
}
and the result you get should look like this:
Is there any way to enable automatic generation of the tiles gallery? So that the user doesn’t have to put the tags around it (via button)? for example based on conditions like category and minimum amount of images…
Apologies, I must have missed your post.
In theory, this should be possible. Not long ago a very cool new feature was added to Discourse.
Theme branches 
https://github.com/discourse/discourse/commit/51aba32651c67a9cdf1c8ef08d7354f6e4466251
So this is a good use-case to experiment with theme branches. I created a new branch of the Tiles component called auto-tiles
Try to import the theme again using:
https://github.com/hnb-ku/Discourse-Tiles-image-gallery
except this time, add auto-tiles as the branch name when you import the component. It should import as a separate theme component and will not affect the current Tiles theme component that you have now. If you find that the new branch is not for you, just delete the new component and everything should be back to normal.
So, what is auto-tiles?
In a nutshell, it’s an experiment. I don’t recommend using this branch for reasons I’ll mention later.
The branch includes an additional setting. That setting allows you to set categories that Tiles should work on automatically.
So, how does it work?
If a post / topic is in one of the targeted categories, and it has two or more adjacent lightboxes, a gallery with those images will automatically be created. You don’t need to add the tags to the composer and if one of the conditions above is not met, nothing will happen.
So, why not add this feature to the master branch of Tiles?
Because of the preview in the composer. Without the tags to wrap around the images you want to target, it’s quite a task to find an efficient way to style the images in the composer preview - at least that’s how I feel about it now. They currently appear just like regular lightboxes (full width)
I don’t see myself working on that particular problem any time soon.
If you really, really want to have both automatic galleries and to have a proper preview of the gallery in the composer without the use of <div> tags, I suggest that you create a post in the #marketplace category. I’m sure that with enough time, one of the freelancers we have here on Meta might be able to solve the problem for you.
