Fliesen Bildergalerie

[Johani (Joe)]

Diese Komponente ist veraltet. Discourse verfügt nun über eine integrierte Funktion für Kachelgalerien:

Introducing image grids in posts

If you have many images in a Discourse post, you can now have them automatically arranged into a nice grid. All you need to do is wrap them in [grid] ... [/grid] tags, and the images will be neatly arranged. This is a core feature as of this commit, enabled on all Discourse instances. Here’s an example in action: [neom from unsplash] [neom from unsplash] [neom-qGH25zv5xMk-unsplash] [shana-van-roosbroek-TPGWt6sjMUM-unsplash] [zhenyu-luo-plM1TJcQT-8-unsplash] [oskar-kadaksoo-1ukY0AG4pIA-u…

---

Responsive Kachelgalerien!

---

Entwickelt mit den Open-Source-Bibliotheken Masonry und ImagesLoaded von David Desandro – MIT-Lizenz

„ … veröffentlicht unter der MIT-Lizenz. Viel Spaß damit."

---

#### Wie verwende ich das?

Diese Komponente fügt dem Composer eine Schaltfläche hinzu.

Alles, was Sie tun müssen, ist:

1- Laden Sie mehrere Bilder mit der Standard-Discourse-Upload-Schaltfläche hoch und markieren Sie den Code:

2- Klicken Sie auf die Gallerieschaltfläche.

Sie erhalten eine statische Vorschau der ausgewählten Bilder im Vorschaubereich:

Fertig!

---

Gibt es noch etwas, das ich wissen muss?

Diese Komponente enthält keine Farb- oder Hintergrundstile. Sie übernimmt die Stile des aktuellen Themes.

Hier läuft die Theme-Komponente in einem anderen Theme:

Diese Theme-Komponente behält zudem das Standard-Discourse-Lightbox-Verhalten bei. Das bedeutet, dass beim Klicken auf eines der Bilder diese im nativen Lightbox-Viewer geöffnet werden.

Kann ich Slick und Tiles gleichzeitig verwenden?

Das können Sie aber!

Dies ist möglich, indem sowohl Slick als auch Tiles als Komponenten eines Themes konfiguriert werden.

So etwa:

Anschließend können Sie „mein Theme" aus dem obigen Beispiel als Standard-Theme festlegen oder es zur Auswahl durch den Benutzer stellen; in beiden Fällen wären sowohl Slick als auch Tiles enthalten.

---

Ein großes Dankeschön an alle, die auf dem Weg geholfen haben:

@dax - Composer-Schaltfläche
@cpradio - Übersetzungen der Schaltflächen
@Mittineague - ajaxComplete-Handler
@simon - api.onPageChange-Handler
@vinothkannans - Regex für Topic-Seiten-URLs
@sam - Hinzufügen von data-theme-* zu den freigegebenen Attributen

---

Fehlerberichte / Vorschläge / PRs sind willkommen.

	Repository	github.com/discourse/Discourse-Tiles-Image-Gallery
	Neu bei Discourse-Themes?	Anfängerleitfaden zur Verwendung von Discourse-Themes

Dieses Theme-Komponente installieren

[kaefert]

You demonstrated that both Slick & Tiles theme can be used at the same time, but did not explain how. Could you please? (explain how)

[Johani (Joe)]

That’s a very good point @kaefert thank you for bringing it up
I will edit both the Slick and Tiles topics and clarify what I meant.

In the meantime, to answer your question:

Tile and Slick act independently. What I meant to say here:

@lll

Can I use both Slick and Tiles at the same time?
You better believe it!

is that there is no conflict between Tiles and Slick. If you want to use both Tiles and Slick at the same time, you can! You just have to install both of them, separately.

If you install both of the same time, you get something like this in the composer:

And if you use both of them in a topic/post you end up with something like this:

[kaefert]

The problem I have about activating both at the same time is that I only can set one as default in the admin settings, and can only select one of them in the user settings.

[Johani (Joe)]

@kaefert

The problem I have about activating both at the same time is that I only can set one as default in the admin settings, and can only select one of them in the user settings.

I understand

What you want you do is make Slick and Tiles components of your current theme instead of them being user-selectable themes.

Like this:

You can then make “my theme” in the example above the default theme or make it user-selectable and it would include both Slick and Tiles.

[savas (Mindaugas Bartusevičius)]

Bugs*

[Johani (Joe)]

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?

[savas (Mindaugas Bartusevičius)]

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

[Johani (Joe)]

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

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

[kaefert]

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

[Johani (Joe)]

Hi @kaefert, @vchrizz and thank you for reporting

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.

[kaefert]

@lll

Are you still facing the same problem?

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

Thanks for your help!

[LKNickname (Lars)]

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.

[LKNickname (Lars)]

(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?

[Johani (Joe)]

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

[LKNickname (Lars)]

[Johani (Joe)]

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

[LKNickname (Lars)]

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

[Johani (Joe)]

Ok, try it again one last time . 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:

Slick Image Gallery

There was a small update today that fixes the translation error for good! If you’re on beta 7 and face any errors, please update the theme.

[LKNickname (Lars)]

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