Schwarz-Weiß-Thumbnails

Es gibt Möglichkeiten, Farbbild auf der Client-Seite mit Javascript in black and white zu konvertieren. Es wird jedoch nicht in allen Browsern funktionieren und es ist langsam.

Gibt es eine Möglichkeit, WordPress Post-Thumbnails automatisch server side in black and white umzuwandeln?

Das möchte ich erreichen:

  1. Laden Sie ein Farbbild hoch

  2. Habe es in schwarz und weiß angezeigt

  3. Beim Schweben auf die ursprüngliche Farbe wechseln

Solutions Collecting From Web of "Schwarz-Weiß-Thumbnails"

Sie können die php GD-Bibliothek benutzen, die Sie wahrscheinlich schon auf Ihrem Server haben, da WordPress sie benutzt.

Sie können das Bild mit dem Imagefilter IMG_FILTER_GRAYSCALE und / oder IMG_FILTER_CONTRAST filtern.

Beispielsweise

 imagefilter($im, IMG_FILTER_GRAYSCALE); imagefilter($im, IMG_FILTER_CONTRAST, -100); 

Der Hover müsste in Javascript erfolgen.

Eine viel einfachere Lösung wäre die Verwendung des html5-Canvas-Tags oder einer Javascript-Bildbibliothek wie pixastic und das Wrestling mit Browserfreundlichkeit (nicht so schwer mit einem der html5 js-Kits).

Überprüfen Sie, dass http://phpthumb.sourceforge.net/ es einige Filter gibt, die Sie verwenden können, um andere Farbschemas zu generieren.

timthumb unterstützt jetzt Bildfilter … inklusive (Trommelwirbel) einen Graustufenfilter.

http://www.binarymoon.co.uk/2010/08/timthumb-image-filters/

total server-seitig und timthumb hat mit seinem Caching viele Geschwindigkeitsverbesserungen gesehen … also werden die Bilder nicht jedes Mal neu erstellt.

  

dann könntest du das Bild wieder ohne den Filter ausspucken … so dass du 1 Farbe und 1 Grauskala hast …. setze die eine absolut übereinander und benutze jquery, um die Deckkraft bei Hover zu animieren. Ich mag das doppelte Markup nicht, aber wenn ich alles on the fly (ich habe es mit pixastic gemacht) auf mehreren Bildern gemacht habe, habe ich einfach meine Ladezeit runter gezogen.

 

Ich fand, dass ich timthumb auf beiden verwenden musste, um sicherzustellen, dass sie genau die gleiche Größe haben … und irgendwelche gelegentlichen Pixelrundungserrors verhindern.

In der Schleife können Sie die vorgestellten Bildinformationen mit einigen der folgenden Informationen erhalten:

 $image_id = get_post_thumbnail_id(); $image = wp_get_attachment_image_src($image_id,'large', true); $alttext = get_post_meta( $image_id, '_wp_attachment_image_alt', true); ?> $src = $image[0]; $width = $image[1]; $height = $image[2];