Liste der Anhänge anzeigen (Anzahl: 1)
Bildergallery in Schwarz-Weiß mit Mouseover Effekt
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
SW Thumbnails bei normaler Galerie
Hallo,
ich brauchte diese Funktion auch - jedoch nur für die Standardgalerie....
Falls jemand die Standardbildergalerie mit S/W Thumbnails möchte - muss nur ein Template anlegen (z.b. gallery_default_sw), und diesen Code einfügen
HTML-Code:
<table>
<tbody>
<?php foreach ($this->body as $class=>$row): ?>
<tr class="<?php echo $class; ?>">
<?php foreach ($row as $col): ?>
<?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,90);
$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);
}
?>
<?php if (!$col->addImage): ?>
<td class="<?php echo $col->class; ?> empty">[nbsp]</td>
<?php else: ?>
<td class="<?php echo $col->class; ?>" style="width:<?php echo $col->colWidth; ?>">
<figure 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 $imageSW; ?>" <?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>"></a>
<?php else: ?>
<img src="<?php echo $imageSW; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>">
<?php endif; ?>
<?php if ($col->caption): ?>
<figcaption class="caption" style="width:<?php echo $col->arrSize[0]; ?>px"><?php echo $col->caption; ?></figcaption>
<?php endif; ?>
</figure>
</td>
<?php endif; ?>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Dann bei der Galerie einfach das Template auswählen - fertig. Vielleicht benötigt das ja auch mal jemand....
Grüsse Gassi
Liste der Anhänge anzeigen (Anzahl: 1)
<achtung> Beitrag nicht gelesen, nur Titel :eek: </achtung>
Ich hab vor ewigen Zeiten mal n kleines Script geschrieben das Bildern mit der Klasse "grey" per Javascript SW darstellt und per Mousover farbig.
Falls jemand interessiert, ich packs mal rein ;)
