Tiles Image Gallery

Bugs*

Thanks for reporting @savas

Can you share a little bit more details? The reason why I’m asking is because that looks like a onebox. This theme component only applies styles to images within very specific structure like so

.tiles-initialized {
 // all styles are applied here
}

So it should not have any effect on oneboxes at all.

Does the issue still occur if you disable the the theme temporarily?

2 Likes

i got installed facebook onebox plugin can he mess your plugin ?

1- The Facebook onebox plugin is not supported anymore, you don’t need it.
2- No, there should not be any conflict between the two. Tiles only targets specific images but you have to use the button in the composer to make it work

image

If you’re not sure, check the OP again and let me know if you need more help.

4 Likes

Both the Slick theme component and this one don’t seem to work after upgrading discourse to 2.0.0.beta5. JS Error messages for this one:

I18n.translations.en.js.composer is undefined
@https://discourse-instance/:104:2
O@https://discourse-instance/assets/application-d85c1a58a506702e3c09017c9d92a23100e1ec3c2a620a10440601587bf2d226.js:13:23523
initialize@https://discourse-instance/assets/application-d85c1a58a506702e3c09017c9d92a23100e1ec3c2a620a10440601587bf2d226.js:6:8870
runInstanceInitializers/<@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:8:23844
n</e.prototype.each@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:8:8774
n</e.prototype.topsort@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:8:8272
t</e.prototype.topsort@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:8:7670
_runInitializer@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:8:24023
runInstanceInitializers@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:8:23786
_bootSync@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:8:11232
didBecomeReady@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:8:17098
invokeWithOnError@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:7:19387
flush@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:7:19832
flush@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:7:20592
end@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:7:20937
run@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:7:22006
join@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:7:22126
u.join@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:13:3164
u.bind/<@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:13:3370
p@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:2:9019
o/</f<@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:2:9324
1 Like

Hi @kaefert, @vchrizz and thank you for reporting :sunflower:

My apologies for not getting to you earlier.

the good news is that I have just tested on v2.0.0.beta5 +120 and both Slick and Tiles seem to be working.

My guess is that subsequent commits to Discourse addressed the issue.

Are you still facing the same problem?

Even better news is that I tinkered a little bit with both Slick and Tiles and they now have much more targeted firing methods that will only fire when needed. Credit here goes to @vinothkannans for the awesome tip.

So if you’re using either Slick or Tiles or both, please update now and let me know if the problem is still there, or if there are any other issues that need to be addressed.

10 Likes

I just upgraded our Discourse instance to the latest commit and reinstalled the two themes components. Everything works again as it worked with beta4! :slight_smile:

Thanks for your help!

3 Likes

I am facing a Problem on beta 2.0.7.
I imported the Theme and configured it as a Child-Theme for my standard “Dark”-Theme.

2018-04-25%2012_01_21-Administration%20-%20Kneipentruppe%20-%20Forum

(Had to split the post because I cannot include more than one image in my posts)

However I just get a blank Screen…any ideas on that?

@Lars Can you check if there are any errors in the browser console?

2 Likes

1 Like

Ok, thank you. Can you update the theme and check again?

1 Like

Did an Update and refreshed (cleared cache).
Seems to be the same error.

2 Likes

Ok, try it again one last time :sunflower:. If that does not work I’ll take a deeper look at this and fix it within the next couple of hours.


After the fact edit

Crosspost:

6 Likes

That did the trick, thank you very much for the quick help :slight_smile:

5 Likes

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.