height: 0px; is applied to the container before the images are loaded. This makes it not show up.
Once all images are loaded, that property is automatically removed. The reason for this is to prevent the layout from shifting around as the images load and are put into the grid.
How big are the images you’re using? Does Discourse generate lightboxes for them?
The pictures are relatively large (say 2500x2000) and fully uploaded. In the post, Discourse has resized them to 666x500px with width and height options added to the img element.
If I remove the tiles div, the images appear in the post but are not selectable (can’t click to enlarge the image). I would presume they are not being placed in the lightbox viewer.
The option create thumbnails in the Discourse Settings is enabled.
Version is 2.0.0.beta7 +37
Other elements in the post include several paragraphs of text, an image not in the tile element at the top of the post, a onebox’d video URL to YouTube, and footnotes.
Tested it on try.discourse.org and the image was placed in a lightbox without a problem. I tried running the site on safe-mode to see if the images would load in a lightbox, but no change.
I probed the CLI (the container and the host, which is Ubuntu 16.04 running Nginx which proxies to Discourse) and the admin interface for errors in the logs. All appears normal from the CLI in the Nginx and Discourse logs. The only recent errors in the Discourse Admin logs are related to the New Topic button theme component, which I have disabled whenever I am not trying to troubleshoot it.
I tried uploading the images again, as well as creating a new post; neither of which allow the images to be opened with a lightbox.
I’ll have a look at that theme. It should not produce any errors. It would help if you share them on that theme’s topic if you get a chance.
As for Tiles,
Could you please confirm if any lightboxes are created on your install at all? Like with different images in topics / replies. I mean outside of Tiles containers as well.
Does this occur with all images or is it only limited to a group of images?
When you upload a large image, Discourse creates a lightbox viewer for it. Tiles relies on that to work. In your case the lightboxes are not being created.
While you’re at it. Are you seeing any errors in the console?
I just updated the theme and I believe this should fix the problem your seeing. I also added a couple of settings that allow you change the title of the button as well as the placeholder text that appears in the composer.
Discourse is up to date and the two themes (tiles and grid) are up to date
Themes are in my main theme
I tried to add both images in my composer, this is what it loos like
Text 1
<div data-theme-tiles="1">
![jessica-fadel-479973-unsplash|333x500](upload://mo4B2IRNNRJXVixzp3c537as7Tr.jpg)![niv-rozenberg-356666-unsplash|690x459](upload://eKZDVgmEi3acqI9noFfRBpJH6h.jpg)![felix-russell-saw-609925-unsplash|690x460](upload://2lybMrgOPzwwFtzfwUIGoJBQFpB.jpg)![mirza-babar-baig-640530-unsplash|666x500](upload://lluKImEiNV7gLB9n8OC8BJD9phh.jpg)![le-tan-621060-unsplash|690x460](upload://7IfXZ0HyKuq7y7dh5bkZqV6BZgS.jpg)![etienne-bosiger-367964-unsplash|400x500](upload://8wf0qBQ3E1FL1t5gLDm96h51aco.jpg)![kyle-peyton-594168-unsplash|400x500](upload://b4tMlNKPUssgTflNcrsHVAkUQCn.jpg)![kyle-peyton-594168-unsplash|400x500](upload://b4tMlNKPUssgTflNcrsHVAkUQCn.jpg)
</div>
Text 2
<div data-theme-slick="1">
![jessica-fadel-479973-unsplash|333x500](upload://mo4B2IRNNRJXVixzp3c537as7Tr.jpg)![niv-rozenberg-356666-unsplash|690x459](upload://eKZDVgmEi3acqI9noFfRBpJH6h.jpg)![felix-russell-saw-609925-unsplash|690x460](upload://2lybMrgOPzwwFtzfwUIGoJBQFpB.jpg)![mirza-babar-baig-640530-unsplash|666x500](upload://lluKImEiNV7gLB9n8OC8BJD9phh.jpg)![le-tan-621060-unsplash|690x460](upload://7IfXZ0HyKuq7y7dh5bkZqV6BZgS.jpg)![etienne-bosiger-367964-unsplash|400x500](upload://8wf0qBQ3E1FL1t5gLDm96h51aco.jpg)![kyle-peyton-594168-unsplash|400x500](upload://b4tMlNKPUssgTflNcrsHVAkUQCn.jpg)
</div>
Text 3
Because there is a lot of overlap between Tiles and Slick and things can get confusing, I made two separate topics for them.
In this topic the focus is Tiles, but I’ll happily answer your questions about both here now.
This is intentional and is mentioned in the OP. The editor preview updates with every letter you type into the composer. Having the script to create either Slick or Tiles fire like that to keep the preview accurate is too much overhead.
My goal is to follow the model that Oneboxes have where they update only if they are modified. However, this remains a future improvement and not currently implemented.
The more I look at this, the more glaring the problem here appears to be.
Previously, Tiles would wait for all images to load before creating the grid. So the 10 seconds you referred to is Tiles waiting for the images to load. Internet speed aside, you’re right. +10 seconds of staring at nothing is no good.
So, I updated Tiles to address this. From now on, Tiles won’t wait for all images to load. It will orginize the grid every time a new image is done loading. There’s still room for improvements here and I’m open to suggestions but the wait time should be drastically reduced now since you, at least, have something to look at while things load.
This should not be happening. Please update the theme and let me know it the issue persists.
So I tried after the slick theme to see if it works. And the arrows were too high and the image that was not visible with Tiles was now always there even if I didn’t put it in my composer…
Discourse does not create lightboxs for small images and it doesn’t make much sense to use them in Tiles because they would be too small and you can’t enlarge them.
If you use larger images, there should be no problem.
Thanks a lot.
I did install theme and I get grid button.
But I can’t, see titles component.
There is no thmene component in editor also there is no titles componet in admin