Rahmen um Bilder mit Glas Effekt und gerundeten Ecken

geschrieben 27. Januar 2011 - 20:27 von: Georg Bixa

Nachdem ich bereits die Möglichkeiten von Imagecache in Bilder in Drupal beschrieben habe, möchte ich hier weitere Gestaltungsmöglichkeiten für Bilder vorstellen:<--break->

Das Problem

Kürzlich musste ich die Erfahrung machen, dass es äußerst schwierig ist ein Bild automatisch mit einem Rahmen zu versehen, der nicht einfärbig und rechteckig sein soll. Auf den ersten Blick scheint die Aufgabe einfach: Es sollte "nur" ein weißer Rahmen mit gerundeten Ecken um die Bilder gelegt werden. Doch zahlreiche Versuche mit jquery und dem jQuery Corner Plugin führten nur zu mäßigem Erfolg. Die Rahmung eines Div Containers ist hierbei kein Problem, doch bei der Darstellung von Bildern mit runden Rahmen gehen die Ergebnisse bei verschiedenen Browsern doch weit auseinander.

Die Lösung

Ein anderer Ansatz ist das Überdecken des Bildrandes mit einem Imagecache Preset und dem Modul ImageCache Scale-9 Actions.

Dazu benötigt man zuerst eine Graphik eines Rahmens, den man verwenden will. Das Vektorgraphikprogramm Inkscape leistet hier gute Dienste: mit seiner Hilfe kann man hilfreiche SVG Dateien erstellen und PNG Graphiken mit Transparenzen erzeugen.

Man muss nun:

  • Scale-9 Overlay als Preset in Imagecach anwählen
  • Den Rahmen als PNG Graphik angeben
  • 4 Pixelwerte angeben, die statische Ecken von dehnbaren Kanten abgrenzen (So wird eine Rundung in der Ecke auch bei einem breitformatigen Bild nicht verzerrt.) - Diese 4 Werte werden alle von der linken oberen Ecke gemessen. Eine fehlerhafte Eingabe führt hier zu schwarzen Flächen im resultierenden Bild.