Contao Galerie ohne Tabelle

Standardmäßig wird die boardeigene Galerie in einer Tabelle ausgegeben. Wenn man jedoch ein fluides Seitendesign vorliegen hat, ist die die starre Tabelle ein Hindernis, da sie sich nicht an unterschiedliche Seitenbreiten anpassen kann. Hier empfiehlt es sich die Bilder in eine Liste zu packen.

Um die Bildausgabe in einer Liste darzustellen, muss als erstes ein Klon von gallery_default erstellt werden. Dazu in der Seitenleiste links auf "Templates" klicken, das Template aus der Liste auswählen, abspeichern und anschließend  umbenennen, z.B. gallery_default_fluid.

Beispiel

  • <p>Seerosen</p>
    Seerosen
  • jukemedia-webdesign-gal002
    Magnolia
  • jukemedia-webdesign-gal003
    geöffnete Seerose
  • jukemedia-webdesign-gal004
    weiße Seerose
  • jukemedia-webdesign-gal005
    blaue Seerosen
  • jukemedia-webdesign-gal006
    Lilie
  • jukemedia-webdesign-gal007
    Nicht Knut
  • jukemedia-webdesign-gal015
    Schnittlauch
  • jukemedia-webdesign-gal016
    Paprika

© 2010-2011 Alle Bilder sind Eigentum von jukemedia.de und urheberrechtlich geschützt!

Downloads

2 Varianten

Fügt man im Backend eine Galerie ein, so kommt man an dem Auswahlfeld für die Anzahl der Bilder nicht vorbei. Für die boardeigene Galerie in Tabellenform ist diese Eingabe sinnvoll, denn sie bestimmt wie wie viele Bilder in einer Reihe angezeigt werden. Für eine Ausgabe als Liste braucht man diese Angabe nicht, muss sie aber in Code 1 trotzdem machen und darf dabei aber immer nur so viele Bilder angeben, wie auch in der Galerie gezeigt werden. Gibt man z.B. 12 Bilder ein, veröffentlicht aber nur 9, dann entstehen drei leere Bilderrahmen. Der Code im 2. Downlaod wurde so verändert, dass die Eingabe der Bildanzahl unwirksam ist. De Factor braucht man das ja bei einer Liste wirklich nicht.

Code 1

<div class="fluidgallery block">

<ul>
<?php foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php $gallery_item_nr=$gallery_item_nr+1; 
if ($gallery_item_nr % 2 != 0) {
    $even_or_odd = odd;
} else {
    $even_or_odd = even;
}
$class_item = "item$gallery_item_nr $even_or_odd";
?>


<?php if (!$col->addImage): ?>

  <li class="<?php echo $class_item; ?> empty">*</li>
<?php else: ?>
  <li class="<?php echo $class_item; ?>">
  <div class="image_container">
<?php if ($col->href): ?>
    <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a>
<?php else: ?>
    <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
<?php endif; ?>
  </div>
  
  <?php if ($col->caption): ?><div class="caption"><?php echo $col->caption; ?></div>
            <?php endif; ?>
  </li>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>

</div>

Code 2

<div class="fluidgallery block">

<ul>
<?php foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php $gallery_item_nr=$gallery_item_nr+1; 
if ($gallery_item_nr % 2 != 0) {
    $even_or_odd = odd;
} else {
    $even_or_odd = even;
}
$class_item = "item$gallery_item_nr $even_or_odd";
?>


<?php if ($col->addImage): ?>
  <li class="<?php echo $class_item; ?>">
  <div class="image_container">
<?php if ($col->href): ?>
    <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a>
<?php else: ?>
    <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
<?php endif; ?>
  </div>
  
  <?php if ($col->caption): ?><div class="caption"><?php echo $col->caption; ?></div>
            <?php endif; ?>
  </li>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>

</div>

Bildunterschriften

Wer schon einmal mit der Bildergalerie gearbeitet hat weiß, dass man die Bildunterschriften beim Inhaltselement "Galerie" über eine Datei meta.txt, welche man im entsprechenden Bildordner ablegt, hinzufügen kann.

Auch die geänderten Listentemplates arbeiten mit dieser Datei zusammen. In diesem Zusammenhang möchte ich jedoch noch auf zwei interessante Erweiterungen hinweisen:

  1. Die Erweiterung MetaCreator
  2. Die Erweiterung MetaGallery

Mit MetaCreator kann man jedem Bild eine Bildunterschrift über das Backend zuweisen und muss nicht, wie bei der meta.txt, erst eine externe Datei erstellen und diese dann umständlich im Verzeichnis hinterlegen.

MetaGallery funktioniert wie die externe meta.txt, mit dem Unterscheid dass die Angaben direkt in der Eingabemaske der Galerie gemacht werden können und der Wirkflow nicht unterbrochen wird.

Zu empfehlen wäre auch die Erweiterung Gallery, mit der man ebenfalls die Bildunterschriften sozusagen in einem Aufwasch eintragen und zuordnen kann.

Die geänderten Templates für die tabellenfreie Galerie funktionieren in Contao 2.9.3. mit allen drei Erweiterungen.

CSS Styles

.fluidgallery {
background-color:#f4f4f4;
padding:30px;
}

.fluidgallery ul li {
width:120px;
height:135px;
position:relative;
display:inline-block;
margin-right:4px;
margin-bottom:8px;
margin-left:4px;
border:1px solid #ddd;
list-style-type:none;
padding:3px;
}

.fluidgallery .caption {
width:120px;
bottom:3px;
position:absolute;
display:block;
text-align:center;
background-color:#E4E8F4;
font-size:10px;
left:3px;
font-style:normal;
}

und als Conditional Comment:
<!--[if lte IE 7]><link rel="stylesheet" href="ielte7.css" type="text/css" media="screen" /><![endif]-->

.fluidgallery li {
float: left;
}

Styling mit even und odd

Im geänderten Template sind die Klassen even und odd enthalten, mit denen man auch bei einer Bildergalerie z.B. Rahmen und Captions abwechselnd mal so und mal so gestalten kann.

Mehr zum Thema

Weitere Beispiele und Lösungen gibt es bei Thomas Weitzel von weitzeldesign.de auf www.think-contao.de

Zur Entstehungsgeschichte des geänderten Codes kann, wer möchte, im Contao-Forum nachlesen. An dieser Stelle vielen Dank auch an alle, die mitgedacht und mitgeholfen haben, besonders auch an Jens (plastiko), der die Ausgabe von sinnvollen Klassen für die li ermöglichte.

Hinterlasse einen Kommentar

Wer möchte, darf hier gerne etwas kommentieren. Ich freu mich drüber. Alles was konstruktiv zur Lösung von Problemen beiträgt oder Hinweise, was ich vielleicht besser machen könnte oder Tipps, die eine hilfreiche Ergänzung wären, wird gern gesehen.

Wenn dir mein Beitrag gefallen hat, dann teile ihn via Twitter oder Facebook mit anderen.

 

Kommentar von Dani | 11.08.2011

Dani

Servus,

danke für das "howto". Eine Frage hätte ich, wo gibts die ielte7.css ?

Danke

Kommentar von Dani | 11.08.2011

Dani

Noch eine Frage, wo trag ich da die Bilderanzahl ein pro Reihe??

Danke :)

Kommentar von Jutta | 11.08.2011

Jutta

Hallo Dani ;-),

ielte7 ist eine Bezeichnung, die ich selber beim Anlegen dieser Style-Datei vergeben habe. Es ist aber keine "normale" stylesheet-Datei, sondern eine, die via conditional-comments nur im Internet-Explorer eingefügt wird und dann eben auch nur für den IE gültig ist. ielte7 heißt : internet exploter lower than equal 7.
Und übersetzt : für alle Internet Explorer kleiner oder gleich Version 7. Du musst im BE von contao eine neue stylesheet-Datei anlegen und dann rechts oben im Kasten "conditionel comments" und dann anschließend den Geltungsbereich auswählen - nicht vergessen das stylesheet in der Seitenvorlage dann zu aktivieren. Zum grundlegenden Verständnis mal nach conditionel comments googlen, oder auch nicht denn mit der neuen Version von Contao wurde schon angekündigt, dass man Browserhacks demnächst vergessen kann ... juchhu.
http://www.contao.org/blog-leser/items/vergesst-browser-hacks-in-contao-210.html

HTH juke

Kommentar von Dani | 11.08.2011

Dani

Servus :)

Ja was CC sind weiß ich :) Trotzdem Danke für die Erläuterung. Mir war nur nich klar was drinnsteht :) Aber ist eh nur der li float:left oder?

Danke für deine Hilfe!

Kommentar von Jutta | 11.08.2011

Jutta

"Noch eine Frage, wo trag ich da die Bilderanzahl ein pro Reihe??"
*öhm* ... ich würde mal tippen bei "Vorschaubilder pro Reihe" ??

Das mit dem float:left; würde ich mir erstmal im IE7 anschauen. Je nachdem, was du sonst noch so auf der Seite definiert hast, kann es sein, dass du das gar nicht brauchst. Wenn sich die Bilder im IE nebeneinander stellen und es ok aussieht, dann lass es, wenn nicht, dann mach eine cc-stylesheet-Datei und füge das float:left; ein.

Kommentar von oliver | 28.09.2011

oliver

Vorweg möchte ich mal sagen, dass mir die Seiten mit den ganzen Demos äußerst gut gefällt. Oftmals bieten die Extensions im Repository ja nicht dieses Feature und bin daher auch dazu übergegangen, hin und wieder eine Demo bereitzustellen. Wenn die Seite hier schon im Produktiveinsatz ist, würde ich Sie auch gern auf meiner Seite erwähnen.

Kommentar von Jutta | 28.09.2011

Jutta

Ja klar ist die Webseite im Einsatz oder wie hast du das jetzt gemeint? Und erwähnen ==> immer gerne. Danke!