Kategorien
Programmierung Sonstige Programmiersprachen

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
Kategorien
Design HTML/CSS

Least.js: Responsive Bildergalerie auf Basis von HTML5, CSS3 und jQuery

Normalerweise stelle ich keine Galerie-Scripts vor. Gefühlt Tausende existieren in den nicht so fernen Weiten des Netzes und fast wöchentlich kommen neue hinzu. Das jQuery-Plugin von Kamil Czujowski und Sergej Müller jedoch sticht aus der Masse hervor. Es basiert auf aktuellen Standards und eignet sich außerordentlich gut für den Einsatz quer über alle Geräteklassen.

least-startseite

Least.js: Einfach zu implementierende Bildergalerie mit LazyLoad

Eine Bildergalerie mit Least.js entsteht stets auf der Basis einer Liste. Die einzelnen Bilder sind Listen-Elemente, die wiederum Listen-Elemente für die Beschriftung innerhalb des Hover-Overlays enthalten.

least-nur-thumbnails
Least.js: Übersicht der Thumbnails

Wie auch bei anderen Galerien üblich, werden initial Thumbnails in der Übersicht angezeigt. Per Klick auf das Thumbnail ruft man die eigentliche Bilddatei auf. Innerhalb des Listen-Elements zum Bild sorgt zunächst ein Gif dafür, dass sich ein weißer Schatten beim Hovern über das Bild legt. Dabei werden auch die in weiteren Listen-Elementen abgelegten Overlay-Texte angezeigt. Das eigentliche Thumbnail steuert man über ein HTML5-Data-Attribut namens data-original ein. Die verschiedenen Zustände sind innerhalb des übergeordneten Listen-Elements in separaten Div geordnet.

Zur Verdeutlichung des Gesagten; so sieht das beispielsweise für ein einzelnes Bild aus:

Der Funktionsaufruf des Galerie-Scriptes erfolgt über die ID der Galerie folgendermaßen:

$(document).ready(function(){
    $('#gallery').least();
});

Klickt man nun eines der angezeigten Vorschaubilder an, so wird das größere Original oberhalb der Thunbnail-Liste in das erste Listen-Element mit der ID fullPreview geladen.

least-mit-original-oben
Least.js: Anzeige des Originals nach Klick oberhalb der Thumbnails

Über das jQuery-Plugin LazyLoad sorgen die Entwickler dafür, dass die größeren Originale erst vom Server geholt werden, wenn sie auch tatsächlich geklickt wurden. Das ist insbesondere bei größeren Galerien sinnvoll, da ohne LazyLoad beim ersten Aufruf alle Thumbnails nebst aller Originale vorgeladen werden müssten, was sich in langsamem Bildaufbau und gefühlt langen Wartezeiten bemerkbar machen würde.

Die Kehrseite des Einsatzes von LazyLoad ist natürlich, dass nach dem Klick auf ein Thumbnail zunächst eine oder mehrere Gedenksekunden vergehen, bevor oberhalb der Vorschaugalerie tatsächlich das Originalbild sichtbar wird. Der Effekt lässt sich natürlich minimieren, indem man seine Bilder maximal in 720p oder 1080p hinterlegt und mit Photoshop oder meinem Lieblings-Kompressor JpegMini ordentlich vorbehandelt. Auf der Demoseite zu Least.js haben sich Czujowski und Müller auf eine maximale Auflösung von 960 x 600 Pixeln für das größere Originalbild festgelegt.

So funktionieren Bildergalerien mit Least.js vollständig responsiv, fließend bei Änderungen des Viewports. Skalieren Sie auf der Demoseite schlicht mal Ihr Browserfenster. Es dürfte LazyLoad zu verdanken sein, dass die Skalierung in derart hoher Geschwindigkeit und völlig ohne Ruckler und Wartezeiten erfolgt. Während das Originalbild ab einer Viewportbreite von 960 Pixeln zentriert, fließt die Thumbnailgalerien weiter über die volle Seitenbreite. Verkleinert man den Viewport, skaliert auch das Originalbild frei mit, bis zur vordefinierten Breite eines einzelnen Thumbnails.

Wer sehr kleine Galerien verfügbar machen will oder LazyLoad schlicht nicht mag, kann es via Parameter im Funktionsaufruf auch deaktivieren. Weitere Parameter sorgen etwa dafür, dass die Galerie nicht nach dem Zufallsprinzip, sondern streng numerisch nach vergebenen Dateinamen sortiert wird.

Least.js eignet sich ganz hervorragend dafür, Bildergalerien in moderner Optik auch auf mobilen Clients verfügbar zu machen, ohne dabei deren Look auf Desktop-Geräten zu beeinträchtigen. Least.js steht auf Github zum kostenfreien Download zur Verfügung. Vor der Nutzung in kommerziellen Projekten empfiehlt es sich Kontakt zu den Entwicklern aufzunehmen. Eine Lizenz, die Aufschluss über die erlaubte Nutzung geben würde, ist dem Script nicht beigegeben.

Links zum Beitrag