Drupal 7 Modul: Adaptive Image - Test & Tipps! (Themenbereich Responsive Webdesign)

Drupal 7 Modul Adaptive Image Screen width

Um die Funktion des Drupal 7 Moduls "Adaptive Image" zu beschreiben, zitiere ich einfach mal die Modulbeschreibung:

The Adaptive image module provides device-appropriate versions of images from your fields.
You can activate adaptive images by adding an adaptive effect to any of your image styles.

The used technique is derived from http://adaptive-images.com/ by Matt Wilcox.
The hard work is done by Drupal core no need for any additional rewrites.
If image styles work on your website, this module will too.

Hint: Javascript is needed on the clientside to determine the target resolution

Das Modul erfüllt diese Aufgabe tadellos. Abhängig von der Bildschirmgröße wird das Bild via ImageCache im passenden Format ausgeliefert, sodass nicht unnötig große Bilder an mobile Geräte ausgeliefert werden und die Ladezeit sich damit stark reduziert. Es lassen sich perfekt einzelne Abstufungen der Breite festlegen und somit optimal mit CSS3 Media Queries verbinden.

Einen sehr wichtigen Hinweis muss man allerdings insbesondere an Entwickler geben!
Im Gegensatz zum häufig gewählten Verhalten das Responsive Webdesign auch in verkleinerten Browserfenstern wie auf kleinen Bildschirmen (z. B. mobiler Geräte wie Smartphones oder Tablets) anzuzeigen, verwendet das Modul nicht die Breite des Browserfensters als Berechnungsgrundlage sondern die Bildschirmbreite. Diese Entscheidung der Entwickler ist in vielerlei Hinsicht, gerade in Sachen Caching, Cookies usw. nachvollziehbar, man muss es nur eben wissen.

Zu Testzwecken passe ich daher in der Entwicklung die folgenden Zeilen zur Bestimmung der Bildschirmgröße manuell an, um im Browser testen zu können:

Original Quellcode (Bildschirmbreite verwenden):

  1. $js = "document.cookie = 'adaptive_image=' + Math.max(screen.width, screen.height) + '; path=/';";

Modifizierter Entwicklungs-Quellcode (Browserbreite verwenden):

  1. $js = "document.cookie = 'adaptive_image=' + Math.max(window.innerWidth, window.innerHeight) + '; path=/';";

Wichtig: Nach Änderung der Größe eures Browserfensters, müsst ihr unbedingt manuell den Cookie mit dem Namen "adaptive_image" löschen, dies geht in Firefox beispielsweise sehr bequem mit der "Web Developer Toolbar". Auch für andere Browser gibt es solche Tools!
Die Breite wird beim ersten Laden vom Modul in diesem Cookie gespeichert.

Zuletzt noch kurz die Hinweise zur Installation aus der README.txt des Moduls als Hilfestellung zur Verwendung:

CONFIGURING AND USING
---------------------
1. Go to admin/config/media/image-styles
Edit an existing or add a new style. Add the Adaptive image effect.
Click on 'Update style' button.

2. Go to admin/structure/types
Click on "manage display".
Choose a "image" field and click on the edit button.
Choose the previously updated style as image style.
Click on "Update".

Alternativen:
http://drupal.org/project/responsive_images
ist noch eine mögliche Alternative, machte aber direkt mehr Probleme als Adaptive Image und ist weniger pfiffig in Drupal integriert!

http://drupal.org/project/cs_adaptive_image
klingt ebenfalls langfristig sehr sehr interessant!

Also... habt ihr weitere Tipps oder Meinungen?

Kommentare

Adaptive-Images - ganz nett aber...

Adaptive-Images mag ganz nett sein, doch irgendwann wird man auf andere Lösungen zugreifen, nach denen auch ich suche.

Ich habe Adaptive-Images installiert und getestet. Auf meinem Tablet wurden die Bilder nicht dargestellt. Nach einigem Hin und Her entschloss ich mich, das Ganze zu löschen.

Fehlanzeige! Konnte bei Google und Co keine einzige Seite finden, in der beschrieben wird, wie man die Cache-Dateien auch wieder löschen kann.
Das geht nämlich nicht, auch direkt mit Plesk im ftp nicht.

Und nun??????

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.

Weitere Informationen über Formatierungsoptionen