[dk_masonry] Bilder verlinken statt Großansicht (meta.txt)

Hallo zusammen,

ich tüftle schon ne ganze Weile mit Masonry rum. Durch das Modul dk_masonry wird alles super schön dargestellt. Danke an Dirch für dieses coole Modul!

Ich möchte allerdings die Bilder nicht in Großansicht öffnen sondern individuell auf eine Unterseite (später MetaModels) verlinken, auf der dann einige weitere Informationen zum Bild zu finden sind. In den Einstellungen der Masonry Galerie gibt es die Option "Großansicht/Neues Fenster". Leider ignoriert dieses Galerieelement mein meta.txt, womit ich jedem Bild eine eigene URL verpassen könnte. Sprich es geht nur Großansicht. Jemand ne Idee wie ich das lösen kann? Kann man dk_masonry im nächsten Update vielleicht um diese Funktion meta.txt erweitern? :-) :cool:

Gibt es sowas wie den Metaeditor für Contao 3?

Gruß
Frank

Hallo Frank,

in Contao 3 gibst du doch den Link bei jedem Bild exlizit in der Dateiverwaltung an.
Ich hab das jetzt noch nicht da explizit mit Masonry versucht, aber das wäre das erste, was ich testen würde.

Ich habe es eben getestet, das klappt :)

Und du kannst den Link auch in den Titel schreiben ;)

Oh man...ich lade Dateien immer per FTP hoch und war eigentlich fast nie in diesem Dialog!!

Danke für die Info. Werde ich sofort testen :)

Edit:
Funzt einwandfrei....sorry. Diese Änderung hatte ich echt nicht auf dem Schirm :)

ah d.h. alles ist fein? :D

Meine Erweiterung benutzt und erweitert lediglich die Core-Galerie in einem neuen CE was heißt, daß bis auf die Ausgabe der Rest ziemlich ähnlich/gleich ist. Will heißen was Core kann, kann auch die Masonry - Galerie oder eben nicht. =)

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

Ja alles fein...klassischer Self-Fail :D

P.S. noch eine Frage.

Unterschiedliche Bildgrößen löse ich per CSS? Wie ist es mit vertikalem Abstand? Auch per CSS?

Zitat:

---

Zitat von Kahmoon

Ja alles fein...klassischer Self-Fail :D

P.S. noch eine Frage.

Unterschiedliche Bildgrößen löse ich per CSS? Wie ist es mit vertikalem Abstand? Auch per CSS?

---

Ja vertikaler Abstand wird über CSS gemacht, horizontaler über den Spaltenabstand. Mein "Standard"-Theme ist auf 10px Abstand vertikal eingestellt. Du kannst das Überschreiben oder das Theme abwählen und/oder ein externes einbinden und entsprechend selbst gestalten. Wie man das Gestalten kann kannst du dir in der CSS-Datei zu dem Theme anschauen.

Nun das problematische: man soll/muß die Bild-Breiten über CSS definieren. Dadurch, daß es eine Galerie ist kann man leider keine individuellen Klassen den einzelnen Bildern vergeben um darüber die verschiedenen Breiten zu setzen. So hätte jedes Bild - egal wie Breit die gleiche Breite im CSS. Also muß man die Breitenangabe weglassen, was dann zu Layoutfehlern führt in dem Bilder teilweise übereinander liegen. Am besten du schaust dir das selbst an in dem du einfach mal die CSS-Größenangabe weg läßt.

Lösen geht das dann nur über einzeln platzierte Bild-Elemente zwischen Wrappern, aber die hab ich noch nicht eingebaut. Ist ja auch erst die erste Version... ;)

Ich hab das vor deinem Modul via Template gemacht und mittels PHP random "dynamisch" 3 Klassen zugewiesen und zeitgleich entsprechende Bildgrößen erzeugt. Auf diesem Wege dürfte das mit den Klassen pro Bild eigentlich kein Problem sein.

PHP-Code:

---

<?php foreach ($this->body as $class=>$row): ?>

    <?php foreach ($row as $col): ?>
    
    <?php if (!$col->addImage): ?>
    
    <?php else: ?>  
      
      <?php
        $rdm = rand(0,2);
           
        #Püfung Hochkant- Querformat
        if($col->width > $col->height)
        {        
            #print "Querformat";
            $breite = array(220, 440, 660);
            $hoehe = array(220, 320, 440);    
            
            $class = "q".$rdm;            
        }else{
            #print "Hochformat";
            $breite = array(210, 320, 440);            
            $hoehe = array(210, 440, 660);
            
            $class = "h".$rdm;    
        }
        
        #var_dump( $col);
    
        
        $strReturn = $this->generateImage($this->getImage($col->src, $breite[$rdm], $hoehe[$rdm], 'center_top'), $col->alt);
        // nun den Wert an ein Template übergeben.
        $this->Template->myFirstImage = $strReturn;
    
      ?>
      
      <figure class="image_container <?php echo $class; ?>"<?php if ($col->margin): ?> style="<?php echo $col->margin; ?>"<?php endif; ?>>
    <?php if ($col->href): ?>
        <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?>  title="<?php echo $col->alt; ?>">
    
           <?php  echo $this->Template->myFirstImage; ?>
    
            
            </a>
    <?php else: ?>
        <?php  echo $this->Template->myFirstImage; ?>
    <?php endif; ?>
    
      </figure>
      
    <?php endif; ?>
    <?php endforeach; ?>

<?php endforeach; ?>

---

Also quasi

PHP-Code:

---

<?php
    $rdm = rand(0,2);
    $masonry_class = "klasse_".$rdm;
?>

---

Code:

---

<figure class="image_container <?php echo $masonry_class; ?>"<?php if ($col->margin): ?> style="<?php echo $col->margin; ?>"<?php endif; ?>>

---

Jau so geht's! :D Die meisten verjagt man nur eher mit PHP-Programmierungen in Templates. :)

Is eher Quik & Dirty ;)

Hätte gerade noch mal eine Frage hierzu. Ich habe jetzt eine Bildbreite von 320px und 5px margin r/u via CSS angegeben. Da die Seite responsive ist, würde ich gerne im CSS mit dem Mediaquery für die kleinste Version diese Größe auf 140px stellen. Das ignoriert er dann aber leider.

Code:

---

.masonry_gallery {
    width:320px;
}

@media all and (max-width:767px)

.masonry_gallery {
    width:140px;
}

---

Das wird wahrscheinlich nicht gehen oder?

vg
Frank

Dem ersten wert auch ein mediaquery zuweisen? Oder dem 2. Wert ein !important zuweisen?

Important hats gelöst....aber das hatte ich meiner Meinung nach schon getestet. grrrr! :)

Danke

Hmm das verstehe ich nun aber gar nicht. Ist es nicht so bei CSS, daß die zuletzt definierte Anweisung alle vorherigen überschreibt? Warum muß dann dort ein !important hin? Wenn das mediaquery greift, sollte es doch die erste Definition überschreiben?

Edit:
Also...die 320px befinden sich in masonry.css. Das responsive-1sp-767 wird aber davor geladen. Deshalb braucht es bei mir wohl das !important;

Nachdem ich masonry.css nach oben geschoben habe, geht es auch ohne !important;

Zitat:

---

Zitat von Kahmoon

Edit:
Also...die 320px befinden sich in masonry.css. Das responsive-1sp-767 wird aber davor geladen. Deshalb braucht es bei mir wohl das !important;

Nachdem ich masonry.css nach oben geschoben habe, geht es auch ohne !important;

---

ahh - das erklärt es dann. Ich mußte erst überlegen, dann nachsehen um dann festzustellen, daß du ein externes masonry.css benutzt. In der Erweiterung habe ich nämlich auch ein masonry.css definiert und dachte schon, ob mir da etwas (die 320px Breite) reingerutscht ist was nicht rein sollte. :)

PS: schicke Seite :D Macht sich sehr gut - vor allem im Zusammenhang mit responsive.

Oh ja...ich hab das so benannt. Hab gar nicht gesehen das dein css File auch so heisst :-)

P.S. Testlink bitte aus dem Zitat entfernen (wäre nett). Ist noch nicht öffentlich das Ganze :)

vg

Einen Tip hab ich noch: die Klasse, die du als CSS-Klasse für das Grid angegeben hast, solltest du nicht masonry_gallery nennen. Diese Klasse wird ja für die einzelnen Elemente schon benutzt und dem Script als item-selector dafür mitgegeben. So scheint es dennoch zu funktionieren, aber Masonry benutzt sie so auch als Element und platziert es mit. Nenn sie besser: masonry_gallery_grid analog zu deiner Margin/Gutter-Klasse.

Wenn aber das Wort "grid" darin auftaucht pfuscht mir ein Selektor vom 16Grid rein.

Code:

---

*[class*="grid"] {
    float:none !important;
    display:block !important;
    width:auto !important;
}

---

Ich benenne es anders -> masonry_gallery_image

@Dirch
Ich hab leider bisschen Performanceprobleme bei mehr als 30 Bildern :-(. Und ich bin mir nicht sicher....aber irgendwie bremst das meinen kompletten Firefox wenn ich die Fotowall unberührt länger offen lasse. Ist hier noch ein JS aktiv? Laut Firebug eigentlich nicht....trotzdem seltsam?

Vor allem aber ist es ungünstig wenn es langsam lädt denn das Portfolio soll ja weiter wachsen :rolleyes::(.

vg

Zitat:

---

Zitat von Kahmoon

@Dirch
Ich hab leider bisschen Performanceprobleme bei mehr als 30 Bildern :-(. Und ich bin mir nicht sicher....aber irgendwie bremst das meinen kompletten Firefox wenn ich die Fotowall unberührt länger offen lasse. Ist hier noch ein JS aktiv? Laut Firebug eigentlich nicht....trotzdem seltsam?

Vor allem aber ist es ungünstig wenn es langsam lädt denn das Portfolio soll ja weiter wachsen :rolleyes::(.

vg

---

ja ich weiss. Habe deine PM gelesen. Bin aber erst gestern Abend aus dem Urlaub zurück gekommen und arbeite mich langsam durch die aufgelaufenen Sachen durch...

Beim Masonry werden 2 Scripte benutzt. Das Masonry selbst und das ImagesLoaded. Letzteres dient aber nur dazu entsprechende Ereignisse zu triggern, wenn die einzelnen Bilder komplett geladen wurden, um dann das Masonry zu aktualisieren. Das ist aber nur beim Laden aktiv. Ich schau es mal bei mir im FF an. Langsames Laden hat aber an sich nichts mit dem Script zu tun. Deine Seite lädt jetzt bei mir auch nicht so langsam. Allerdings habe ich kein Gefühl was für dich langsam oder schnell bedeutet - das ist ja eher subjektiv. :) Die beiden Scripts sind relativ neu in den Fassungen und sie wurden stark überarbeitet. Kann gut sein, daß da noch das eine oder andere fehlerhaft drin sein - gibt da noch einige offene issues. Leider gibt es keine neuere Version als diese, die ich integriert habe.

So eben mal im FF angeschaut. Geladen, mehrfach neu geladen. Am Anfang kommt es manchmal vor, daß man 2-3 Sekunden nur den schwarzen Hintergrund sieht bis die Bilder erscheinen. Meinst du das? Das hängt mit dem Laden und layouten zusammen. Nach jedem Bild wird das Layouten neu angestoßen. Du könntest mal testweise in dem js-Template die Zeile mit "$masonry.masonry();" von .progress nach .always verschieben. Dann wird es nur einmal komplett nach dem Laden initialisiert. Ich hatte 2 Möglichkeiten wie ich mit dem Layouten/Masonry umgehe:

- initialisieren und nach jedem geladenen Bild re-layouten
- Laden und erst nach dem alle Bilder geladen sind Masonry initialisieren.

Da ich ersteres optisch schöner fand, habe ich mich dafür entschieden.

Bisher nach ca. 15 Minuten offener Wall noch keine einbußen gemerkt. Was genau machst du nebenbei im FF?

Zitat:

---

Zitat von Dirch

ja ich weiss. Habe deine PM gelesen. Bin aber erst gestern Abend aus dem Urlaub zurück gekommen und arbeite mich langsam durch die aufgelaufenen Sachen durch...

---

Das hatte ich mir schon gedacht...sorry wollte ned drängeln :-)

Alle Seiten bis auf die Fotowall laden schnell. Bei der Fotowall ist alles bis auf die Bilder da und erst wenn alle Bilder geladen sind ordnet er sie an. Bis dahin sind sie aber unsichtbar. Ich hab inzwischen aber schon einige Bilder entfernt damit es schnell wird. Aktuell sind es 3 Sekunden bis die Bilder sichtbar sind. Je mehr Bilder es werden umso länger dauert es :(.

Etwas irritierend für Benutzer da es erst eine leere Seite vorgibt...ohne Ladeanimation etc.

Zitat:

---

Du könntest mal testweise in dem js-Template die Zeile mit "$masonry.masonry();" von .progress nach .always verschieben

---

Das werde ich mal testen. Danke. Meinst du das Template js_masonry.html5? Da bin ich mir ned so ganz sicher wie ich das ändere.


Edit:
Bezüglich dem Ladestatus sehe ich im Template die Klasse "loading" allerdings wird diese erst viel später (wenn bereits alles längst geladen ist) wieder entfernt. Der Klasse Loading könnte man einen animierten Ladebalken oder ähnliches geben. Wenn die Klasse aber erst so spät entfernt wird, wäre die Grafik momentan zu lange sichtbar.

Zitat:

---

Zitat von Kahmoon

Das hatte ich mir schon gedacht...sorry wollte ned drängeln :-)

Alle Seiten bis auf die Fotowall laden schnell. Bei der Fotowall ist alles bis auf die Bilder da und erst wenn alle Bilder geladen sind ordnet er sie an. Bis dahin sind sie aber unsichtbar. Ich hab inzwischen aber schon einige Bilder entfernt damit es schnell wird. Aktuell sind es 3 Sekunden bis die Bilder sichtbar sind. Je mehr Bilder es werden umso länger dauert es :(.

Etwas irritierend für Benutzer da es erst eine leere Seite vorgibt...ohne Ladeanimation etc.




Das werde ich mal testen. Danke. Meinst du das Template js_masonry.html5? Da bin ich mir ned so ganz sicher wie ich das ändere.


Edit:
Bezüglich dem Ladestatus sehe ich im Template die Klasse "loading" allerdings wird diese erst viel später (wenn bereits alles längst geladen ist) wieder entfernt. Der Klasse Loading könnte man einen animierten Ladebalken oder ähnliches geben. Wenn die Klasse aber erst so spät entfernt wird, wäre die Grafik momentan zu lange sichtbar.

---

Du benutzt noch Contao 3.0.x?

Was mich wundert ist, daß er die Elemente nicht animiert layoutet, denn das hast du scheinbar gar nicht ausgeschaltet. Und sie werden auch nicht eingefadet, was eigentlich auch im Template so gemacht wird. Und so wie es ausschaut tritt das nur im FF auf, daß diese Pause statt findet. Da kann ich leider nichts weiter machen, da das dann am ImagesLoaded liegt wie das Issue hier vermuten läßt: https://github.com/desandro/imagesloaded/issues/50

Der Masonry-Container und jedes Masonry-Element erhält die Klasse "loading". Sobald das Element geladen wurde, wird die Klasse (im .progress) entfernt. Sobald alle Elemente geladen wurden wird die Klasse beim Container entfernt. Du hast also die Möglichkeit das recht differenziert zu gestalten. Wenn du beispielsweise mein Standard-Theme auswählst bzw. dir das CSS dazu anschaust siehst du, daß ich zu jedem Bild eine Ladeanimation habe. (Beispiel: http://test.webdesignerei.com/caroufredsel/) Du kannst auch eine Progressbar erstellen wie das David auf seiner Seite macht (http://desandro.github.io/imagesloaded/). Dazu mußt du aber das Template erweitern. Das reicht z.B. schon, um eine Lade-Animation zu machen:

PHP-Code:

---

/* loader */.masonry_gallery.loading {    background-color: #f5f5f5;    background-position: center center;    background-repeat: no-repeat;    background-image: (...);    min-width: 75px;    min-height: 75px;} 


---

Ne, ich verwende Contao 3.1.2 :-)

Bei mir verhält es sich in Chrome leider genauso..hmm. Sogar noch länger :( Auch die Bilder faden nicht schön rein wie bei dir obwohl ich sonst alles auf Standard habe.

Das die Ladegrafik werde ich mir mal aus deinem Theme klauen :)

Juten Morgen Frank,

sieht nun ja besser aus. Habe aber noch Tips für dich, damit es noch schöner wird. ;)

- die Ladeanimation solltest du unbedingt als CSS-Inline-Grafik ablegen wie ich das im Theme gemacht habe. Es kommt leider öfters vor, daß dieses Bild erst später geladen wird. Das kombinierte CSS-File von Contao ist recht groß und der Request kommt daher oft später als die Requests der Bilder wegen der parallelen Ausführung.
- und setze eine min-width/min-height

Warum das einfaden manchmal nicht sichtbar ist, kann ich leider auch nicht sagen. Auf meiner Testseite macht er das im Safari/Chrome immer im FF nur beim Neuladen der Seite. Wenn beim FF die Bilder im Cache sind, dann nicht. Dann baut er sie sogar sichtbar auf. Hier scheint der FF mist zu liefern wie in dem Issue zu ImagesLoaded nachzulesen ist.

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

Moin moin :-)

Zitat:

---

Zitat von Dirch

- die Ladeanimation solltest du unbedingt als CSS-Inline-Grafik ablegen wie ich das im Theme gemacht habe. Es kommt leider öfters vor, daß dieses Bild erst später geladen wird. Das

---

Ja, das ist mir auch schon aufgefallen. Außerdem ist die Ladegrafik so nicht animiert. Sobald ich einen min height/width auf die Klasse loading setze, zerhaut es mir das masonrygrid :(. Kein Plan warum...habs gerade mal zum Test aktiviert.


Bezüglich dem einfaden. Ich sehe in deinem Theme Mediaquerys? (@webkit und @keyframes) bei fadeIn und fadeOut. Das ist mir auch noch nicht so ganz klar wie ich das in den internen Editor von Contao bekomme :-)

Aber sonst bin ich schon recht zufrieden.

Edit:
Einen Koverter für die Grafik habe ich inzwischen gefunden.

Hier der Link aus "Dirchs Web-Fundus-Bibliothek" ;D

http://dataurl.net/#dataurlmaker

Seltsame Sache, daß es das Grid zerhaut. Das sind dann die Momente wo ich mich Frage, warum ich nicht Schäfer geworden bin... ;)

Die (CSS3) Keyframe(-Animationen) sind nur für die Captions. Am besten dafür ein externes CSS-File verwenden und im Seiten-Layout einbinden. Das Einfaden der Elemente geschieht jedoch im js-Template mittels jQuery-Animation.

Also zumindest das Ladeverhalten ist jetzt besser....leider check ich nicht warum es das masonry zerschiesst wenn .loading eine min-width hat. Wenn man nur min-height angibt bleibt das Masonry ganz.

Zitat:

---

Zitat von Kahmoon

Also zumindest das Ladeverhalten ist jetzt besser....leider check ich nicht warum es das masonry zerschiesst wenn .loading eine min-width hat. Wenn man nur min-height angibt bleibt das Masonry ganz.

---

Ich denke ich weiss weshalb: du benutzt ja das indirekte Verfahren, um Größen für das Grid zu bestimmen. Du hast die Klasse für die Grid-Breite "masonry_gallery" genannt (wie die Elemente). Daher bekommt auch dieses Element (was eigentlich keines ist), die Klasse loading und somit auch die Grafik und die Größenangaben! Nenne diese Klasse besser anders, z.B. masonry_gallery_grid und dann klappt es. =)

Jepp das schaut gut aus in groß. Leider sortiert er dann die Bilder nicht neu wenn man die Ansicht auf Smartphone verkleinert....grrrr! Ich lass es mit nur min-height :-)


Icon wird leider nach wie vor nicht animiert....aber damit kann ich leben.

Zitat:

---

Zitat von Kahmoon

Jepp das schaut gut aus in groß. Leider sortiert er dann die Bilder nicht neu wenn man die Ansicht auf Smartphone verkleinert....grrrr! Ich lass es mit nur min-height :-)


Icon wird leider nach wie vor nicht animiert....aber damit kann ich leben.

---

Hmm eigentlich hast du ja nur eine Ladeanimation hinzugefügt und sonst nichts weiter. Das sollte keine Auswirkung auf die Sortierung haben - an diesem Part wurde doch nichts geändert.

Bei mir wird das Icon (beim Neuladen) schon animiert. Beim Laden aus dem Cache kommt der Browser dann nur nicht mehr nach mit all dem parallelen Kram, den er da machen soll. Sind doch ne ganze Menge Aktionen die da Ablaufen.

Hallo Dirch,

siehst du eine Möglichkeit Bilder im Querformat doppelt so breit anzuzeigen als Bilder im Hochformat? Irgendwie gehen bei mir die Querformatigen etwas unter :(

http://www.frankdaniels.de/fotowall.html

Frohe Weihnachten und so :-)

vg
Frank

Hey Frank,

mit der Galerie in der Form schwierig - du kannst ja keine Angaben zu den einzelnen Bildern machen. Mit den Wrapper-Elementen ginge das, da du dann den einzeln hinterlegten Bildern entsprechende CSS-Klassen mitgeben kannst. Dafür verliert man leider nur die schön einfache Handhabung der Bilder.

Man könnte da sicher in der Galerie was programmieren um das Seitenverhältnis der Bilder zu ermitteln und in Abhängigkeit davon dies 2 Spalten übergreifend zu machen. Evtl. sogar was was allgemein gut funktioniert. Aber hab zur Zeit nicht so viel Zeit und so exorbitant viel wird die Erweiterung auch nicht eingesetzt.

Viele Grüße und ebenfalls schönes Fest...
...Dirk

Das hatte ich vermutet :-) :-(

Macht nix.

Gruß
Frank

Hallo,

ich habe ein kleines Problem. Ich verwende Contao 3.2.3 und habe nun mal dk_mansory installiert. Funktioniert soweit auch. Nun möchte ich gerne die Bilder in einer Lightbox öffnen. Wenn ich allerdings mootools mediabox einbinde, werden nicht mal mehr die Thumbnails angezeigt. Hat vielleicht jemand einen Lösungsansatz?

Grüße Steven

jQuery nutzen. Ggf. testen ob es mit beiden Frameworks noch klappt.

Danke Planepix. Eine ausführliche Suche im Forum hat mich gerade auch zu dieser Lösung geführt. Jetzt klappts. :)

Hallo,

könnte bitte einmal jemand erklären wie ich so einen schönen Fotowall wie Kahmoon gemacht hat erstelle? Ich bekomm es einfach nicht hin ist immer eine Spalte würde aber gern auch 3 oder 4 haben. Wenn ich die Spaltengröße angebe interessiert es Contao nicht selbst, wenn ich die Bildgröße eingeben macht es die Bilder größer. Deswegen wäre eine kurze Anleitung super.

VG

Martin

Moinsen,

hab nun auch mal die Erweiterung getestet und möchte auch die einzelnen Bilder auf Unterseiten verlinken.
Den Bildern habe ich in der Dateiverwaltung einen Link verpasst. {{link_url::10}} bzw. http://www.google.de.
Da es sich um einen lokalen Test handelt habe ich mal den Quellcode angehängt.
Anhang 16789

Muss ich im Contao (Erweiterung o.Ä.) noch was anpassen oder könnte es am CSS liegen ?

MFG
Frank

Was genau ist nun das Problem? Laut deinem Quellcode passt es ja?

Zitat:

---

Zitat von Spooky

Was genau ist nun das Problem? Laut deinem Quellcode passt es ja?

---

Mein Problem ist, dass wenn ich mit der Maus über ein Element gehe, kann ich es nicht anklicken.
Also es ist im FE kein Link.

Ohne einen Link wird es schwierig sein dir zu sagen, warum das so ist.

Dann kan eigentlich nur ein CSS Element überlappen. Wie gesagt...ohne Live-Link wirds schwierig hierzu etwas zu sagen.

Hab in nem anderen Thread über das Thema den Code von dir gefunden Spooky

Code:

---

figure:after,
figure figcaption {
    pointer-events:none;
}

---

Das hat das Problem gelöst.
Ein weiterer Fall von nicht richtig gelesen.

Trotzdem Danke