Wordpress Plugin: Thumbnails in Graustufen umwandeln?

sepp88 · #1 (**permalink**) 22.01.2010, 09:25

Hallo Leute,

ich brauche bitte eure Hilfe, da mir einfach das Wissen zu so einem Projekt fehlt. Ich glaube an und für sich wäre mein Vorhaben gar nicht so schwer, aber alleine habe ich keine Chance.

Was will ich schaffen:
Ich will ein Wordpress Plugin basteln, das nichts anderes macht als the_content() (also die Ausgabe jedes Wordpress Artikels) auf Bilder zu durchsuchen und diese durch irgend eine Graustufen Funktion schickt.

@hemfrie hat mir schon ein wenig beim Starten geholfen.
http://xhtmlforum.de/59913-javascrip...tml#post456326

Allerdings weiß ich einfach nicht genau wie ich das Ganze angehen soll.

Schlussendlich soll einfach nur ein Plugin rauskommen, der nach dem Aktivieren nichts anderes macht, als alle Bilder eines Wordpress Themes in Graustufen umwandelt. Die Bilder sollen aber nicht am Server umkonvertiert werden sondern nur im Frontend Schwarz-Weiß ausgegeben werden. Dann kann man nämlich z.b. ein schwarzes Thumbnail anklicken, und das Orginalbild wird in Farbe ausgegeben. So sollte es auch sein.

Das Plugin soll weder verwaltbar oder sonst was sein! Nur diese eine Funktion erfüllen.

Könnt ihr mir da weiterhelfen? Wäre echt nett wenn ihr mich da ein wenig unterstützen könntet.

PHP-Code:


			
<?php

/*

Plugin Name: thumbs-to-grayscale

Description: Wandelt alle Thumbnails im Frontend in Graustufen um.

Version: 1.0

Author: Test

*/



function thumbstograyscale($content) {



    $pattern = '/(<img.+?>)/'; //müsste eigentlich das src Attribut matchen?

    

    preg_match($pattern, $content, $matches);

    print($matches[0]) //gibt das erste Bild aus.

    return $content;

}



add_filter('the_content', 'thumbstograyscale');

?>

Ich hätte mir das Ganze so vorgestellt:
1.) Einen regexp pattern definieren der das src Attribut aller img Tags ausgibt.
2.) mit preg_match den $content auf den $pattern prüfen.
3.) Dann habe ich einen Array mit den gesamten Pfadangaben am Server zu den Bildern.
4.) Mit einer Schleife alle Bilder durch eine Funktion schicken die die Bilder in Graustufen umwandelt und schlussendlich..
5.) mit return $content; wieder ausgibt.

Ist diese Herangehensweise überhaupt "richtig" oder sinnvoll?

Es wäre echt nett, wenn ihr mich da ein wenig untersützen könntet, da mir hierfür einfach ein wenig die Erfahrung fehlt.

Danke vielmals

sepp88 · #2 (**permalink**) 22.01.2010, 15:58

Keiner eine Hilfestellung für mich? Einen Ansatz? Zumindest die Besätigung meiner Annahme, dass es so funktionieren könnte?

chorn · #3 (**permalink**) 22.01.2010, 16:42

Ich habe leider keine Ahnung von Wordpressplugins, aber probier es doch einfach mal mit was simpleren aus, oder einfach erstmal damit alle Pfadangaben rauszufiltern. Dein Konzept klingt gut, nur das mit dem "in Graustufen umwandeln" sollte man klären - willst du die Bilder direkt umwandeln und die Originale überschreiben? Willst den Pfad der Bilder auf ein Script umleiten das dir die Bilder in Graustufen zurückgibt? Willst du die Bilder unter anderem Namen speichern und die Pfadangaben entsprechend umbiegen? Irgendwo musst du die Graustufenbilder herbekommen - also speichern, ggf. wenigstens temporär.

sepp88 · #4 (**permalink**) 22.01.2010, 18:17

Danke!
Das mit den Pfadangaben rausfinden ist gar nicht mal so schwer. Es müsste nur noch der regexp pattern angepasst werden um $content nich auf <img /> zu durchsuchen, sondern auf <img src="*"/>.

Dann hätte ich die Pfade schon.

Zu den Graustufen weiß ich eben selber nichts, daher habe ich ja hier nachgefragt. Ich bin mir eben nicht im klaren wir man das lösen sollte. Klar ist, ich will nicht im Wordpress Core irgendwas überschreiben. Alle Bilder sollen sowohl beim Uploaden auf den Server als auch weiterhin immer farbig bleiben. Das tolle an meiner "Wunschlösung" wäre, dass z.b. ein Blog dann sämtliche Minitauren eines Beitrags in Graustufen ausgibt, wenn man ein Bild allerdings anklickt und es wird das Orginal (in großer Version, sei es in einer Lightbox oder auch normal) geladen, dann wäre dieses farbig. Das würde ich ganz cool finden.

Mir fehlt es eben leider am Verständnis, wie man das ganze genau umsetzen sollte! Ich glaube so ein Plugin in diese Richtung wäre nicht mal sehr aufwändig, da er eben nicht in den Core von Wordpress eingreift, noch sonst irgendwelche Verwaltungsoptionen oder sontsiges benötigt.

chorn · #5 (**permalink**) 22.01.2010, 19:19

Dann musst du dich wie bei allen Thumbnaillösungen zwischen Speicherplatz und Performance entscheiden. Entweder du speicherst jedes Bild in zwei Versionen auf dem Server, oder du berechnest es bei jeden Aufruf neu.

Lösung 1:

Abfragen, Ob Bild schon in einer s/w-Version vorliegt, sonst generieren, in beiden Fällen URL ersetzen.

Lösung 2:

Als src eine PHP-Datei mit dem Bildnamen als Parameter eintragen. Die Datei liest das Bild als Datei ein, bearbeitet es und gibt dann entsprechenden Header und das neue Bild aus.

hemfrie · #6 (**permalink**) 22.01.2010, 22:39

Hallo Sepp,

ich hab mir jetzt nochmal etwas Zeit genommen und das ganze mit einem WordPress probiert. Der Test funktioniert schonmal, wobei ich keine Eventualitäten wie z.B. verschiedene Bildtypen usw. abfrage.

----------------------------

Folgender Aufbau:

Ins Plugin Verzeichnis packst Du ein Verzeichnis "grayscale".

Dort befinden sich die Plugindatei "grayscale.php" und die Umwandler Datei "create_image.php"

grayscale.php

PHP-Code:


			
<?php

/*

Plugin Name: thumbs-to-grayscale

Description: Wandelt alle Thumbnails im Frontend in Graustufen um.

Version: 1.0

Author: Test

*/



function thumbstograyscale($content) {

  $content = preg_replace('%(<img[^>]*src=[\'"])(.*)(wp-content/uploads/.*?)([\'"])%im', "$1$2wp-content/plugins/grayscale/create_image.php?src=$2$3$4", $content);



  return $content;

}



add_filter('the_content', 'thumbstograyscale');

?>

Hier werden alle Imagepfade ersetzt.

Beispiel:

Bild im Quelltext vor dem replace:

<img height="56" width="300" alt="test" src="http://wordpress.local/wp-content/uploads/2010/01/testbild.jpg" title="testbild" class="alignnone size-medium wp-image-8"/>

und nach dem replace:

<img height="56" width="300" alt="test" src="http://wordpress.local/wp-content/plugins/grayscale/create_image.php?src=http://wordpress.local/wp-content/uploads/2010/01/testbild.jpg" title="testbild" class="alignnone size-medium wp-image-8"/>

Es wird also anstelle des normalen Bildpfades die create_image.php Datei aufgerufen und der eigentliche Bildpfad per GET übergeben.

create_image.php

PHP-Code:


			
<?php                                                                            

$src = $_GET['src'];                                                             



$source_file = $src;



$im = ImageCreateFromJpeg($source_file);



$imgw = imagesx($im);

$imgh = imagesy($im);



for ($i=0; $i<$imgw; $i++)

{

        for ($j=0; $j<$imgh; $j++)

        {



                // get the rgb value for current pixel



                $rgb = ImageColorAt($im, $i, $j);



                // extract each value for r, g, b



                $rr = ($rgb >> 16) & 0xFF;

                $gg = ($rgb >> 8) & 0xFF;

                $bb = $rgb & 0xFF;



                // get the Value from the RGB value



                $g = round(($rr + $gg + $bb) / 3);



                // grayscale values have r=g=b=g



                $val = imagecolorallocate($im, $g, $g, $g);



                // set the gray value



                imagesetpixel ($im, $i, $j, $val);

        }

}



header('Content-type: image/jpeg');

imagejpeg($im);

?>

Hier wird nun das Bild umgewandelt. Das Skript ist das von Dir verlinkte (im anderen Thread)

----------------------------

Das ganze ist natürlich nur sehr einfach gehalten und wenn Du z.B. ein anderes Bildformat als jpg nutzen würdest käme es momentan zu einem Fehler. Auch das Replacement des Bildpfades ist im Moment nur auf Bilder ausgelegt, deren Bildpfad absolut angegeben wurde und die sich im Standard Upload-Verzeichnis befinden.

Für eine sichere und fehlerfreie Funktion müssen also noch einige Dinge abgefragt und abgefangen werden. Prinzipiell könnte das ganze aber ein Ansatz für Dich sein.

sepp88 · #7 (**permalink**) 23.01.2010, 13:07

Tausend Dank! Genau so hab ich mir das vorgestellt. Ganz ehrlich, sowas hätte ich ohne dich nicht mal annähernd geschafft. Ich versuche jetzt mal ein wenig weiterzuspinnen. Das mit den verschiedenen Filetypes versuch ich zuerst. Das mit der relativen Pfadangabe schaff ich sicher nicht, weiß nicht wie ich da dran gehen soll. Aber das muss es für meine Zwecke jetzt auch mal nicht erfüllen. Sollte man den Plugin mit der Mitwelt sharen und freigeben (was ich vorhätte, weil vielleicht kann das auch noch wer anderer benötigen), dann wäre vielleicht nicht schlecht, wenn auch mit relativen Pfadangaben gearbeitet würde.

Auf jeden Fall mal vielen vielen Dank, ich versuche jetzt mal mein Bestes und probier ein wenig weiter zu basteln.

sepp88 · #8 (**permalink**) 23.01.2010, 13:16

Ein paar Fragen im Voraus. Hängen andere Bildtypen nur schlussendlich davon ab wie ich den header setze?

PHP-Code:


			
header('Content-type: image/jpeg');

imagejpeg($im);

Also wenn ich image/gif schreiben würde, würde ein gif entstehen?

Ich persönlich würde ja nur auf die gängigsten drei Webformate (jpeg, gif, png) abzielen. Mehr würde ich nicht unterstützen. Aber muss dann auch das create_image script dementsprechend umgeschrieben werden?

Eine Verständnisfrage: Muss ich ich das normal verwendete Bildmaterial abfragen (welches Format) und dann mit dem create-image script wieder das gleiche Format in Graustufen erzeugen?
Oder generell aus allen Formaten, egal ob das Ursprungsbild ein gif oder ein png war, immer ein jpeg generieren?

Soll ich per preg_match irgendwie das aktuell Bildformat abfragen, wenn diese z.b. "gif" ist, dann übergebe ich gif an create_image.php und diesen ändert dann folglich nur den header type?

Denke ich da falsch?

hemfrie · #9 (**permalink**) 23.01.2010, 13:43

Hallo Sepp,

Dein Gedankengang ist schon völlig richtig. Du musst also ersteinmal prüfen um was für ein Bildtyp es sich handelt und dann entsprechend darauf reagieren. Zu ändern brauchst Du nur 3 Stellen.

z. B. für ein PNG

1. $im = imagecreatefrompng($source_file);
2. header('Content-type: image/png');
3. imagepng($im)

-------------------------------------

Mit Hilfe des Bildpfades $src kannst Du nun prüfen um welchen Bildtyp es sich handelt und entsprechend reagieren.

PHP-Code:


			
if (preg_match('/\.(\w{3,4})$/i', $src, $reg)) {

    $img_ext = strtolower($reg[1]);

}

img_ext ist jetzt die entsprechende Endung der Datei.

Den Rest schaffst Du alleine

sepp88 · #10 (**permalink**) 23.01.2010, 15:24

Danke, aber du hast jetzt meine Verständnisfrage nicht beantwortet

Ich schätze mal, dass dieser Plugin in Verwendung mit vielen Bildern relativ Performance-beeinträchtigend ist, oder? Auf jeden Fall wäre es Performance-technisch sicher besser die Bilder unberührt zu lassen, das ist klar

Aber sollte man darauf achten, z.b. egal ob gif, png oder jpeg als Ausgangsbild, dass man IMMER ein Graustufen-Jpeg draus macht? Gibt es da Unterschiede? Ist es vielleicht besser (performance-freundlicher) jpegs zu generieren als pngs? Oder ist das das Selbe?

Liegt irgendworin ein besonderer Vorteil? Wäre es nicht egal ob ich immer ein jpg draus mache, anstatt die "umständlichen" Abfragen des Formates und dann dementsprechend wieder das selbe Format daraus machen? Ist doch für jeden Wordpress Nutzer relativ egal, ob jetzt jpgs, gifs oder pngs im Quelltext findet?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe mit Plugin will nicht funktionieren?	sepp88	Javascript & Ajax	2	12.01.2011 07:35
wordpress plugin: zwei optionen speichern?	sepp88	Serveradministration und serverseitige Scripte	0	14.02.2010 11:52
Javascript Bilder meines Blogs in Graustufen umwandeln?	sepp88	Javascript & Ajax	9	21.01.2010 22:25
wordpress PHP frage?	sepp88	Serveradministration und serverseitige Scripte	2	18.08.2009 21:58