Mauerwerks-Bildergalerie

[Heddson]

Diese Funktion ist jetzt in Discourse Core integriert. Siehe die Ankündigung zu Bildraster in Discourse.

Dieses Theme-Modul fügt eine responsive Mosaik-artige Bildergalerie mit anpassbarer Reihenfolge hinzu.

Desktop-Ansicht:

Mobile Ansicht:

Beim Klicken auf ein Bild wird es mit dem standardmäßigen Lightbox-Viewer geöffnet.

Sie fügen die Galerie hinzu, indem Sie auf das Rastersymbol klicken und dann Ihre Bilder hinzufügen. Es funktioniert auch, wenn Sie zuerst die hochgeladenen Bilder auswählen und dann auf das Symbol klicken.

→ Was meinen Sie mit anpassbarer Reihenfolge?

Die Bilder können horizontal (von links nach rechts) oder vertikal angeordnet werden. Die horizontale Anordnung ist ideal für Bilder aus Zeitschriften, Comics oder ähnlichem. Außerdem wird beim Klicken auf „Weiter" im Lightbox-Modus das richtige Bild angezeigt.

Die folgenden Bilder veranschaulichen den Unterschied. Das rechte Bild hat eine horizontale Anordnung.

Die Standardreihenfolge ist horizontal, kann aber in den Einstellungen geändert werden. Es ist auch möglich, die Reihenfolge einer bestimmten Galerie zu ändern, indem Sie vertical/horizontal (auch v/h funktioniert) zum Attribut im Editor hinzufügen, wie in diesem Beispiel: <div data-masonry-gallery="vertical">.

→ Dieses Modul sieht Joe’s Tiles image gallery sehr ähnlich. Ist das ein Klon oder was?

Ich verwende Tiles seit einiger Zeit und mag es sehr. Ja, man könnte definitiv sagen, dass es stark davon beeinflusst ist . Allerdings gibt es viele Unterschiede, weshalb ich beschlossen habe, es zu teilen. Nachfolgend finden Sie eine Liste einiger der Unterschiede.

• Keine Abhängigkeiten.
• Kein jQuery.
• Horizontale Anordnung.
• Kleine Bilder brechen das Layout nicht.
• Korrekte Vorschau beim Bearbeiten.
• Es ist möglich, beim Hinzufügen einer Galerie mehrere Zeilen mit Zeilenumbrüchen auszuwählen.
• Verwendung der API-Funktion decorateCookedElement anstelle von decorateCooked.

Vorschläge und Verbesserungen sind willkommen!

Kleine Bilder werden in der Galerie angezeigt, aber es wird keine Lightbox-Ansicht erstellt. Dies ist das Standardverhalten von Discourse. Es ist jedoch möglich, zu definieren, was als kleines Bild gilt, indem Sie die Einstellungen max image width und max image height ändern. Die Standardwerte betragen 690 px bzw. 500 px.

Dieses Modul verwendet die API-Version 0.8.42. Wenn Sie seit Mai 2020 kein Update durchgeführt haben, müssen Sie ein Update durchführen, um es nutzen zu können.

	Vorschau		theme-creator.discourse.org
	Repository		discourse-masonry-image-gallery
	Installationsanleitung		So installieren Sie ein Theme oder ein Theme-Modul

[jrgong]

Tolle Komponente. Ich suche schon eine Weile nach einer Ersatzlösung für die Kachel-Bildergalerie!

Was hältst du davon, eine Option für eine automatische Galerie hinzuzufügen, die auf alle Bilder angewendet wird? Grundsätzlich würde die Mosaik-Galerieansicht automatisch aktiviert, sobald drei oder mehr Bilder aufeinanderfolgen, ohne dass andere Elemente dazwischen liegen. (Die Kachel-Bildergalerie hat in ihrem auto-tiles-Branch bereits etwas Ähnliches versucht.)

[Heddson]

Danke!

Ja, ich habe diesen Branch gesehen. Das ist wirklich eine interessante Funktion. Ich weiß nicht, ob die Umsetzung in Tiles bei diesem Komponent funktioniert oder ob zusätzlicher Code benötigt wird. Aber ich werde mir das definitiv ansehen!

[Heddson]

Wenn Sie Tiles auf Ihrer Website installiert haben und zu Masonry wechseln möchten, müssen Sie das Attribut der Galerie-Divs in data-masonry-gallery ändern, und zwar bei allen Ihren alten Galeriebeiträgen. Das gilt, falls Sie möchten, dass Ihre alten Galeriebeiträge weiterhin korrekt dargestellt werden, Sie aber nicht beide Komponenten installiert haben möchten.

Ich dachte, ich teile mit, wie Sie das tun können, da ich den Wechsel auf meiner eigenen Website vorgenommen habe. Vielleicht kann es jemandem von Nutzen sein.

Der offensichtlichste Weg wäre, die Beiträge manuell zu bearbeiten. Das funktioniert, solange Sie nicht zu viele Beiträge haben, die Sie ändern müssen, obwohl es dennoch mühsam sein kann, jeden einzelnen Beitrag zu finden. Aber keine Sorge, Data Explorer zur Rettung! Führen Sie das folgende SQL aus, und Sie erhalten genau das, was Sie benötigen.

SELECT user_id, topic_id, post_number
FROM posts p
WHERE raw ~~ '%data-theme-tiles%'

Wenn es zu viele sind, um sie manuell zu bearbeiten, könnten Sie rake verwenden, um jeden String zu ersetzen. Dafür müssen Sie sich per SSH auf Ihren Server einloggen und Folgendes ausführen:

cd /var/discourse
./launcher enter app
rake posts:remap["data-theme-tiles","data-masonry-gallery"]

Sie können mehr über diese Lösung in diesem Beitrag lesen. Bitte beachten Sie die Warnung aus diesem Beitrag zum Befehl rake posts:remap:

@techAPJ

WARNUNG

Wir dringend empfehlen Ihnen, vor dem Fortfahren ein vollständiges Backup zu erstellen, und stellen Sie sicher, dass Ihr String-Ersatz spezifisch genug ist, um nur die Stellen zu beeinflussen, die Sie ändern möchten. Wenn dieser String-Ersatz fehlschlägt, werden alle Beiträge auf Ihrer Website beschädigt aussehen!

Es gibt höchstwahrscheinlich auch andere Möglichkeiten, dies zu tun. Wenn Sie möchten, könnten Sie beispielsweise den Code der Komponenten so ändern, dass er nach beiden Attributen sucht.

[Zup]

Hervorragende Arbeit. Danke.

[bartv (Bart)]

@jrgong

Sobald drei oder mehr Elemente ohne andere dazwischen vorhanden sind, wird die Mauerwerk-Galerieansicht automatisch aktiviert.

Das wäre großartig und viel benutzerfreundlicher! Gibt es dazu bereits Pläne?

[Heddson]

Diese Funktion ist so gut wie fertig. Ich habe den Code von Tiles angepasst, muss aber noch einige weitere Tests durchführen (mit verschiedenen Szenarien/Seitenanpassungen). Ich werde versuchen, bald Zeit dafür zu finden, aber es sollte innerhalb einer Woche hinzugefügt werden. Wenn ich doch nur mehr Zeit hätte .

[bartv (Bart)]

Fantastisch, danke! Wir freuen uns darauf

[lhkjacky (Jacky)]

Vielen Dank für die Erstellung eines großartigen TC.

Jetzt kann ich den problematischen „Tiles Image Gallery

[Heddson]

@lhkjacky

@Heddson
Bin nur neugierig: Hast du vor, eine ähnliche TC zu erstellen, um auch " Slick Image Gallery " zu ersetzen?

Ich habe aktuell keine Pläne dafür. Vielleicht später, wenn ich Zeit habe. Falls es sich um eine kleine Korrektur handelt, könnte ich eventuell einen Pull-Request einreichen.

[bartv (Bart)]

Hey, hast du vielleicht Zeit, um am ‚automatischen Modus’ zu arbeiten?

[Heddson]

Ich habe die Komponente gerade um die automatische Galerie-Funktion aktualisiert. Nach dem Update kannst du sie in den Einstellungen aktivieren.

Du kannst Kategorien angeben und auch die Mindestanzahl an Bildern festlegen, die erforderlich sind, damit eine Galerie automatisch erstellt wird (ohne weitere Elemente oder leere Zeilen dazwischen).

[bartv (Bart)]

Toll, ich werde das gleich ausprobieren!

[Heddson]

Lass mich wissen, falls du etwas Seltsames findest!

[daemon (Alex)]

Funktioniert einwandfrei!

[UndecidedAdmin]

Ich wollte nur sagen, dass dies sofort aus der Box perfekt funktioniert. Ich hatte mit den beiden anderen erwähnten Komponenten Probleme, also ist das fantastisch.

[Heddson]

Das ist großartig zu hören!

Ich habe zudem das div-Attribut grid (oder g) für ein Raster-Layout hinzugefügt (trotz des Namens der Komponente ), das jede Zeile auf eine feste Höhe (entsprechend der höchsten Bildzeile) einstellt. Das könnte nützlich sein, wenn Sie Bilder mit nahezu gleicher Höhe verwenden.

[jrgong]

@Heddson

Wir testen derzeit 2.8 Stable. Die Funktion auto enabled categories wird nicht ausgelöst, wenn eine bestimmte Kategorie definiert ist. Wir haben versucht, den Kategorie-Slug und die Kategorie-ID hinzuzufügen. Wenn auto enabled categories leer gelassen wird, funktioniert es.

[Heddson]

Das ist seltsam. Es funktioniert auf meiner 2.9.0.beta1 und das ist so ziemlich dasselbe wie 2.8 stable. Der Kategoriename sollte hinzugefügt werden. Aber ich werde sehen, ob ich etwas finden kann.

Danke für die Info!

[jrgong]

Schon gut, ich habe vergessen, das Kontrollkästchen zu aktivieren