Tabellenlose Bildergalerie in Typolight
Das Content Management Typolight verfügt über zwei unterschiedliche Content Elemente zum Einfügen von Bildern: ce_gallery.tpl für das Einstellen einer Bildergalerie ohne Großansicht und ce_gallery_fullsize.tpl für das Einstellen einer Bildergalerie mit Großansicht als modales Fenster.
Leider werden innerhalb der genannten Content Elemente Tabellen für das Layout verwendet. Dies widerspricht Anforderung 5 und den Bedingungen 5.1-5.4 der BITV-Anforderungsliste und den Richtlinien 3 und 5 der WCAG-Spezifikation.
Über die Vorlagen-Verwaltung von Typolight lässt sich dies jedoch komfortabel ändern: Melden Sie sich am Backend Ihrer Typolight-Installation an und navigieren Sie zum Eintrag Templates aus dem dem Abschnitt Layout des Hauptmenüs. Erzeugen Sie aus den Originaltemplates ce_gallery.tpl und ce_gallery_fullsize.tpl über die gleichnamige Schaltfläche jeweils ein neues Template. Klicken Sie anschließend auf die Schaltfläche Template bearbeiten der jeweiligen Vorlage und ersetzen Sie diese durch das entsprechende, untenstehende Codebeispiel. Speichern Sie Ihre Änderungen über die gleichnamige Schaltfläche.
ce_gallery.tpl:
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<ul class="gallery">
<?php foreach ($this->body as $class=>$row): ?>
<li class="<?php echo $class; ?>">
<ul>
<?php foreach ($row as $col): ?>
<?php if ($col['hasImage']): ?>
<li 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; ?>><img src="<?php echo $col['src']; ?>" alt="<?php echo $col['alt']; ?>" /><?php if ($col['caption']): ?><span class="caption"><?php echo $col['caption']; ?></span><?php endif; ?></div></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<br class="clear" />
</li>
<?php endforeach; ?>
</ul>
<?php echo $this->pagination; ?>
</div>
ce_gallery_fullsize.tpl:
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<ul class="gallery">
<?php foreach ($this->body as $class=>$row): ?>
<li class="<?php echo $class; ?>">
<ul>
<?php foreach ($row as $col): ?>
<?php if ($col['hasImage']): ?>
<li 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']; ?>" alt="<?php echo $col['alt']; ?>" /><?php if ($col['caption']): ?><span class="caption"><?php echo $col['caption']; ?></span><?php endif; ?></a></div></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<br class="clear" />
</li>
<?php endforeach; ?>
</ul>
<?php echo $this->pagination; ?>
</div>
Nachfolgend ein Beispiel für eine mögliche Formatierung der Bildergalerie per CSS:
.ce_gallery ul {line-height:1em;list-style-type:none;list-style-position:inside;padding-bottom:0.5em;}
.ce_gallery .gallery, .ce_gallery .gallery ul {width:100%;}
.ce_gallery .gallery ul {float:left;padding-bottom:0;}
.ce_gallery .gallery ul li {float:left;}
.ce_gallery .image_container {padding:5px;text-align:center;background-color:#ffffff;border:1px solid #cccccc;}
.ce_gallery .image_container img {width:100%;display:block;}
.ce_gallery .image_container span {display:block;margin-top:5px;font-size:0.8em;}
.ce_gallery .image_container a {text-decoration:none;}
Als kleines Bonbon hier noch eine Adaptierung des Templates pagination.tpl, das bei mehrseitigen Bildergalerien zum Seitenwechsel verwendet wird.
pagination.tpl:
<!-- indexer::stop -->
<div class="pagination block">
<p><?php echo $this->total; ?></p>
<ul>
<?php if ($this->hasFirst): ?>
<li><a href="<?php echo $this->first['href']; ?>" class="first" title="<?php echo $this->first['title']; ?>"><?php echo $this->first['link']; ?></a></li>
<?php endif; ?>
<?php if ($this->hasPrevious): ?>
<li><a href="<?php echo $this->previous['href']; ?>" class="previous" title="<?php echo $this->previous['title']; ?>"><?php echo $this->previous['link']; ?></a></li>
<?php endif; ?>
<?php echo $this->items; ?>
<?php if ($this->hasNext): ?>
<li><a href="<?php echo $this->next['href']; ?>" class="next" title="<?php echo $this->next['title']; ?>"><?php echo $this->next['link']; ?></a></li>
<?php endif; ?>
<?php if ($this->hasLast): ?>
<li><a href="<?php echo $this->last['href']; ?>" class="last" title="<?php echo $this->last['title']; ?>"><?php echo $this->last['link']; ?></a></li>
<?php endif; ?>
</ul>
<br class="clear" />
</div>
<!-- indexer::continue -->
Die zugehörige CSS-Formatierung kann dabei wie folgt gestaltet werden:
.ce_gallery .pagination p, .ce_gallery .pagination ul {padding-bottom:0;line-height:1em;}
.ce_gallery .pagination p {float:left;}
.ce_gallery .pagination ul {float:right;}
.ce_gallery .pagination li {display:inline;}
Kommentare und Feedback
Andreas schrieb vor mehr als 2 Jahren:
Hallo,
warum nicht mal ne Beispielseite dazu? Eine verschachtelte Liste für eine Präsentation von Bildern ist semantisch nicht korrekt. Deshalb hatte ich mir eine Gallerie erstellt in der die Bilder einfach nur nebeneinander präsentiert werden. Ohne Tabelle, ohne Liste. Siehe z.B. hier http://frankntone.com/de/produkte/speaker-cabinets/galerie.html
Gruß Andreas
Matthias Moorkamp schrieb vor mehr als 2 Jahren:
Hallo Andreas,
vielen Dank für Deinen Kommentar!
Ich habe die Bildergallerie in der oben dargestellten Form zuletzt hier benutzt:
http://haus-suederduen.de/index.php/das-haus.html
http://ferienhaus-herzmuschel.de/index.php/das-haus.html
Ich verstehe bislang allerdings nicht, warum eine unsortierte Liste für die Präsentation einer Bildergallerie semantisch nicht korrekt ist - meiner Ansicht nach handelt es bei einer Gallerie um eine zusammengehörige Liste von Bildern, die von Dir vorgestellte Variante unter Verwendung von span-Tags stellt diesen Zusammenhang nicht her.
Kannst Du mir daher Deinen Ansatz bitte nochmal näher erläutern?
Vielen Dank und Gruß zurück,
Matthias
Andreas schrieb vor mehr als 2 Jahren:
Hallo Matthias,
in einer verschachtelten Liste stehen die Listenpunkte in einer hierarchischen Beziehung zueinander. In einem Fotoalbum, oder einer Galerie folgt allerdings einfach nur ein Bild dem anderen, ohne eine Beziehung zueinander zu haben, außer, dass sie im gleichen Album sind und evtl. die Reihenfolge einen Sinn ergibt.
Da du in deinen Beispielen allerdings jeweils 5 Topics mit Über(Unter)schriften zu deinen Objekten präsentierst, macht es schon wieder etwas Sinn, außer der übergeordneten Liste.
Ich wollte nur gezeigt haben, dass weder eine Tabelle, noch eine Liste semantisch nötig sind um Bilder zu präsentieren.
Übrigens sehr schön deine Beispielseiten. Tolles Design.
Gruß Andreas
Steinsen schrieb vor mehr als 2 Jahren:
hehe, bahnhof ??? ihr seid echt derbe jungs...
MacKP schrieb vor etwa einem Jahr:
Wobei man sogar so weit gehen könnte das ganze als <ol> (Ordert-List) anzulegen, da Bildergalerien ja teilweise extra eine bestimmte Ordnung haben. Zum Beispiel Zeitlicher Ablauf von einem Abend oder so.
Ist eben immer die Frage was genau da drinn steckt finde ich ;-)
Peter Müller schrieb vor etwa einem Jahr:
Also wenn ich die BITV richtig lese, findet die das in 5.3 und 5.4 nicht so schlimm, solange die Tabellen linearisierbar sind:
5.3 Tabellen sind nicht für die Text- und Bildgestaltung zu verwenden, soweit sie nicht auch in linearisierter Form dargestellt werden können.
5.4 Soweit Tabellen zur Text- und Bildgestaltung genutzt werden, sind keine der Strukturierung dienenden Elemente der verwendeten Markup-Sprache zur visuellen Formatierung zu verwenden.
Und linearisierbar ist die Tabelle aus dem Standardtemplate ;-)
Ihr Feedback zum Thema