Video galerie: Unterschied zwischen den Versionen

Aktuelle Version vom 22. November 2013, 23:35 Uhr

Die normale Galerie des Contao-Core kann bereits für (externe) Videos genutzt werden. Dazu legt man für jedes anzuzeigende Video ein Screenshot-Bild ab (z.B. in ".../tl_files/videos/gallery_01/") und erzeugt eine Datei "meta.txt" im gleichen Verzeichnis, die, neben alternativem Text und Bildunterschrift, auch die URL zum Video enthält:

dateiname.endung = Alternativer Text | URL | Bildunterschrift
The_Police_-_Roxanne_live_1979.jpg = The Police - Roxanne, live 1979 | http://www.youtube.com/watch?v=-wpX6drarrs | <p>The (very young) Police at Pinkpop 1979</p>
Brazil.jpg = Brazil - Terry Gilliam (1985) | http://video.google.com/videoplay?docid=5752843086186063624# | <p>Brazil - Google Video (2:16:49)</p>

Erzeugt man daraus eine Galerie und aktiviert im Backend die Checkbox "Großansicht/Neues Fenster", dann wird bei einem Klick auf einen Galerie-Screenshot die angegebene URL in einem neuen Browser-Fenster geöffnet und das Video darin abgespielt.

Schön und gut ... allerdings will man oft die Besucher auf der eigenen Seite halten und ihnen dennoch das Abspielen der Videos gestatten. Peter Müller hat in seinem excellenten Buch "Websites erstellen mit CONTAO" gezeigt, wie man Videos per Link im Text in einer Media/LightBox öffnen kann (Kapitel 10.3.1 "Inhaltselement Text: Ein Link in einer Mediabox"). Das sollte doch auch mit einer Galerie funktionieren?

Na klar! In weiser Voraussicht bietet Contao für das Inhalts-Element "Galerie" eine Auswahl des Templates im Backend an. Dort wird normalerweise nur "gallery_default" angeboten. Also muss man eine Kopie dieses Templates im Verzeichnis ".../templates" erzeugen, umbenennen und modifizieren.

Die Änderungen betreffen nur wenige Zeilen, deshalb hier nur das diff:

--- gallery_default.tpl	Fr 27. Mai 23:57:03 2011
+++ gallery_videos.tpl	Sa 28. Mai 02:51:13 2011
@@ -1,6 +1,7 @@
 
-<table cellspacing="0" cellpadding="0" summary="Image gallery">
+<table class="videos" cellspacing="0" cellpadding="0" summary="Video gallery">
 <tbody>
+<?php $lightbox_id = rand(10000, 99999); ?>
 <?php foreach ($this->body as $class=>$row): ?>
 <tr class="<?php echo $class; ?>">
 <?php foreach ($row as $col): ?>
@@ -10,7 +11,7 @@
   <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; ?>>
 <?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>
+    <a href="<?php echo $col->href; ?>" rel="lightbox[lbv<?php echo $lightbox_id; ?> <?php echo $col->width; ?> <?php echo $col->height; ?>]" 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; ?>

Ganz am Anfang bekommt die Tabelle eine zusätzliche Klasse (optional) und ein angepasstes Attribut "summary".

Direkt danach wird eine Pseudo-ID erzeugt, die weiter unten im "rel" Attribut verwendet wird. Der Sinn: hat man mehrere Video-Galerien auf einer Seite, dann soll man in der Mediabox zwar von Video zu Video in EINER Galerie schalten, aber nicht zwischen Galerien wechseln können.

Die wichtigste Änderung gegen Ende:

• "<?php echo $col->attributes; ?>" wird ersetzt durch
• " rel="lightbox[lbv<?php echo $lightbox_id; ?> <?php echo $col->width; ?> <?php echo $col->height; ?>]""

Damit wird der JavaScript Code von $col->attributes (window.open...) weggeworfen und stattdessen die Mediabox angefordert. Diese erhält, neben der oben erwähnten ID, auch eine Angabe für Breite und Höhe ... das ist die Größe des Original-Bildes, das für die Galerie verwendet wurde (auch wenn das nie gezeigt wird), nicht die Größe des Thumbnails!

Im Backend muß man nun nur noch das neue Template "gallery_videos" wählen und die Videos erscheinen in einer Mediabox auf der eigenen Seite mit diversen Features:

• man kann von Video zu Video innerhalb einer Galerie schalten und die (streaming) Videos damit "anteasern"
• die Größe der Mediabox passt sich an das Video an (indirekt über die Größe des Original-Bildes)
• schaltet man zwischen den Videos hin und her oder schließt die Mediabox, hält das Abspielen automatisch an. Je nach Video-Lieferant kann das Video auch Fullscreen abgespielt werden (YouTube: ja, Google: nein).