Hi,
hier möchte ich euch einmal darstellen wie man mit einfachen Bordmitteln von Contao eine Schwarz-Weiß Gallery mit Hover Effekt erstellt. Die SW-Bilder werden dabei dynamisch per PHP generiert und es findet eine Abfrage statt ob die jeweiligen SW-Bilder schon im Cache-Verzeichnis existieren oder nicht, damit keine Performance-Einbußen entstehen, so werden nicht jedes mal die Thumbnails neu generiert. Die Template-Dateien + CSS/Javascript Dateien findet ihr im Anhang, damit ihr schnell loslegen könnt.
Ich lasse die SW-Bilder so generieren, dass sie noch ein wenig mehr Pepp reinbekommen, bzw. Kontrast und Brightness Effekte. Diese könnt ihr in der Template Datei nach belieben umstellen, ebenso die Qualität der generierten Bilder. Falls gewollt, dann solltet ihr beim Rumtesten der verschiedenen Werte darauf achten dass ihr jedesmal wenn ihr einen Wert umstellt auch den Ordner "system/html" leert (dies könnt ihr unter "Systemwartung->Daten bereinigen" durchführen).
Nun zum Code, das Hauptsächliche spielt sich hier ab:
PHP-Code:
<?php
$imageSW = "system/html/".basename($col->src,".jpg")."-sw.jpg";
if(!file_exists($imageSW)){
$image = imagecreatefromjpeg($col->src);
imagefilter($image,IMG_FILTER_GRAYSCALE);
imagefilter($image,IMG_FILTER_CONTRAST,-4);
imagefilter($image,IMG_FILTER_BRIGHTNESS,1);
ob_start();
imagejpeg($image,NULL,80);
$stringData = ob_get_contents(); // read from buffer
ob_end_clean(); // delete buffer
//$gzipData = gzdeflate($stringData); // compress string data with gzip
file_put_contents($imageSW,$stringData,LOCK_EX);
}
?>
IMG_FILTER_CONTRAST ist selbsterklärend und steht für "Kontrast", desto geringer der Wert ist (in dem Beispiel also "-4"), desto höher wird der Dynamikumfang des Bildes
IMG_FILTER_BRIGHTNESS desto höher der Wert ist, desto heller wird das Bild
imagejpeg($image,NULL,80); hier wird unter anderem die Qualität des Bildes angegeben, der Wert 80 dürfte für die meisten Fälle ausreichen
$gzipData = gzdeflate($stringData); spezielle GZIP Kompression, dieser sollte allerdings nur von Leuten benutzt werden die mit der Materie vertraut sind
Nun zur Installation:
1. Kopiert euch gallery_sw.html5 und gallery_sw.xhtml in euer /template Verzeichnis
2. Kopiert tl_files/mylayout/css/gallery_sw.css und tl_files/mylayout/js/gallery_sw.js in euer eigenes Layout (CSS / Javascript) Verzeichnis
3. Bindet die JS und die CSS in euer Template / Layout ein
4. Erstellt in einem Artikel eine Gallery, wählt dabei in den Template-Einstellungen das Template "gallery_sw"
5. Und schon funktioniert das Ganze Viel Spaß dabei.
Für Feedback wäre ich euch dankbar.
Viele Grüße
darki aka Pixelmount