Bildergalerien ohne Tabellen in Contao nutzen

Das Standard-Template für das Inhaltselement Galerie wird in Contao über eine Tabelle gelöst. Oft ist es aber sinnvoll, die Vorschaubilder der Bildergalerie als ungeordnete Liste auszugeben und die weitere Darstellung über CSS zu steuern. Zum Beispiel bei fluiden Layouts und Prozentangaben der Bildbreiten.

Mit der Version 2.9 und der Einführung von Contao können Templates auch für das Inhaltselement Galerie erstellt und angepasst werden. Diese Templates können somit je Inhaltselement Galerie ausgewählt werden und gelten nicht mehr automatisch für alle Inhaltselemente Galerie auf einer Website.

Somit steht nicht mehr im Wege, das Tempate so anzupassen, dass die Ausgabe der Galerie nicht mehr als Tabelle, sondern als unsortierte Liste ausgegeben wird.

Diskussionen in der deutschen und englischen Foren-Community haben sich schon mehrfach diesem Thema angenommen (siehe weiterführende Links) – basierend darauf entstand dieses Tutorial.

Galerie (tabellenbasiert)

Zunächst einmal das Inhaltselement Galerie mit dem Standard-Template gallery_default.tpl.

Galerie-Template (tabellenbasiert)

<table cellspacing="0" cellpadding="0" summary="Image gallery">
<tbody>
<?php foreach ($this->body as $class=>$row): ?>
<tr class="<?php echo $class; ?>">
<?php foreach ($row as $col): ?>
<?php if ($col['hasImage']): ?>
  <td class="<?php echo $col['class']; ?>" style="width:<?php echo $col['colWidth']; ?>;"><div class="image_container"<?php if ($col['margin']): ?> style="<?php echo $col['margin']; ?>"<?php endif; ?>><a href="<?php echo $col['href']; ?>" rel="lightbox[<?php echo $this->lightboxId; ?>]" title="<?php echo $col['alt']; ?>"><img src="<?php echo $col['src']; ?>"<?php echo $col['imgSize']; ?> alt="<?php echo $col['alt']; ?>" /></a><?php if ($col['caption']): ?><div class="caption"><?php echo $col['caption']; ?></div><?php endif; ?></div></td>
<?php else: ?>
  <td class="<?php echo $col['class']; ?> empty"> </td>
<?php endif; ?>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>

Nachfolgend drei Beispiele mit dem geänderten Template für das Inhaltselement Galerie; die Ausgabe erfolgt als unsortierte Liste.

Galerie (listenbasiert) - Sortierung nach Dateiname

Diese Galerie ist nach Dateiname aufsteigend sortiert. Wenn Sie mit dem Mauszeiger über die Vorschaubilder zeigen, sehen Sie in der Statusleiste Ihres Browsers auch die aufeinander folgenden Bildnamen JU-52_001.jpg bis JU-52_012.jpg (von links oben nach rechts unten).

Galerie (listenbasiert) - Sortierung nach meta.txt

Galerie (listenbasiert) - Sortierung nach meta.txt - mit Bildunterschriften

Für die beiden letzten Galerien ist die Sortierung nach einer meta.txt-Datei eingestellt. Wenn Sie hier mit dem Mauszeiger über die Vorschaubilder zeigen, sehen Sie in der Statusleiste Ihres Browsers keine durchgehende, aufeinander folgenden Bildnamen mehr.

Galerie-Template angepasst (listenbasiert)

<ul>
<?php
    foreach ( $this->body as $class => $row )
        foreach ( $row as $col )
            if ( $col->addImage )
            {
?>
<li<?php if ( $col->margin ) { ?> style="<?= $col->margin ?>"<?php } ?>>
<?php if ( $col->href ) { ?>
<a href="<?= $col->href ?>"<?= $col->attributes ?> title="<?= $col->alt ?>"><img src="<?= $col->src ?>"<?= $col->imgSize ?> alt="<?= $col->alt ?>" /></a>
<?php } else { ?>
<img src="<?= $col->src ?>"<?= $col->imgSize ?> alt="<?= $col->alt ?>" />
<?php } ?>
<?php if ($col->caption): ?>
    <div class="caption"><?php echo $col->caption; ?></div>
<?php endif; ?>
</li>
<?php
}
?>
</ul>

Den Code für das neue Galerie-Template speichern Sie, z.B. als gallery_tabellenlos.tpl in den Ordner templates Ihrer Contao-Installation.

Ab jetzt steht Ihnen das Template zur Auswahl innerhalb des Inhaltelements Galerie in der Rubrik Template-Einstellungen zur Verfügung.

Wichtig:
Beginnen Sie den Namen des Templates mit „gallery_”, damit Contao erkennt, das das Template dem Inhaltselement Galerie zugeordnet wird.

Galerie-Template ohne Tabellen auswählen

Ergänzen Sie nun noch eine CSS-Klasse (z.B. tabellenlos)in der Rubrik Experten-Einstellungen. Damit können Sie dann gezielt die Galerien per CSS ansteuern, denen diese CSS-Klasse zugewiesen ist.

CSS-Klasse der Galerie zuweisen

CSS-Definitionen erstellen

/* Style sheet galerie-tabellenlos */
#main .ce_gallery.tabellenlos ul
{
margin:0 0 0 80px;
padding:0;
list-style-type:none;
}

#main .ce_gallery.tabellenlos li
{
float:left;
margin:0 6px 0 0;
padding:0;
}

#main .ce_gallery.tabellenlos-caption .caption
{
width:120px;
margin:2px 0 10px 0;
font-family:verdana,arial,sans-serif;
}

Die CSS-Definitionen sind hier entsprechend für das Beispiel definiert und können von Ihrem Design natürlich abweichen. Wichtig ist, das Sie für ul die Auflistungspunkte entfernen ( list-style-type:none; ) und für li ein float:left; einbauen, damit die Bilder neben- und nicht untereinander angeordnet werden.

Für die Bildunterschriften ( caption ) wurde die Breite auf die Breite der Bilder ( 120 Pixel ) definiert; die Bildunterschriften brechen um.

Wichtig:

Die Einstellung Bilder pro Reihe wird durch die Verwendung des angepassten Templates wirkungslos; hier greifen dann „nur” die CSS-Definitionen. Die Werte für die Bildgröße wird nach wie vor übernommen.

Das bedeutet im Einzelfall etwas Rechenarbeit; was aber sicher das kleinere Problem ist…

Weiterführende Links

twitter
rss-news-feed
weitzeldesign
planepix