Die Idee
Sie haben eine Website, und wollen nun im Frontend Bilder und Fotos in verschiedenen Formaten und Auflösungen bereitstellen? Thumbnails sollen automatisch generiert werden, Slideshows im Landscape-Format sein und Profilbilder im Portraits-Format?
Inspiration: Adaptive-Images
entwickelte 2012 ein Projekt namens "Adaptive-Images", welches Bilder anhand von Cookies und Bildschirmgrößen rendert. Das Projekt lässt sich gut für Responsive Webdesign nutzen. Es hat jedoch die Nachteile, dass kein manuelles Eingreifen in die Auflösungen möglich ist und die Bilder nicht zugeschnitten werden können.
Projekt: Customize-Images
Um eben diese Funktionalitäten anzubieten, habe ich eine angepasste Version entwickelt, welche ich Open-Source als Customize-Images bereitstelle.
Die Funktionsweise ist die, dass Bilder gleichzeitig als Thumbnail, Slideshow, Profilimages oder für Lightboxen sowie Articleimages verwendet werden können. Das Script reagiert statt auf Cookies und Bildschirmgrößen nun auf selbstdefinierte Bildgrößen und -formate. Über die Request-URL können Höhe- und Breite-Angaben sowie die Modi, das Bild zu skalieren, verzerren oder zu schneiden, definiert werden.
How to use
- Das Projekt enthält die Dateien ".htaccess", "index.php" und "class.customize-images.php" sowie den Ordner "files" mit einem Testbild.
- Kopiere den gesamten Ordner auf einen Webserver oder localhost
- Keine Datenbank oder weitere Installation erforderlich
- Öffne im Browser z.B.:
-
http://domain.com/files/testimage_w450_h250_c.jpg
- Änderung des Bildnamens in der URL:
- Breite- und Höhe-Angaben (_w450, _h250)
- Crop-, Scale-, Distort-Modi (_c, _s, _d)
Freue mich über Unterstützung und Feedback des Projekts.
Links
- Adaptive-Images auf Github
- Customize-Images auf Github
- Customize-Images im Fokus des Dr. Web Magazins
