Dieter Petereit 22. August 2013

Customize Images: PHP-Script erlaubt die Manipulation von Bilddateien per URL-String

Es ist schon über ein Jahr her, dass wir Ihnen das PHP-Projekt Adaptive Images von Matt Wilcox vorgestellt haben. Mit Adaptive Images wird die automatische Anpassung der in eine Website eingebundenen Bilddateien auf den Viewport des Besucherbrowsers gewährleistet. Dario D. Müller ließ sich von Adaptive Images inspirieren, entwickelte aber mit Customize Images dennoch etwas völlig anderes. Customize Images erlaubt die gezielte Bildmanipulation per URL-String…

customize-images

Customize Images: Gezielte Eingriffsmöglichkeiten statt automatischer Auflösungsanpassung

Während der Anwendungsfall von Adaptive Images in Zeiten von responsivem Webdesign nahezu selbsterklärend ist, muss man dem Nutzen von Customize Images schon etwas nachspüren. Interessant an der Herangehensweise ist sicherlich die Bildanpassung über Parameter im Dateiaufruf.

So kann so ein Aufruf aussehen: http:://www.ihredomain.tld/files/bildname_w640_s.jpg

Was hier passiert ist folgendes. Die Datei bildname.jpg wird aufgerufen, jedoch über den Parameter _w640 auf 640 Pixel Breite geändert, wobei der zusätzliche Parameter _s sicherstellt, dass das Seitenverhältnis des Bildes gewahrt bleibt. Ähnlich funktionieren die Parameter _h250 oder _w640_h250. Ich denke, die Funktionsweise wird klar.

Die eigentlichen Funktionsdateien .htaccess, index.php, class.customize-images.php werden zweckmäßigerweise direkt mit im Ordner files abgelegt. Weitere Installationsschritte sind nicht erforderlich. Die .htaccess sorgt für die erforderlichen Umleitungen.

Neben dem Parameter _s für die Beibehaltung des Seitenverhältnis, bietet sich der Parameter _c an, der bei einem Bild, bei dem sowohl Breite wie Höhe definiert ist, dafür sorgt, dass das Seitenverhältnis durch Weglassen von Bildinhalten, also durch Cropping, Schneiden, gewahrt bleibt. Weniger sinnvoll erscheint allerdings der ebenfalls verfügbare Parameter _d, der das Bild anhand der übergebenen Breite und Höhe entsprechend verzerrt (_d = distort).

Die einmal behandelten – mit Ausnahme der verzerrt dargestellten – Bilder werden gecacht und stehen so für weitere Aufrufe ohne neuerliche Vorbehandlung zur Verfügung. Das Caching kann über den Parameter ?dev abgeschaltet werden.

Customize Images ist ein ganz frisches Projekt und erst am 15. August auf Github ins Leben gerufen worden. Es kann unter GNU GPL-Lizenz frei verwendet werden.

Links zum Beitrag:

  • Customize Images | Github
  • PHP-Projekt: Adaptive-Image als “Customize-Images” | Dario D. Müller
  • Adaptive Images: PHP-Script skaliert Bilder passend in responsiven Layouts | Dr. Web Magazin

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

3 Kommentare

  1. siehe auch das imagebox projekt: das IMHO eine super Architektur auweist
    https://github.com/imbo

  2. Dürfte bei permanenten Schleifenaufrufen + dev Endung den Server mächtig zum Schwitzen bringen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück