Wenn Sie viele Bilder in einem Discourse-Beitrag haben, können diese jetzt automatisch in einem schönen Raster angeordnet werden. Alles, was Sie tun müssen, ist, sie in [grid] ... [/grid]-Tags einzuschließen, und die Bilder werden ordentlich angeordnet. Dies ist eine Kernfunktion seit diesem Commit und auf allen Discourse-Instanzen aktiviert.
Diese Funktion ähnelt einigen Theme-Komponenten (Masonry Image Gallery, Tiles Image Gallery). Der Hauptunterschied besteht darin, dass die Anordnung der Bilder im Raster sowohl am oberen als auch am unteren Rand des Elements ausgerichtet wird. Einige zusätzliche technische Hinweise:
Auf Mobilgeräten hat das Raster standardmäßig 2 Spalten, auf Desktops 3.
Wenn sich genau 4 Elemente im Raster befinden, werden die Bilder in 2 Spalten angeordnet.
Nicht-Bild-Elemente (wie Videos) können ebenfalls verwendet werden, aber die Ergebnisse werden nicht perfekt ausgerichtet sein.
Die Elemente im Raster werden so angeordnet, dass die Spaltenhöhen möglichst nah beieinander liegen. Daher wird die Reihenfolge der Bilder nicht immer beibehalten.
Das Aktivieren oder Deaktivieren des Rasters kann auch durch Klicken auf ein kleines Umschalt-Symbol neben dem ersten Bild in einer Gruppe von Bildern in der Vorschau des Komponisten erfolgen:
Gute Frage. Diese neue Kernfunktion ist nicht mit der Masonry Image Gallery Theme Component unvereinbar, d. h. beide können nicht gleichzeitig funktionieren.
Wenn Sie Beiträge vom Masonry-Galerie-Ansatz auf den neuen Kern-Ansatz migrieren möchten, müssen Sie ein Skript ausführen, das die raw-Inhalte von Beiträgen von
Korrekt, es sollte keine Auswirkungen haben. Ich glaube, das erste Bild, das in dem Beitrag gefunden wird, wird als Miniaturansicht ausgewählt (mit Ausnahme von Avataren, Emojis und dergleichen). Außerdem kann ich mir kein Szenario vorstellen, in dem das erste hochgeladene Bild nicht das erste Bild im Raster ist (die Neuanordnung kann nur für spätere Bilder in der Liste erfolgen).
Hmm, ja, im Composer funktioniert dies derzeit auch nur mit Uploads. (D. h. das Einfügen einer URL zu einem Bild und das Einpacken in [grid]-Tags funktioniert im Composer auch nicht.)
Leider nein, das funktioniert nicht mit veröffentlichten Seiten. Ähnliche Javascript-gesteuerte Beitragsfunktionen funktionieren ebenfalls nicht mit veröffentlichten Seiten (Lightboxen, Umfragen, Inhaltsverzeichnisse).
Das sollte funktionieren. Sichern Sie natürlich alles und achten Sie sorgfältig auf unerwünschte Ergebnisse in den vorherigen Masonry-Posts…
posts = Post.where('raw LIKE ?', '%<div>data-masonry-gallery</div>%')
posts.each do |p|
p.update!(raw: p.raw.gsub(/<div>data-masonry-gallery</div>(.*?<\/div>)/m, '[grid]\1[/grid]'))
p.rebake!
end
Mit der Einstellung „Automatisch aktiviert“. Dies enthält nicht <div> data-masonry-gallery</div> im Rohformat, sodass das Skript meiner Meinung nach nicht funktioniert. Aber in diesem Fall gibt es keine Konflikte.
Gibt es Pläne, die Raster automatisch zu machen? Wenn dies geschieht, kann ich die Beiträge einfach neu backen und das Rasterlayout beibehalten. Bis dahin denke ich, dass ich den Raster-Button ausblenden und die Themenkomponente sicher verwenden kann.
Hat jemand in CDCK Einfluss auf die Chrome-Entwickler? CSS Masonry-Unterstützung für Grid?
Masonry sollte bereits eine CSS-Sache sein. Es ist eines der wenigen Layouts, das es Ihnen ermöglicht, verschiedene Seitenverhältnisse von Sammlungen von Bildern (oder tatsächlich beliebigen Inhaltselementen) auf schöne Weise zu berücksichtigen.
Es ist so verschwenderisch und sinnlos, dies überall als JavaScript laufen zu lassen …
Ich freue mich über die Unterstützung von Masonry durch Safari, sie haben eine bessere Erfolgsbilanz bei der Überführung von Funktionen von Entwurf –> experimentell –> vollständig unterstützt. Die Masonry-Unterstützung von Firefox ist seit über 2 Jahren hinter einem Flag. Die Unterstützung durch Safari wird wahrscheinlich der Haupttreiber dafür sein, dass Chrome mithält.
Ja, aber nicht ohne [grid]-Tags. Bilder automatisch in ein Grid umzuwandeln, ohne Tags, würde die CommonMark-Spezifikation verletzen, und wir möchten das sehr vermeiden. (In meinem ersten internen Entwurf dieser Funktion habe ich mit einem automatischen Grid begonnen.)
Stattdessen denke ich, dass der nächste Schritt darin bestehen könnte, dass wir die [grid]-Wrapper automatisch zu Uploads von mehreren Bildern hinzufügen, wahrscheinlich 3 oder mehr Uploads. Dies wäre besonders nützlich für mobile Uploads, da das manuelle Hinzufügen von Tags auf Mobilgeräten umständlich ist und die Wahrscheinlichkeit groß ist, dass, wenn Sie 3 oder mehr Bilder gleichzeitig von Ihrem Telefon hochladen, es sich um Fotos handelt und vernünftige Kandidaten für ein Grid-Layout sind.
Wir haben noch keine Pläne, wann wir dies hinzufügen werden, aber es ist sicherlich etwas, das wir tun möchten.
Es sollte jedoch möglich sein, das statische HTML aus dem JavaScript zu generieren und den “gekochten” DOM zu veröffentlichen, um eine Reihe nützlicher Funktionen wie dieses Raster und das Inhaltsverzeichnis zu ermöglichen.
Das gerenderte HTML allein reicht nicht aus. Das Grid, das Inhaltsverzeichnis und ähnliche Funktionen benötigen auch das JS, das mit dem HTML interagiert, um diese Funktion zu erstellen. Und dieses JS befindet sich in der Ember-App, es kann nicht einfach für die nicht von Ember veröffentlichten Seiten extrahiert werden.
Ich habe gestern damit herumgespielt und mir wurde empfohlen, mein Feedback und meine Gedanken hier in diesem Thread weiterzugeben…
Ich mag es, dass es „automagisch“ ist, da es selbst ein Raster festlegt.
Es wäre eine schöne Zusatzfunktion, die Bilder zu sortieren, ohne sie in der Liste kopieren und einfügen zu müssen – vielleicht einfach Zahlen am Anfang jedes Bildes hinzufügen?
Mir gefällt, dass man das Raster in der Vorschau einfach ausblenden kann, aber um es wieder einzublenden, muss man den Code erneut hinzufügen. Dies scheint ein Bereich für eine verbesserte Erfahrung zu sein, bei dem das Raster-Symbol erscheint, wenn mehr als ein Bild hinzugefügt wurde, um es nach Bedarf ein- und ausschalten zu können.
Eine letzte mögliche zukünftige Funktion wäre die Möglichkeit, ein bestimmtes Bild auszuwählen, um es im Raster hervorzuheben oder zu präsentieren, sodass es größer als andere erscheint oder auf irgendeine Weise hervorsticht.
Alles in allem aber eine großartige neue Option, um mehrere Bilder hinzuzufügen, ohne dass die Bilder einen Beitrag dominieren
dieses Problem:
CSS Masonry-Unterstützung jetzt für Chrome und Edge!