Tiles Image Gallery

I’m attempting to create a post with a tiles div in its contents. After creating the post with 7 images, the following is the HTML generated.

<div data-theme-tiles="1" style="position: relative; height: 0px;" class="tiles-initialized">

The 0px height, obviously, causes the element to be hidden. Any thoughts why it might be generating this way and/or what the appropriate fix is?

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.

1 Like

What do you see here?

your.site.com/sidekiq

Sidekiq Screenshot

The scheduled task is a pin.

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.

Great theme! How can I translate strings? (I am french)

Also I did some test and it’s not working…

1 Like

Noted. First,

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.

Please update the theme and let me know if the issues persist :ok_hand:

3 Likes

Discourse is up to date and the two themes (tiles and grid) are up to date

Tiles%20up%20to%20dateSlick%20up%20to%20date

Themes are in my main theme

2%20the%CC%80mes

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

You can see already that the preview at right is not good. When I click save, this is what I see

TILES was working after maybe 10-20 seconds of waiting. But GRID only works if I click again on modify. Weird no?

So at the end, it works. But

  • Both don’t work in the preview
  • Tiles works after 10 seconds
  • Grid works only if I click on modify and save again
1 Like

Thank you for the detailed information @Francois_Douville :sunflower:

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 static preview looks like this:

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.

5 Likes

Works perfectly, thanks very much!

EDIT : after some posting, it’s not working well…

I put 6 images. You can see that 5 appears and one was not visible.

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…

The image that’s causing the problem is too small.

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.

8 Likes

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


image

1 Like

@adopilot You know you have to click that checkbox that says “Theme includes other child themes” before you can select a Theme Component, yes?

2 Likes

image
Do not know why , But I do not see custom components.
I’ll try rebuild app and see will it show

Do you see them up on the left side? Can you choose them as themes?

This is what happens when I use the plugin. The theme is up to date.

@adopilot

Just because you said you’re going to rebuild the app, I’m guessing you installed this theme like you install plugins. It won’t work that way.

To install a theme you need to follow this guide:
How do I install a Theme or Theme Component?


@Francois_Douville

Can you upload the same images here so I can test please? :sunflower:

2 Likes

No problem!

Images

poulailler%205

poulailler%204

1 Like

Thank you for uploading the images @Francois_Douville :sunflower:

The problem here is still the same.

It’s a combination the size of the images you’re using and your Discourse settings.

If an image is not big enough (height and/or width) to exceed the default settings in your Discourse install, no lightbox view will be created for it.

The default settings look like this:

What this means is - unless you change the default settings

If an image has a width that exceeds 690px, a lightbox view will be created for it.

and…

If an image has a height of 500px or more, a lightbox will be created for it.

Images smaller than that will not have any lightbox views created for them.

Tiles and Slick only work for images that have lightboxes (read: large images)

So you have two options to make this work.

  • Decrease the height / width settings in your Discourse install, so that smaller images also get lightboxes

  • Or use larger images

9 Likes

Perfect, I understand now!! I decreased to have smaller images to get lightboxes!

3 Likes