Contao Galerie-Inhaltslement mit Video-Unterstützung

[Tim]

Hi Leute,
der Thread von Airborne hat eine super Idee für den Mix aus Video- und Bild-Elementen in dem gewohnten Contao Galerie-Inhaltselement mit sich gebracht.
Die Idee ist der Bild-Datei in der Dateiverwaltung die Adresse zu einem Video zu geben (siehe Screenshot im Anhang).

Was einfach klingt, ist oft nicht ganz so einfach technisch umzusetzen und gerade mit der Lightbox/Colorbox und JS sind einige Hürden zu meisten.

Lange Rede... Anbei findet Ihr auf Basis des gallery_default Templates des EX Themes genau diese Lösung.

Anlage: Dateiverwaltung, gallery_default_video.html5

Viele Grüße,
Tim

[tschero]

Moin Tim,

hervorragende Idee die Galerie auf diese Funktionalität zu erweitern.
Das Template "gallery_default_video.html5" ist im Anhang leider nicht zu sehen. Wird es in einem Update von EclipseX irgendwann erscheinen?

Gruß und vielen Dank,
tschero

[Tim]

Das ist nicht sichtbar?

[tschero]

Doch jetzt, eben war es nicht sichtbar. KA warum?

Vielen Dank

[Airborne]

Sehr cool und schön umgesetzt. Vielen Dank Tim. Ich habe auch schon damit rumgespielt und in meine Galerie exemplarisch ein Video eingebunden. Eine Sache ist mir dabei aufgefallen: Wenn man direkt auf das kleine Icon klickt, erscheint ein Film in der Lightbox. Klickt man sich jedoch direkt in der Lightbox mit den Pfeilen durch die Galerie, wird die Lightbox mit dem Video übersprungen und nur die anderen Bilder gezeigt.

[Tim]

Ich hab das Template noch einmal geupdated. Jetzt sollte alles zusammen in einer LB-Instanz laufen.

[tefracky]

Hi,
ich bin auch an dem Template interessiert. Wo finde ich es denn? Als Anhang sehe ich nur das Bild.

[Tim]

Hi,
ich bin auch an dem Template interessiert. Wo finde ich es denn? Als Anhang sehe ich nur das Bild.

Ich habe den Post erneut gespeichert. Ist die Datei nun erreichbar?

[tefracky]

Ich habe den Post erneut gespeichert. Ist die Datei nun erreichbar?

Leider nicht.

Edit: Jetzt ging es. Danke!

[eblick]

Merkwürdig, ich kann den Anhang nicht sehen... Nur die Screenshots.

[tbruhn]

kann man das template noch einsetzen für eine aktuelle exclipse?
leider sehe ich auch nur den Screenshot und nicht den Download. Tim könntest du die Datei nochmal zur Verfügung stellen?

[Tim]

kann man das template noch einsetzen für eine aktuelle exclipse?
leider sehe ich auch nur den Screenshot und nicht den Download. Tim könntest du die Datei nochmal zur Verfügung stellen?

Das Template ist inzwischen fester Bestandteil in EX.

[tbruhn]

Tim Hallo, danke für den Hinweis. Perfekt. Der Download wird nun auch wieder angezeigt.
Ich habe das Problem, dass wenn ich eine Videogalerie erstelle die Videos immer in einem neuem Fenster angezeigt werden und nicht in der Lightbox wie die Bilder (beim verwenden des Default-Templates)
Wenn ich das Template gallery_default_video.html5 verwende dann werden Bilder und Videos in der Lightbox angezeigt
Video werden auch an die Lightbox angepasst aber die Bilder sind immer in voller Auflösung und werden nicht an die Lightbox angepasst.

Hat jemand einen Tipp welche Template-Anpassung ich machen muss? Danke!

[Tim]

Tim Hallo, danke für den Hinweis. Perfekt. Der Download wird nun auch wieder angezeigt.
Ich habe das Problem, dass wenn ich eine Videogalerie erstelle die Videos immer in einem neuem Fenster angezeigt werden und nicht in der Lightbox wie die Bilder (beim verwenden des Default-Templates)
Wenn ich das Template gallery_default_video.html5 verwende dann werden Bilder und Videos in der Lightbox angezeigt
Video werden auch an die Lightbox angepasst aber die Bilder sind immer in voller Auflösung und werden nicht an die Lightbox angepasst.

Hat jemand einen Tipp welche Template-Anpassung ich machen muss? Danke!

Wenn du Bilder und Videos mischt, wirst du unterschiedliche Lightbox-Instanzen im Template erstellen müssen, denke ich. Die Vorgaben für Videos sind nicht zwingend passend für Bilder.

[tbruhn]

Hast du sowas vielleicht schon mal umgesetzt oder ein Tipp für mich?
Folgendermaßen sind mein Template derzeit aus.
Videoanzeige passt für mich so
Bildanzeige wird leider zu groß in der Lightbox angezeigt und nicht automatisch angepasst.

<ul class="cols_<?php echo $this->perRow; ?> flex-gallery" id="gallery_<?php echo $this->id; ?>" itemscope itemtype="http://schema.org/ImageGallery">
<?php
$intItem = 0;
?>
<?php foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php if ($col->addImage): ?>
<li class="entry row<?php echo $this->perRow; ?> <?php echo $col->class; ?>">
<figure class="image_container" itemscope itemtype="http://schema.org/ImageObject">

<?php $this->insert('picture_default', $col->picture); ?>

<?php
$itemId = $this->id.'_'.$intItem;
$isVideo = false;
if( in_array(\pathinfo($col->href,PATHINFO_EXTENSION), array('mp4','mov','ogv','webm')) )
{
$isVideo = true;
}
?>

<?php if ($col->href): ?>
<a href="<?php echo $col->href; ?>" class="gallery_link_<?= $this->id; ?><?= $isVideo ? '_video' : ''; ?>" <?= $col->attributes; ?> title="<?php echo $col->alt; ?>" itemprop="contentUrl">
<?php endif; ?>

<?php if ($col->href || $col->caption): ?>
<div class="content">
<div class="content-outside">
<div class="content-inside">
<div class="capt" itemprop="caption"><?php echo $col->caption; ?></div>
<?php if (strlen($col->href) > 0 && strlen($col->caption) < 1): ?>
<i class="fa <?= $isVideo ? 'fa-play-circle': 'fa-plus-circle'; ?> fa-3x"></i>
<?php endif; ?>
</div>
</div>
</div>
<?php endif; ?>

<?php if ($col->href): ?>
</a>
<?php endif; ?>

<?php
if( $isVideo ): ?>
<div style='display:none'>
<div id="inlinevideocontent_<?= $itemId ; ?>" class="inlinevideocontent">
<video id="video_<?= $itemId; ?>" class="video" controls autoplay>
<source src="<?= $col->href; ?>" type="video/mp4">
</video>
</div>
</div>

<script>
jQuery(document).ready(function()
{
var video = document.getElementById("video_<?= $itemId; ?>");
if( jQuery(video).attr('autoplay') )
{
video.muted = true;
}

jQuery('.gallery_link_<?= $this->id; ?>_video').colorbox(
{
rel:"gallery<?= $this->id; ?>", inline:true, width:"80%", height:"auto", maxWidth:"500px",href:"#inlinevideocontent_<?= $itemId ; ?>",
onOpen: function()
{
if( jQuery(video).attr('autoplay') )
{
video.muted = false;
video.play();
}
},
onClosed: function()
{
video.pause();
}
});
});
</script>
<?php endif; ?>

</figure>
</li>
<?php endif; ?>
<?php $intItem++; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>


<script>
jQuery(document).ready(function()
{
jQuery('.gallery_link_<?= $this->id; ?>').removeAttr('data-lightbox');
jQuery('.gallery_link_<?= $this->id; ?>').colorbox({rel:"gallery<?= $this->id; ?>"});
});
</script>