mit2m | medien und it

Tabellenlose Bildergalerie in Typolight

mm@mit2m.de (Matthias Moorkamp) — Tue, 20 Oct 2009 01:06:09 +0200

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:

<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>

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;}

Ein modales Flash-Fenster

mm@mit2m.de (Matthias Moorkamp) — Mon, 19 Oct 2009 02:54:46 +0200

Ein modales Fenster ist eine spezielle Form des Dialogfensters, bei dem der Benutzer in anderen Fenstern derselben Anwendung nicht weiterarbeiten kann, solange das modale Fenster angezeigt wird. Dieses Konzept hat dank der JS-Bibliothek Lightbox und seiner Derivate Einzug ins Web gehalten – dabei wird das modale Fenster zur Präsentation von Bildern in hohen Auflösungen verwendet.

Im Content Management System Typolight verrichtet für diesen Zweck die auf den Mootools beruhende JS-Bibliothek Slimbox ihre Arbeit. Leider ist diese – ebenso wie die originale Lightbox – nicht in der Lage, andere Medien als Bilder darzustellen.

Als Alternative präsentiert sich hier u.a. die Bibliothek mediaboxAdvanced von John Einselen – diese baut ebenfalls auf den Mootools auf, steht unter der GPL, wird aktiv betreut und verwendet für die Parameterübergabe eine zur Slimbox grundlegend kompatible Syntax, was Sie besonders interessant für den Einsatz innerhalb von Typolight macht.

Die Vorbereitungen gestalten sich dabei denkbar einfach: Zunächst erzeugt man einen neuen Ordner mediaboxAdvanced im Verzeichnis plugins der Typolight-Installation – in diesen kopiert man die Bibliothek selbst sowie eines der Themes, die auf der Projektseite verfügbar sind. Eine separate Mootools-Bibliothek ist dabei nicht notwendig, da Typolight bereits eine ausreichend aktuelle Version mitbringt.

Um die Slimbox gegen die mediaboxAdvanced auszutauschen, ist anschließend das Template fe_page.tpl im Backend der Typolight-Installation zu bearbeiten. Dabei ist die folgende, alte Zeile durch den neuen Aufruf der mediaboxAdvanced-Bibliothek zu ersetzen – gegebenenfalls muß die Versionsnummer angepaßt werden.
alt:

neu:

Ebenso wird das alte Slimbox-Stylesheet durch jenes des gewählten mediaboxAdvanced-Themes ersetzt (hier: Black Theme).
alt:

neu:

Das war bereits die halbe Miete: Bilder, die vorher via Slimbox angezeigt wurden, werden nun ohne weitergehende Modifikationen von der mediaboxAdvanced dargestellt; auch zu Galerien gruppierte Bilder werden aufgrund der kompatiblen Syntax der beiden Bibliotheken unterstützt.

Kommen wir nun zur Integration von Flash®-Inhalten.
Zwar unterstützt mediaboxAdvanced auch die direkte Einbindung von swf-Dateien, doch birgt diese Vorgehensweise einige Nachteile:
Die mediaboxAdvanced-Syntax erlaubt keine Übergabe von Flashvars – diese werden häufig benutzt, um notwendige Startvariablen an den Flash®-Film durchzureichen. Diese Filme können daher nicht dargestellt werden.
Im mediaboxAdvanced-Skript ist ferner keine Möglichkeit zur individuellen Überprüfung der Versionsnummer des Flash®-Plugins implementiert. Inhalte, die eine bestimmte Versionsnummer voraussetzen, können nicht dargestellt werden.
Desweiteren liefert diese Methode bei auf Nutzerseite deaktiviertem Javascript den direkten Link auf die swf-Datei zurück. Alternative Anzeigegeräte und Browser ohne Flash®-Plugin bieten in diesem Fall nur den Download der Datei, zeigen jedoch keinerlei Inhalte an.
Abschließend ist keine Bereitstellung von individuellem, alternativem Inhalt für den Flash®-Film möglich – eine Grundvoraussetzung für barrierefreies Webdesign.

Diese Probleme können elegant umschifft werden, indem der Flash®-Inhalt mittels der Dynamic Publishing-Methode von swfobject in eine valide (X)HTML-Seite eingebettet und diese anstatt der swf-Datei durch mediaboxAdvanced aufgerufen wird.

Für eine ordnungsgemäße Anzeige sowohl innerhalb der mediaboxAdvanced als auch beim direkten Aufruf der alleinstehenden (X)HTML-Seite sollte die Anzeigegröße des Flash®-Films allerdings über das umgebende DIV festgelegt werden.
Sofern der Flash®-Film eine dynamische Skalierung erlaubt, empfiehlt es sich, sowohl den body des Dokuments als auch das umgebende div mit den CSS-Eigenschaften width:100%; und height:100%; zu formatieren; anderenfalls ist es notwendig, das umgebende div mit einer absoluten Größe zu versehen und es sowohl horizontal als auch vertikal zentriert am Viewport zu positionieren.
In beiden Fällen sind der Funktion swfobject.embedSWF für die Parameter height und width der Wert 100% zu übergeben, so daß sich untenstehendes Beispiel ergibt:

<?xml version="1.1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Beispiel für einen dymisch skalierenden Flash-Film</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="robots" content="noindex,nofollow" /> <style type="text/css" media="screen"> * { margin:0; padding:0; } html, body, #flashcontent { width:100%; height:100%; margin:0 auto; font-size:100.01%; overflow:hidden; } #flashcontent object { display:block; outline:none; } </style> <script src="/pfad/zu/swfobject.js" type="text/javascript"></script> </head> <body> <div id="flashcontent">  </div> <script type="text/javascript"> <![CDATA[//><!]]> </script> </body> </html>

Da Typolight ebenfalls eine ausreichend aktuelle Version der swfobject-Bibliothek zur Verfügung stellt, kann hier auf diese zurückgegriffen werden; lediglich die Datei expressInstall.swf muss bei Bedarf manuell ergänzt werden. Die Pfade zu den einzelnen Dateien sind dabei ausgehend von der obigen (X)HTML-Seite zu setzen.

Um schlußendlich den Flash®-Film aus einem Typolight-Artikel heraus innerhalb von mediaboxAdvanced anzeigen zu lassen, ist ein letztes Mal Handarbeit notwendig, da Typolight wegen seiner Ausrichtung auf die Slimbox nur Bedienelemente zum modalen Öffnen von Bildern bereitstellt.
Dazu wird der Artikel im WYSIWYG-Editor des Typolight-Backends geöffnet. Über die Schaltfläche HTML-Quellcode bearbeiten wird der Quelltext zur Bearbeitung geöffnet. Im Quelltext selbst wird das aufrufende Element schließlich mit folgendem Link-Tag versehen:

<a href="/pfad/zu/xhtml_datei.html" title="Flash®-Film in modalem Fenster öffnen" rel="lightbox[external 768 576]">Klick mich!</a>

Über das Schlüsselwort lightbox wird mediaboxAdvanced dabei mitgeteilt, daß dieses für die Verarbeitung des Links zuständig sein soll. Der Parameter external gibt dabei an, daß es sich bei dem zu öffnenden Inhalt um eine (X)HTML-Seite handelt. Das nachfolgende Zahlenpaar legt die Breite und Höhe der Darstellung fest – sollte der Flash®-Film mit einer absoluten Größe in die (X)HTML-Datei eingebunden worden sein, sind hier diese Angaben zu verwenden.

Über die Schaltfläche Aktualisieren des Quelltexteditors werden diese Änderungen in den Artikel übernommen. Nach dem Speichern des Artikels über die gleichnamige Schaltfläche ist der Flash®-Inhalt nun über das modale Fenster der mediaboxAdvanced zugänglich.

Bei nutzerseitig deaktiviertem Javascript wird die URL zur (X)HTML-Seite zurückgeliefert.
Sollte nutzerseitig kein Flash® installiert sein, wird der alternative Inhalt der (X)HTML-Seite eingeblendet.
Liegt das Flash®-Plugin in einer veralteten Version vor, wird bei Nutzung der Express Install-Methode der Updatevorgang eingeleitet.

Ich hoffe, mit diesem Kurztutorial eine kleine Hilfestellung gegeben zu haben. Über Fragen, Anmerkungen und Kommentare würde ich mich sehr freuen.