Eigene Slideshows erstellen mit dem dma-Elementgenerator
Hallo zusammen,
es gibt ja nun für Contao schon so einige, sehr schöne Slideshows/Gallerie-Erweiterungen. Dennoch gibt es manchmal Kundenwünsche, die sich mit diesen Erweiterungen nicht abdecken lassen (siehe z.B. hier). Daher habe ich nun schon für einige Projekte Slideshow-Scripte in Contao-Systeme eingebunden die es nicht als reguläre Erweiterungen gab. Ist ja im Grunde auch kein grosses Ding, wenn man die html-Inhaltselemente nutzt. Der Nachteil dabei ist, daß man natürlich seinen Kunden nicht gerne zumuten möchte mit html-Codeschnipseln zu hantieren.
Mit dem dma-Elementgenerator und etwas php kann man die Geschichte jedoch benutzerfreundlicher gestalten und da das vielleicht noch mehr Leute interessiert, habe ich hier mal ein kleines Tutorial dazu verfasst.
Zielsetzung ist eine Slideshow im Stil der ce_slider Erweiterung zu erstellen. Also ein "Slideshow-Start-Element", ein "Slideshow-Ende-Element" und die Slideshowbilder kommen als einzelne Elemente einfach dazwischen.
Das html von vielen Slideshows (z.B. Wowslider/Galleriffic) sieht oft so aus:
HTML-Code:
<div id="slideshow">
<ul>
<li><img src="image01.jpg"></li>
<li><img src="image02.jpg"></li>
<li><img src="image03.jpg"></li>
</ul>
</div>
Ein Start-Element (<div id="slideshow"><ul>) und End-Element (</ul></div>) als html-Module anzulegen ist kein Problem und die entsprechenden Scripte und Stylesheets bindet man im Seitenheader oder Footer über das Theme-Layout ein. Aber der Knackpunkt ist die Einbindung der einzelnen Bilder in li-Tags. Das kann man mit dem dma-Elementgenerator lösen.
Dazu habe ich ein dma-Element mit der Bezeichnung "Slide" angelegt. Für den Anfang habe ich für das Element erstmal nur ein Feld mit dem Typ "Dateiauswahl" angelegt um einzelne Bilder aus der Dateiverwaltung auswählen zu können.
Nun könnte man in den dazugehörigen Templates "dma_eg_default" und "dma_egfield_default" einfach den überflüssigen Code rauslöschen und die eigenen li-Tags dazusetzen. Das Problem ist aber, daß es dann im Frontend zwar gut aussieht, aber es zerschiesst einem die Darstellung im Backend. Die Templates beeinflussen nämlich die Darstellung im Frontend UND im Backend. Also braucht man eine php-Abfrage die checkt ob das Template gerade im Frontend oder im Backend ausgegeben wird. Die habe ich in mein "dma_eg_default" Template eingebaut:
HTML-Code:
<!-- <div> -->
<?php $__uri__ = $_SERVER["SCRIPT_URI"];
if($__uri__ == "")
$__uri__ = $_SERVER["REQUEST_URI"];
if(preg_match("|contao\/|",$__uri__))
{
$__in_backend__ = true;
}
else
$__in_backend__ = false;
if($__in_backend__) print "<ul>";
?>
<!-- <ul> -->
<?php echo $this->fields; ?>
<!-- </ul> -->
<?php if($__in_backend__) print "</ul>"; ?>
<!-- </div> -->
und das Template "dma_egfield_default" sieht nun bei mir nun so aus.
HTML-Code:
<li>
<!-- <span class="label"><?php echo $this->label ?></span> -->
<!-- <span class="value"> -->
<?php if ($this->addImage): ?>
<!-- <figure class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>> -->
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
<?php endif; ?>
<img src="<?php echo $this->src; ?>" alt="<?php echo $this->alt; ?>">
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<figcaption class="caption"><?php echo $this->caption; ?></figcaption>
<?php endif; ?>
<!-- </figure> -->
<?php else: ?>
<?php echo $this->value ?>
<?php endif; ?>
<!-- </span> -->
</li>
Zum besseren Verständnis habe ich die zu löschenden Codezeilen lediglich auskommentiert. Im nächsten Schritt kann man die Slideshow noch um entsprechende Bildunterschriften und andere Einstellungen erweitern. In diesem Beispiel habe ich Contao 2.11.4 und den dma_elementgenerator 0.0.3 alpha1 verwendet und einmal den Wowslider mit KenBurns-Effekt und ein anderes mal die Galleriffic-Galerie eingebaut.
Und vielen Dank an Stefan, der mir den php-Code zusammengebastelt hat!
