Gallerien, die sich der Breite anpassen...

Hi Leute,
irgenwie stolpere ich immer wieder über die gleichen Dinge, wenn ich eine Seite neu anlegen will:

Es kann doch eigentlich nicht wahr sein, dass es von Haus aus in Contao nicht möglich ist, ein paar Bilder zu einer Galerie zusammen zu stellen, die sich nicht so störrisch verhält und die Breite der Bilder wenigstens ein wenig dem zur Verfügung stehenden Platz anpaßt. Ja, ich weiß mit einem Haufen CSS , einer kleinen Änderung (oder war es eine große?) im Template, dazu noch 3-4 benutzerdefinierten Bildergrößen, usw. geht's dann schon. Aber so ganz out of the box, bekomme ich nur feste Bilderbreite und feste Anzahl der Bilder in einer Reihe.

Sorry der Frust mußte jetzt mal wieder raus! ;-)
Jetzt sagt mir bitte daß es inzwischen eine wunderbare Erweiterung gibt, die das "rundum Galerie Sorglos Paket" ist ;-)

Grüße aus Ludwigsburg
Jochen

Mit Contao hat das eigentlich nichts zu tun. Das Galerie Inhaltselement gibt ja nur eine unordered list mit Elementen aus, worin sich wieder figures mit images befinden. Inklusive CSS Klassen je nach dem was du im Inhaltselement eingestellt hast (zB wieviel Bilder pro Zeile am Desktop). Und die kannst du ja ohne Probleme per CSS stylen.

Hi Spooky,
Du hast sicherlich Recht, technisch! Ich empfinde es aber als Totschlagargument! "Das hat nichts mit Contao zu tun!" Warum gibt mir contao dann die Möglichkeit die Bilderanzahl in einer Reihe zu definieren? Das hat auch nur mit Design zu tun, darum muß sich doch contao nicht kümmern? Ich habe ja auch eigetlich "nur" nach einer Erweiterung gefragt, die einfach "geile" Galierein macht, ab besten mit automatischer Anpassung der Größe in einem definierbaren Rahmen und Neusortieren beim Vergrößern und Verkleinern des Browserfensters.

Oder einfach gesagt: So wie WordPress!

grüße
JK

Zitat:

---

Zitat von kubjo

Warum gibt mir contao dann die Möglichkeit die Bilderanzahl in einer Reihe zu definieren?

---

Damit man selbst bei Bedarf sämtliche Bilderanzahlen mit CSS stylen kann. Der Redakteur kann dann selbst aussuchen, wie viele Bilder pro Zeile ausgegeben werden. Das was du möchtest, habe ich selbst nie vermisst, weil sowas wirklich einfach und schnell mit CSS gemacht werden kann. Den Code kann man dann auch für weitere Projekte verwenden...

Ob es eine Erweiterung gibt, die so etwas liefert, weiß ich leider nicht :(

Hi dazzle89,

ich glaube nicht, dass sich eine Galerie, die sich dynamisch der zur Verfügung stehenden Breite anpasst, die die Bilder z.B. in 250px +/- 10% größer und kleiner macht und bei Bedarf dann wieder umbricht, die die Bilder automatisch neu verschiebt (animiert)usw. schnell mal mit CSS machen läßt. Dafür habe ich schon viel zu oft danach gesucht und selbst mit CSS rum hantiert. Sorry!

Grüße
JK

Zitat:

---

Zitat von kubjo

Warum gibt mir contao dann die Möglichkeit die Bilderanzahl in einer Reihe zu definieren?

---

1. Weil Contao daraus und aus der Einstellung Maximale Frontendbreite und aus den eingestellten Abständen automatisch die Bildgröße berechnet. (Diese Möglichkeit ist aber ein wenig veraltet und wird so vermutlich nicht mehr oft benötigt.)
2. Weil Contao ein CSS Framework mit liefert, dass sich diese Information zu Nutze macht: https://github.com/contao/core/blob/...ed.css#L77-L79

Zitat:

---

Zitat von kubjo

Ich habe ja auch eigetlich "nur" nach einer Erweiterung gefragt, die einfach "geile" Galierein macht, ab besten mit automatischer Anpassung der Größe in einem definierbaren Rahmen und Neusortieren beim Vergrößern und Verkleinern des Browserfensters.

---

Ich weiß nicht in wie weit hier eine Erweiterung Sinn macht, denn Dinge wie Gutter und Breakpoints sind ja im CSS des Designs definiert.

Zitat:

---

Zitat von kubjo

Hi dazzle89,

ich glaube nicht, dass sich eine Galerie, die sich dynamisch der zur Verfügung stehenden Breite anpasst, die die Bilder z.B. in 250px +/- 10% größer und kleiner macht und bei Bedarf dann wieder umbricht, die die Bilder automatisch neu verschiebt (animiert)usw. schnell mal mit CSS machen läßt. Dafür habe ich schon viel zu oft danach gesucht und selbst mit CSS rum hantiert. Sorry!

Grüße
JK

---

Das ist ja eine spezielle Anforderung und keine einfache Galerie mehr. Es gibt bspw. die Erweiterung dk_masonry für Contao. Dort gibt es ein Masonry Galerie Inhaltselement: https://github.com/dklemmt/contao_dk...nryGallery.php

Mir gefällt die Lösung von pixabay.com sehr gut. Dort werden die Bilder so angeordnet, wie es auch bei Google und Facebook gemacht wird:
https://goodies.pixabay.com/jquery/f...ages/demo.html

Habe es noch nicht in Contao umgesetzt, aber ich habe es mir fest vorgenommen ;).

Hat jemand eine Idee, wie man am einfachsten die einzelnen Breiten der Bilder herausbekommt? Wenn man beispielsweise das Inhaltselement Galerie einsetzt, den Bildern eine feste Höhe gibt und die Bildgröße auf Proportional setzt, könnte man mit JavaScript, vor dem flexImages Plugin, die einzelnen Breiten der Bilder auslesen und ins html schreiben. Oder gibt es hierfür eine elegantere Lösung?

Und noch kurz Off-Topic ;): Eine Erweiterung, aus der heraus man Bilder direkt aus Pixabay einbinden könnte, wäre phänomenal.
Für Wordpress gibt es sowas: https://de.wordpress.org/plugins/pixabay-images/

Gab es eigentlich schon mal, außer bei MetaModels, ein Crowdfunding für eine Erweiterung?

Hallo Niels,

die trilobiten haben auf dem Camp in Jever eine Pixabay-Erweiterung vorgestellt.
https://contao.camp/programm.html

Da ich nicht in dieser Session war, kenne ich keine weiteren Details.
Aber ich mache mal Flurfunk und informiere die trilobiten; ggf. können sie dazu mehr erzählen oder die Erweiterung vorstellen.

Der Flurfunk sagt: Erweiterung kommt und im besten Fall noch in 2017.

Hallo Niels,
das ist ziemlich genau das, was ich gemeint habe! Diese Art von Galerien wird momentan bei sehr vielen Anbietern (SmugMug, o.ä.) angeboten, schade dass es sowas noch nicht für unser Contao gibt. Wenn ich die Entwicklungen beim CSS richtig mit bekommen habe sind da doch ein paar tolle Möglichkeiten der Berechnung in der Pipeline. Ich würde gerne soweit wie möglich JS vermeiden, aber vielleicht ist das ja zu blauäugig ;-)

Zitat:

---

Zitat von Niels H

Hat jemand eine Idee, wie man am einfachsten die einzelnen Breiten der Bilder herausbekommt? Wenn man beispielsweise das Inhaltselement Galerie einsetzt, den Bildern eine feste Höhe gibt und die Bildgröße auf Proportional setzt, könnte man mit JavaScript, vor dem flexImages Plugin, die einzelnen Breiten der Bilder auslesen und ins html schreiben. Oder gibt es hierfür eine elegantere Lösung?

---

Wenn ich es richtig verstanden habe macht das das o.g. JS von alleine, oder? Was ich toll finde, ist, dass hier die Reihen nicht gleich hoch sind, und so viel schicker aussehen.
Es müßte doch irgendwie möglich sein, über das Galerietemplate diese Funktion einzubauen, oder?

Leider bin ich progrmmier-technisch nicht so weit, um sowas umzusetzen, falls Du aber irgendwelche andere Unterstützung brauchst schick mir eine PN!

Grüße aus Ludwigsburg
Jochen Kubik

Zitat:

---

Zitat von Niels H

Hat jemand eine Idee, wie man am einfachsten die einzelnen Breiten der Bilder herausbekommt? Wenn man beispielsweise das Inhaltselement Galerie einsetzt, den Bildern eine feste Höhe gibt und die Bildgröße auf Proportional setzt, könnte man mit JavaScript, vor dem flexImages Plugin, die einzelnen Breiten der Bilder auslesen und ins html schreiben. Oder gibt es hierfür eine elegantere Lösung?

---

Eigenes JavaScript brauchst du da nicht.

PHP-Code:

---

<?php
  list($width, $height, $type, $attr) = getimagesize($col->src);
  $col->picture['attributes'].= ' data-w="'.$width.'" data-h="'.$height.'"';
?>
<?php $this->insert('picture_default', $col->picture); ?>

---

Ungetestet. So oder ähnlich könnte man das machen.

// ah das soll ja auf den Parent, nicht auf das img selbst

Zitat:

---

Zitat von Niels H

Für Wordpress gibt es sowas: https://de.wordpress.org/plugins/pixabay-images/

---

Hi Niels,
bitte hilf mir auf die Sprünge: Wozu braucht man Galerien von fremden Bilder (pixabay) auf der Webseite? Ich kann mir keine Anwendung vorstellen, oder ticke ich als Fotograf einfach anders? ;-)

Grüße aus Ludwigsburg
Jochen Kubik

Zitat:

---

Zitat von kubjo

… oder ticke ich als Fotograf einfach anders? ;-)

---

Ja ;)

Wenns nicht die eigenen Bilder sind und man nicht bei Fotolia etc. suchen will, kann man die Fotos einfach einbinden.

Zitat:

---

Zitat von planepix

..., kann man die Fotos einfach einbinden.

---

Für mich nicht gültig ;-)

Zitat:

---

Zitat von Spooky

Ungetestet. So oder ähnlich könnte man das machen.

---

Vielen Dank Spooky. Ungetestet hat funktioniert ;).

Hier mal meine modifizierte gallery_default.html5 Datei aus Contao 4.4.8:

HTML-Code:

---

<div class="fleximages_<?= $this->id; ?> flex-images" itemscope itemtype="http://schema.org/ImageGallery">
  <?php foreach ($this->body as $class=>$row): ?>
    <?php foreach ($row as $col): ?>
      <?php if ($col->addImage): ?>
        <?php list($width, $height, $type, $attr) = getimagesize($col->src); $col->picture['attributes'].= ' data-w="'.$width.'" data-h="'.$height.'"'; ?>
        <?php if ($col->href): ?>
          <a class="item" href="<?= $col->href ?>"<?= $col->attributes ?> data-w="<?= $width ?>" data-h="<?= $height ?>" <?php if ($col->linkTitle) echo ' title="' . $col->linkTitle . '"'; ?> itemprop="contentUrl" itemscope itemtype="http://schema.org/ImageObject">
              <?php $this->insert('picture_default', $col->picture); ?>
          </a>
        <?php else: ?>
          <figure class="image_container item" data-w="<?= $width ?>" data-h="<?= $height ?>" <?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?> itemscope itemtype="http://schema.org/ImageObject">
            <?php $this->insert('picture_default', $col->picture); ?>
          </figure>
        <?php endif; ?>
        <?php if ($col->caption): ?>
          <figcaption class="caption" itemprop="caption"><?= $col->caption ?></figcaption>
        <?php endif; ?>     
      <?php endif; ?>
    <?php endforeach; ?>
  <?php endforeach; ?>
</div>
<?php { $GLOBALS['TL_HEAD'][] = '<link rel="stylesheet" href="files/theme/plugins/jQuery-flexImages-master/jquery.flex-images.css">'; } ?>
<script src="files/theme/plugins/jQuery-flexImages-master/jquery.flex-images.js"></script>
<script> $('.fleximages_<?= $this->id; ?>').flexImages({rowHeight: <?= $height ?>}); </script>

---

Der Pfad zu den Dateien jquery.flex-images.css und jquery.flex-images.js muss natürlich ggf. angepasst werden und jQuery muss aktiviert sein. In der Galerie muss die Bildgröße auf Proportional gestellt und nur eine Höhe eingetragen werden. Beide Dateien können hier heruntergeladen werden.

Zitat:

---

Zitat von planepix

Der Flurfunk sagt: Erweiterung kommt und im besten Fall noch in 2017.

---

Die Erweiterung ist seit einigen Tagen via Packagist verfügbar:
https://packagist.org/packages/trilo...pixabay-bundle

Mehr Infos gibts auch im Blogpost -> https://www.trilobit.de/trilobits/co...g-pixabay.html

Zitat:

---

Zitat von Niels H

Hier mal meine modifizierte gallery_default.html5 Datei aus Contao 4.4.8:

---

KLASSE!!! Läuft auch unter 3.5.31!
Ich bin begeistert, Vielen Dank an alle Beteiligten!

Eine Frage: Die Höhe der Reihen variiert ja in einem gewissen Maße, kann man die Spannbreite beinflussen?

Grüße
JK

Zitat:

---

Zitat von Niels H

Der Pfad zu den Dateien jquery.flex-images.css und jquery.flex-images.js muss natürlich ggf. angepasst werden und jQuery muss aktiviert sein.

---

Da drängt sich mir noch eine weitere Frage auf:

Kann ich die 3 Zeilen CSS auch in mein externes CSS file reinschrieben un dann die zeile:

Code:

---

<?php { $GLOBALS['TL_HEAD'][] = '<link rel="stylesheet" href="files/theme/plugins/jQuery-flexImages-master/jquery.flex-images.css">'; } ?>

---

einfach raus löschen?

Grüße aus Ludwigsburg
Jochen Kubik

Hallo Jochen,

ja, das sollte funktionieren.

Liebe Grüße aus Köln