Deep-Zoom im WordPress-Blog

  • Beitrags-Kategorie:Code / Webdesign
  • Lesedauer:5 min Lesezeit

Als ich Anfang August den Artikel zum abfotografierten und zusammengesetzten Kreide-Blumenbeet in der Erfurter Fußgängerzone veröffentlichte, gab es ein Problem: Das Bild war krasse 51.345 x 6.418 Pixel groß. Bisher hatte ich Bilder auf der Webseite maximal mit 1200 Pixel an der langen Kante veröffentlicht. Also die klassische Voransicht und wenn man drauf klickt sieht man das Foto in einer Art Lightbox etwas größer. Bei einem Seitenverhältnis von 8 zu 1 ist das immernoch zu klein. Es geht also darum, ein Bild nicht nur so:

sondern mit erweiterten Zoomfunktionen und auch im Vollbildmodus auf der Webseite darzustellen:

Erst durch das tiefe Zoomen kommen bei diesen sehr großen Bildern die Details richtig zur Geltung.

Da erinnerte ich mich vage an eine Webseite wo man riesige Panoramen – Gigapixel – erkunden konnte indem man sich zoomend und schiebend hindurch bewegte. Nach etwas Recherche kam ich auf die dahinter liegende Engine – zoomify.

Da gibt es eine Free-, Express-, Pro- und Enterprise-Version. Zum Testen hatte ich mir die Free-Version heruntergeladen. Der Konverter nimmt das darzustellende Bild und erzeugt für jede Zoomstufe eine Anzahl quadratische Kachelbilder in einer Ordnerstruktur. Zum Beispiel wurde das Blumenbeet-Bild zu einer Ordnerstruktur aus 7.041 Dateien und 28 Unterordnern. Zoomify setzt daraus später den Ausschnitt des Bildes zusammen, der gerade betrachtet wird und lädt gegebenenfalls Kacheln beim Zoomen oder Schieben nach.

Mit der Free-Version kam ich allerdings schnell an meine Grenzen und ich entschied mich, für etwa 40 Euro eine Pro-Lizenz zu erwerben. Die Features die ich für meine Webseite brauche sind ZIF-One-File-Storage, Zoomify Unlimited Konverter (beides ab Express) sowie Anpassbarkeit der Bedienelemente und Wasserzeichen (beides ab Pro).

Als alles funktionierte habe nach und nach weitere Artikel mit großen Bildern entsprechend erweitert. Nun kann man sich in so manchen Bildern “verlaufen”.

Jetzt wirds technisch.

Falls du auch WordPress benutzt und gern darauf riesige Bilder zoombar unterbringen möchtest, gibt es hier eine kleine Anleitung.

Grundsätzlich sollte man ja nicht an seinem Theme direkt rumpfuschen, denn die Änderungen sind spätestens beim nächsten Update weg.

Als erstes brauchst du ein Child-Theme. Das ist nur ein neuer Ordner unterhalb wp-content/themes deiner WordPress-Installation und eine neue functions.php mit einem Verweis auf das Haupttheme. Das wird hier super erklärt.

Du brauchst einen Ordner, um die Bilddaten (Ordner mit Kacheln oder ZIF-Bilder) abzulegen. Für mich hat es sich als praktischer erwiesen, diesen außerhalb der WordPress-Installation zu verorten und diesen Ordner mit einem FTP-Tool zu pflegen. Da kannst du z. B. auch eine Subdomain drauf legen (z. B. zoom.meineseite.de). Vorteil: Unabhängig von den WordPress-Gegebenheiten, -Updates und -Änderungen liegen die Fotos immer an der gleichen Stelle.

Zoomify besteht aus dem Teil fürs Web (Ordner mit JS-Datei, CSS-Datei, Buttonbilder) und dem Converter. Hier gibt es die Zoomify-Engine. Die verschiedenen Lizenzstufen – Free, Express, Pro und Enterprise – sind verschieden ausgestattet was die Features betrifft. Das wird alles als ZIP zum Herunterladen angeboten. Einfach lokal entpacken.

Die freie Version tut was sie soll – allerdings kann die nur mit Einzelbildern als Kacheln umgehen. Und wer schonmal 7.000 kleine Bilder auf einen Webserver hochgeladen hat, weiß das kompakte ZIF-One-File-Format schnell zu schätzen. Da ist alles in einer Datei und es lädt auch viel schneller. Gibt’s ab 20 Euro. Lohnt sich. Ich habe die Pro-Version für 40 Euro, weil da u. a. noch Overlays und Klickbereiche dazu kommen. Und ich spiel’ doch so gerne mit sowas…

Installation: Einen neuen Ordner zoomify unterhalb deines Child-Themes anlegen – also z. B. wp-content/themes/mytheme-child/zoomify – und dann den Web-Teil aus dem entpackten Archiv dorthin hochladen.

Jetzt kommt meine Zoomify-Ergänzung , die ich auf Github veröffentlicht habe, ins Spiel. Das muss erstmal alles mit in die functions.php deines Child-Themes. Und dann passt du ggf. Pfade und Dateinamen an deine Gegebenheiten an:

Zeile 9: my-zoomify-engine-scriptfile-min.js ersetzen durch den Namen deiner JS-Datei. Oder benenne deine JS-Datei so um. 😉

Zeile 16: Hier kommt der Pfad zu den ZIF-Bildern oder Kachelordnern hin, z. B. https://zoom.meineseite.de/ – beachte hier das “/” am Ende.

Das wars eigentlich dann schon.

Meine Funktion wertet einen Shortcode*

[ zoomify name="myfile.zif" ... ]

aus und übersetzt die darin enthaltenen Optionen in einen einen Javascript-Funktionsaufruf. Nicht jedes Zoomify-Paket unterstützt alle Parameter. Ich habe auch nur die gängigen im Array in den Zeilen 21-42 der functions.php mit ihren Vorgabewerten eingepflegt. Das bestimmt auch, welche Parameter im Shortcode möglich sind. Wichtig ist hierbei: Im Script müssen die Begriffe genau so groß und klein geschrieben werden wie in der Zoomify-Dokumentation*, im Shortcode immer alles klein.

* Beim Beispiel-Shortcode muss natürlich das erste Leerzeichen raus. Ich wollte aber den Code zeigen. Das war dann ein richtiger Kampf zwischen Willen und WordPress. Wir konnten uns beide auf diesen Kompromiss einigen

** die Zoomify-Dokumentation liegt dem Download als HTML-Datei bei.

Sven

Sven Wachsmuth wurde 1978 geboren, ist in Emleben bei Gotha aufgewachsen, wohnt seit 2003 in Erfurt. Er experimentiert seit Anfang der 1990er sowohl mit den kreativen Dingen, die man so mit einem Computer anstellen kann als auch mit traditionellen Techniken wie Schreiben, Zeichnen, Fotografie und Modellbau. Inspiration findet er in der Natur und der Geometrie. mehr erfahren

Dieser Beitrag hat 2 Kommentare

  1. Andi

    mmmh, ich dachte, hier würde jetzt erklärt werden, wie ich das zoomify Bild in WordPress dargestellt bekomme. Leider nicht. 🙁

    1. Sven

      Danke für den Hinweis. Da hatte ich wohl vergessen den fertig zu schreiben.

Schreibe einen Kommentar