Inline-Bilder automatisch skalieren in Drupal - Image Resize Filter

Bilder in Drupal und kein Ende. Man kennt folgendes Szenario: Der User lädt über das Upload-Feld des Wysiwyg-Editors ein Bild hoch. Da dieses zu gross ist, benutzt der die praktischen Anfasser, die im Editor-Fenster erscheinen, um es zu verkleinern. Alles wunderbar und sieht auch korrekt aus.

Doch oh Schreck, je nach Internetverbindung lädt die Seite nun extrem langsam. Na klar - das Bild, mit einer modernen Digicam und vielen Megapixeln aufgenommen, ist vielleicht 1,5 MB gross und wurde nur per Html verkleinert. Beim Seitenaufruf müssen jedoch die kompletten 1.5 MB geladen werden. Dieser enorme Overhead ist natürlich sehr unerfreulich. Trotzdem kann man vom normalen User, der sich nicht mit Html auseinandersetzt, nicht verlangen, dass er dies bedenkt. Schliesslich denkt er, dass er die Grösse des Bildes verändert, das Datenvolumen ist nicht sein Fehler.

Gefahr erkannt, Gefahr gebannt

Die Lullabots in Form von Nathan Haug haben dieses Problem erkannt und eine einfache wie praktische Lösung vorgestellt. Image Resize Filter funktioniert sehr ähnlich wie Imagecache, nur eben für Inline Images. In diesem Video zeigt der Autor die Benutzung: Man aktiviert den Filter für das gewünschte Eingabeformat und macht ein paar Einstellungen bezüglich der Bildgrösse.

Der Rest funktioniert für den User unsichtbar: Das Bild wird auf eine beliebige Art inline in seiner Originalgrösse eingefügt. Wenn man es nun über die Anfasser verkleinert, wird eine Kopie des Originalbildes in der entsprechenden Grösse erzeugt und in einem Ordner abgelegt. Diese verkleinerte Version wird für die Anzeige verwendet - kein unsinniges Laden des grossen Bildes mehr. Ändert der Benutzer seine Meinung und vergrössert das Bild wieder - bam wird eine neue Version erzeugt, wieder vom Originalbild, so daß die Bildqualität immer erhalten bleibt.

Das neu erzeugte Bild überschreibt die vorherige verkleinerte Version, so daß sich kein Datenmüll ansammelt. Eben genau wie bei Imagecache. Was mir an dem Konzept besonders gefällt, ist, daß es vom Benutzer keinerlei Nachdenken erfordert, sondern im Hintergrund das tut, was er durch die Grössenänderung sowieso erreichen will, und nur dafür sorgt, dass das Resizen zu einer "sauberen" Aktion wird.

Go, Lullabot!

 

Kommentare

Rui

Geht mir genauso, weil ich bis jetzt grade eben ehrlich gesagt nicht wusste wie ich das ändern soll. Ich habe dann die Bilder immer zu einem Freund geschickt und dieser hat sie mir dann kleiner gemacht sodass ich sie dann so auf die HP schmeissen konnte. Das war ganz geschickt und ich fand es immer super aber halt umständlich. Wenn das aber mit diesem Tool geht, dann wäre das klasse. Ich muss das gleich mal probieren, denn es würde mir sehr viel Aufwand ersparen.

Bild von tommi
tommi

Wenn es nur um das verkleinern von Bildern geht - dazu bietet auch IMCE eine Option, man legt dann eine Kopie des Originals an.

Die hier beschriebene Möglichkeit ist allerdings flexibler, da man kleiner und grösser machen kann wie man will, ohne sich drum zu kümmern, was technisch abläuft.

Delphi

Hallo ich suche nach einer Möglichkeit verkleinerte Bilder im Text, per Klick in Originalgröße anzuzeigen, so wie es bei dem Bild hier oben gemacht wird. Kann dazu mal jemand beschreiben, wie das gemacht wird?
Vielen Dank im Voraus.

Baederdeign24

Hallo zusammen,ich muß wirklich sagen das die ein sehr toller Artikel ist.