dk_masonry

[kubjo]

Hi Leute,

ich würde gerne in einer Masonry - Galerie ein anderes CCS-Theme anlegen und statt des Standard-hell verwenden. Leider erschließt es sich mir nicht, wo die Original datei liegt, und wo ich die selbst erstellte einfügen kann, damit ich sie elegant via Dropdown auswählen kann.

Grüße
JK

[Kahmoon]

Die Themes liegen in system/modules/dk_masonry/assets/themes

Ich habe das Standard Theme einfach an den gewünschten Stellen im internen CSS Editor überschrieben in dem ich gleichnamige Klassen/IDs verwendet habe.

[kubjo]

Hi Kahmoon,

ich würde, wie gesagt, gerne ein eigenes Theme erzeugen, das ich im dafür vorgesehenen dropdown einfach auswählen kann. So könnte ich in verschiedenen Gallerien einfach und schnell verschiedene Stile zuweisen.
Ich habe inzwischen ein weiteres eigenes Verzeichnis im Verzeichnis "Theme" angelegt und dort ebenfalls ein Verzeichnis "css" angelegt, darin befindet sich eine umbenannte und leich modifizierte CSS-Datei. Leider erscheint diese neue Auswahlmöglichkeit im BE nicht :-(

Grüße
JK

[Kahmoon]

Hmm ja das weiss ich leider auch nicht. Sorry :/

Wie gesagt ich habe bei Theme einfach nichts ausgewählt und das alles über den internen Editor in einem eigenen CSS File gemacht. Das ist somit quasi mein Theme. Die Klassen hab ich mir aus dem Standard abgeguckt.

vg

[Dirch]

hmm konnte man nicht bei dem "Theme" auch sowas wie "externes" auswählen? Sobald man das wählt kann man über die Dateiauswahl ein beliebiges CSS-File wählen.

[kubjo]

Hi Dirch,

ja, das habe ich auch schon versucht, dabei habe ich einfach das ursprüngliche CSS genommen, in "Dunkel" umbenannt, in die Dateiverwaltung hochgeladen, und dann wie Du vorgeschlagen hast, dort ausgewählt.
Das Ergebnis ist, daß die Galerie genau so aussieht, wie wenn man kein CSS einbindet. Im Quellcode erscheint keine Verlinkung mit dem neuen CSS "dunkel", daher auch keine Änderungen ;-)
Was auch auf Anhieb nicht geklappt hat ist, die Spaltenbreit via CSS auf eine grid-Breite zu setzen, so daß die Bilder dann mit dem contao-grid schrumpfen könnten. Leider kann man den Bildern keine prozentuale Größe mitgeben, so daß sie sich den Grid-Spalten anpassen können. Ich stell mir bei der Galerie sowas wie bei smugmug vor, meinst Du das könnte man mit Deiner Erweiterung hinbekommen?

Grüße
JK

[Dirch]

kann sein, daß es da beim Upgrade auf 3.2 Kompatibilität zu nem Bug kam. Muß ich mir mal in Ruhe anschauen.

Klar kannst du auch eine Grid-Breite angeben als CSS-Klasse. Was du dann für angaben in der CSS-Klasse machst wird dann als Masonry-Grid benutzt. Schau mal auf www.atelier-st.de was mit der Erweiterung und Masonry möglich ist.

Viele Grüße...
...Dirk

[jenda]

Lieber Dirch,

ich finde deine Erweiterung toll. Ist es möglich, das auch in die Template von News (z.B. layout_latest) zu implementieren, um diese in Spalten mit unterschiedlicher Höhe untereinander darzustellen?

Update: ich habe es hinbekommen (siehe unten).

Man muss sich

1. eine neue globale Template von mod_newslist erstellen, in der man den ersten div-Umschlag löscht.
2. Danach kann die Erweiterung von Dirch auf die einzelnen News-Einträge zugreifen (um das Newsliste-Modul muss man den Masonry-Umschlag einfügen) und nicht nur auf den obersten div-Umschlag, wie es in der Originaltemplate mod_newslist der Fall ist.

[jenda]

Leider wird die erste Box in der nächsten Reihe doch nicht unter die erste obere Box links verschoben und sie bekommt statt keines Abstands von links überhaupt irgendwelchen Abstand. Wie kann das sein? Siehe hier.

[Dirch]

Hmm schaut doch ganz ok aus? Oder ich versteh dich nicht wirklich.

Du könntest mal die Version von Github (https://github.com/dklemmt/contao_dk_masonry) installieren. Wenn du dort den Master nimmst bekommst du die neuere Script-Versionen und ein paar Bugfixes. Vielleicht hilft es. Müßte die Version mal ins ER packen…

Viele Grüße…
…Dirk

PS: ansonsten wäre es grundsätzlich nicht schwierig die Erweiterung so zu erweitern, daß sie News automatisch in ein Masonry ausgeben kann. Habe nur aktuell nur sehr wenig Zeit.

[jenda]

Nachdem ich noch mehr Text in die rechte Box reingeschrieben habe, ist sie nicht mehr die kürzeste in der ersten Reihe, dadurch verschob sich die Box in der nächsten Reihe unter die linke Box in der obersten Reihe. Normalerweise sollte aber die nächste Reihe immer links anfangen, wenn ich die von links positionieren lasse, richtig?

Für die News muss man es nicht anpassen. Deswegen habe ich meine Lösung für alle anderen oben beschrieben. Damit geht es wunderbar.

[Dirch]

nicht ganz. Masonry baut das zwar von links aus auf, aber es ist ein horizontales Grid und die Elemente werden so einsortiert, daß sie möglichst wenig Fläche einnehmen. Da kann es schon vorkommen, daß Elemente aus der eigentlich nächsten Zeile nicht links gestartet werden, sondern unter das kürzeste Element der Zeile davor rutschen.

Genau habe ich es nicht mehr im Kopf, aber der Teufel steckt im Detail bei diesen Platzierungs-Algorithmen. Es gab von ihm glaub ich mal eine Übersicht wo die verschiedenen Stile verdeutlicht wurden. Isotope bringt da ja einige mehr mit.

[risingsunset]

Lieber Dirch,

ich finde deine Erweiterung toll. Ist es möglich, das auch in die Template von News (z.B. layout_latest) zu implementieren, um diese in Spalten mit unterschiedlicher Höhe untereinander darzustellen?

Update: ich habe es hinbekommen (siehe unten).

Man muss sich

1. eine neue globale Template von mod_newslist erstellen, in der man den ersten div-Umschlag löscht.
2. Danach kann die Erweiterung von Dirch auf die einzelnen News-Einträge zugreifen (um das Newsliste-Modul muss man den Masonry-Umschlag einfügen) und nicht nur auf den obersten div-Umschlag, wie es in der Originaltemplate mod_newslist der Fall ist.

Magst du deine Schritte nochmal genauer erklären?
In der mod_newslist steht kein div-container – meinst du vielleicht die news_latest?
Und wie fügst du den Masonry-Umschlag ein?

DANKE!

[Spooky]

In der mod_newslist steht kein div-container – meinst du vielleicht die news_latest?

In Contao 3.5 sieht das mod_newslist Template so aus:

<?php $this->extend('block_unsearchable'); ?>

<?php $this->block('content'); ?>

  <?php if (empty($this->articles)): ?>
    <p class="empty"><?= $this->empty ?></p>
  <?php else: ?>
    <?= implode('', $this->articles) ?>
    <?= $this->pagination ?>
  <?php endif; ?>

<?php $this->endblock(); ?>

Hier entfernst du alles, sodass nur mehr

<?= implode('', $this->articles) ?>

über bleibt.

Und wie fügst du den Masonry-Umschlag ein?

Das gibt es ganz normal als Inhaltselement. Anfang und Ende fügst du vor bzw. nach dem Newslist Modul ein.

[jenda]

Genau, wie das Spooky beschreibt. :-)

[risingsunset]

In Contao 3.5 sieht das mod_newslist Template so aus:

<?php $this->extend('block_unsearchable'); ?>

<?php $this->block('content'); ?>

  <?php if (empty($this->articles)): ?>
    <p class="empty"><?= $this->empty ?></p>
  <?php else: ?>
    <?= implode('', $this->articles) ?>
    <?= $this->pagination ?>
  <?php endif; ?>

<?php $this->endblock(); ?>

Hier entfernst du alles, sodass nur mehr

<?= implode('', $this->articles) ?>

über bleibt.


Das gibt es ganz normal als Inhaltselement. Anfang und Ende fügst du vor bzw. nach dem Newslist Modul ein.

Top! Danke!
Leider funktioniert es aber noch nicht ganz. Die Box in der zweiten Spalte ordnet sich nicht ganz links an…

[Spooky]

Leider funktioniert es aber noch nicht ganz. Die Box in der zweiten Spalte ordnet sich nicht ganz links an…

Das ist normal. Masonry ordnet (in den default Einstellungen zumindest) die Boxen an den frühest möglichen Positionen von oben nach unten an.