Jeder der selber eine Website mit CMS betreibt, kennt das leidige Problem bei der Arbeit mit Bildern und den dafür meist notwendigen Varianten in verschiedenen Größen...
Gar einige Systeme erfordern sogar das Bilder "Pixelgenau" vom Kunden eingefügt werden, was meiner Erfahrung nach viele Kunden überfordert oder zumindest für viele sehr zeitaufwändig ist!
Ich löse dieses Problem bei meinem CMS seit Jahren, indem ich Bilder, die in unterschiedlicher Größe oder Formaten benötigt werden über ein PHP-Script laufen lasse. Dieses Script "manipuliert" dann mittels vordefinierten Parametern wie "size", "typ", "format", usw. die Bilddatei und gibt diese dann wieder an den Browser aus. Dieser erkennt das PHP-Script als Bild, da es mittels header-Anweisung (z.B. header('Content-Type: image/jpeg');) gekennzeichnet ist!
Ich habe das dann über meine thumb.php, welche im Rootverzeichnis der Domain liegt, gesteuert und immer dort wo es von Nöten war, die Bilder damit dynamisch angepasst.
Leider hat diese Variante ein paar Nachteile:
Auch wenn diese Methode bisher gut funktioniert hat bringt dennoch die neue Methode, die ich hier kurz erläutern möchte, mehr Möglichkeiten mit sich:
Mein CMS basiert auf einer Standard .htaccess-Datei, die von vielen OpenSource-CMS (wie etwa Wordpress) verwendet wird:
Ich löse dieses Problem bei meinem CMS seit Jahren, indem ich Bilder, die in unterschiedlicher Größe oder Formaten benötigt werden über ein PHP-Script laufen lasse. Dieses Script "manipuliert" dann mittels vordefinierten Parametern wie "size", "typ", "format", usw. die Bilddatei und gibt diese dann wieder an den Browser aus. Dieser erkennt das PHP-Script als Bild, da es mittels header-Anweisung (z.B. header('Content-Type: image/jpeg');) gekennzeichnet ist!
Ich habe das dann über meine thumb.php, welche im Rootverzeichnis der Domain liegt, gesteuert und immer dort wo es von Nöten war, die Bilder damit dynamisch angepasst.
Leider hat diese Variante ein paar Nachteile:
- Für Bilder-SEO nicht sehr geeignet und zudem landen die Bilder z.B. auch in der Google Bildersuche unter dem Pfad www.domain.com/thumb.php?img=Pfad-Zu-Meinem-Bild&usw., was nicht sehr gut aussieht.
- Wenn man ein Bild speichern will, wird einem als Dateiname thumb.php vorgegeben
- Man kann auch externe Bilder durch Angabe eines vollständigen Pfades im img-Parameter (z.B. www.domain.com/thumb.php?img=http://www.externedomain.com/Pfad-Zu-Meinem-Bild&usw.) parsen und verkleinern.
Achtung: Bei parsen von externen Bildern sollte man immer auch die Urheberrechte im Auge haben, da diese Methode zwar kein Hotlinking ist aber man sich fremder Bilddaten bedient!
Auch wenn diese Methode bisher gut funktioniert hat bringt dennoch die neue Methode, die ich hier kurz erläutern möchte, mehr Möglichkeiten mit sich:
Mein CMS basiert auf einer Standard .htaccess-Datei, die von vielen OpenSource-CMS (wie etwa Wordpress) verwendet wird:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [QSA]
Diese 3 Zeilen machen nichts anderes, als JEDEN Pfad-Aufruf an die index.php weiter zu leiten, sofern die URL nicht physisch auf dem Server existiert.
Einfach, effizient und spannend zugeich, da man damit beliebige Pfadstrukturen für sein CMS realisieren kann und man so auch z.B. tote Links und andere Fehlerquellen sehr einfach verarbeiten lassen kann.
Mit diesem Ansatz habe ich nun etwas experimentiert, um gezielt alle Aufrufe von Bilddateien mittels mod_rewirt zu verarbeiten. Nach einigen Versuchen bin ich mit nachfolgender, angepasster .htaccess-Datein zum Ziel gekommen:
Es gibt auch noch eine Vielzahl an weiteren Möglichkeiten, die man mit diesem Script auf Bilder anwenden könnte. Um z.B. der neuen Google-Bildersuche eine andere Version des Original Bildes "unterzujubeln", welche z.B. das Motiv halbtransparent erscheinen lässt...
...da wäre noch einiges möglich ;-)
TIPP:
Wer eine kleine Inspiration für das Script, welches die Bilder mit PHP verarbeitet, benötigt sollte sich das "phpThumb-Projekt" bei sourceforge.net ansehen!
Wenn jemand Fragen oder Ideen hat; ab damit in die Kommentare...
Diese 3 Zeilen machen nichts anderes, als JEDEN Pfad-Aufruf an die index.php weiter zu leiten, sofern die URL nicht physisch auf dem Server existiert.
Einfach, effizient und spannend zugeich, da man damit beliebige Pfadstrukturen für sein CMS realisieren kann und man so auch z.B. tote Links und andere Fehlerquellen sehr einfach verarbeiten lassen kann.
Mit diesem Ansatz habe ich nun etwas experimentiert, um gezielt alle Aufrufe von Bilddateien mittels mod_rewirt zu verarbeiten. Nach einigen Versuchen bin ich mit nachfolgender, angepasster .htaccess-Datein zum Ziel gekommen:
RewriteCond %{REQUEST_FILENAME} \.(jpe?g|gif|png)
RewriteCond %{QUERY_STRING} !^$
RewriteRule . dynimg.php [QSA]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [QSA]
Kurz erklärt:
Die 1. RewriteCond %{REQUEST_FILENAME} \.(jpe?g|gif|png) sucht nach Bilddateien im Format JPG, JPEG, GIF oder PNG, bei denen der QueryString der URL "NICHT LEER" ist (2. RewriteCond %{QUERY_STRING} !^$)!
Wird also eine Bildatei so aufgerufen (z.B. www.domain.com/Pfad-Zu-Meinem-Bild.JPG?size=500&usw) dann läuft der Aufruf nicht zum Originalbild sondern über die Datei dynimg.php! Wird das Bild hingegen auf die Originalquelle verlinkt (z.B. www.domain.com/Pfad-Zu-Meinem-Bild.JPG) passiert nichts.
Somit wird nicht JEDES Bild geparst, da man diese Funktionalität meist nur bei dynamsichen Inhalten benötigt, nicht aber bei Grafiken des Layouts (CSS), Hintergrundbildern, usw.
Innerhalb der Datei dynimg.php können wir jetzt mit den Bilddaten anstellen was wir möchten oder wie in meinem Fall (siehe Bilder-Beispiele oben):
Kurz erklärt:
Die 1. RewriteCond %{REQUEST_FILENAME} \.(jpe?g|gif|png) sucht nach Bilddateien im Format JPG, JPEG, GIF oder PNG, bei denen der QueryString der URL "NICHT LEER" ist (2. RewriteCond %{QUERY_STRING} !^$)!
Wird also eine Bildatei so aufgerufen (z.B. www.domain.com/Pfad-Zu-Meinem-Bild.JPG?size=500&usw) dann läuft der Aufruf nicht zum Originalbild sondern über die Datei dynimg.php! Wird das Bild hingegen auf die Originalquelle verlinkt (z.B. www.domain.com/Pfad-Zu-Meinem-Bild.JPG) passiert nichts.
Somit wird nicht JEDES Bild geparst, da man diese Funktionalität meist nur bei dynamsichen Inhalten benötigt, nicht aber bei Grafiken des Layouts (CSS), Hintergrundbildern, usw.
Innerhalb der Datei dynimg.php können wir jetzt mit den Bilddaten anstellen was wir möchten oder wie in meinem Fall (siehe Bilder-Beispiele oben):
- Einen Quadratischen Bildauschnitt erstellen (links, mitte, rechts)
- Längste Seite auf Wert in Pixel reduzieren
- Einen Ausschnitt im Verhältnis 3:2 erzeugen
- Breite oder Höhe der Bilder auf z.B. 300 px anpassen
- Wasserzeichen dynamisch im Bild einfügen
- usw.
Es gibt auch noch eine Vielzahl an weiteren Möglichkeiten, die man mit diesem Script auf Bilder anwenden könnte. Um z.B. der neuen Google-Bildersuche eine andere Version des Original Bildes "unterzujubeln", welche z.B. das Motiv halbtransparent erscheinen lässt...
...da wäre noch einiges möglich ;-)
TIPP:
Wer eine kleine Inspiration für das Script, welches die Bilder mit PHP verarbeitet, benötigt sollte sich das "phpThumb-Projekt" bei sourceforge.net ansehen!
Wenn jemand Fragen oder Ideen hat; ab damit in die Kommentare...
