Vorschaubilder der Galerie in schwarz/weiß

**EmZett** · 15.11.2013, 09:15

Hallo zusammen,

als Neueinsteiger frage ich mich, wie ich es am einfachsten hinbekomme in Contao 3.1.4 die Vorschaubilder der Galerien in schwarz weiß auszugeben.
Ohne CMS hatte ich es mit prettyphoto gelöst, aber die Redakteure sollen die Bilder über die Auswahl der Galerie einpflegen.
Kann mir da einer einen Tipp geben.
Habe schon es schon über css mit "filter: grayscale(100%)" versucht, aber da verschwinden die Bilder leider ganz im Firefox und im Safari werden sie weiterhin farbig angezeigt was laut working draft der CSS Filter an den Versionen der Browser liegt.
Kann ich evtl. andere Bilder für die Vorschau einbinden als die die dann groß gezeigt werden?

Vielen Dank schon mal für jede Hilfe!

Beste Grüße
EmZett

**Bas** · 15.11.2013, 10:50

Versuch es doch mal so: http://www.karlhorky.com/2012/06/cro...-with-css.html

Mit ein bisschen Googeln und Ausprobieren findest Du bestimmt einen Weg .. sprich soviel Graustufen wie möglich und für alle anderen Fallback mit normalen bunten Bildern.

Alternative zu CSS seh ich nicht, denn selbst wenn man die Galerie umprogrammiert, damit man Vorschaubild und Grossansicht getrennt einbinden kann, steigt der Pflegeaufwand extrem, schliesslich müssen die Redakteure die SW-Preview-Grafiken alle von Hand vorbereiten.
Ich würde es für einen Fehler halten, die Pflege massiv zu komplizieren nur um eine grfische Spielerei umzusetzen.

**EmZett** · 15.11.2013, 13:20

Hi Bas,

danke für den Hinweis. Ich habe ja vorher gegoogelt und das hinter Deinem Link hatte ich auch versucht, aber wenn ich den CSS Code in das Feld eigener Code kopiere und speichere bleibt nur folgendes übrig:

filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

Und das bewirkt nur das die Bilder nicht mehr sichtbar sind....

**comanche** · 15.11.2013, 13:29

Zitat von EmZett

Hi Bas,

danke für den Hinweis. Ich habe ja vorher gegoogelt und das hinter Deinem Link hatte ich auch versucht, aber wenn ich den CSS Code in das Feld eigener Code kopiere und speichere bleibt nur folgendes übrig:

filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

Und das bewirkt nur das die Bilder nicht mehr sichtbar sind....

Wenn Du unter System > Einstellungen > Sicherheitseinstellungen > Erlaubte HTML-Tags alle dort verwendeten Tags (<svg>, <filter>, usw.) einträgst, dann sollte der Code auch ungekürzt übernommen werden.

**Kahmoon** · 15.11.2013, 13:32

Du kannst das recht leicht mit jQuery machen.

http://solemone.de/code/code-example...as-and-jquery/

**EmZett** · 19.11.2013, 18:17

@ comanche: hat leider trotzdem den code gekürzt.

@Kahmoon: Super! Damit klappt es hervorragend!! Vielen Dank

**ktkt** · 21.11.2013, 14:41

ich hab gerade erst das hier probiert:
http://www.suralin.de/bilder-mit-css-in-sw-umwandeln

Code:

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);

und zum aufheben:

Code:

filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;

das funktioniert eigentlich echt gut - außer im IE10, da geht's nicht (IE4 bis IE9 ist kein Problem).

"transition" von sw zu bunt scheint nur im Chrome zu funktionieren, ist jetzt aber in meinem Fall nicht so schlimm.