Für mich war es eine erste kleine Übung mich mit dem sharpcms vertraut zumachen…

Kleine Vorgeschichte: Jürgen Gutsch und Ich konnte Mitte letzen Jahres mit Freude und einem leicht feuchten Auge das Open Source Projekt “sharpcms” übernehmen. Mads Høbye, der Vater des Projekts übergab uns dies in der Hoffnung, dass sein Projekt weiter leben würde. Er selber fand vermutlich einfach keine Zeit mehr daran weiter zu arbeiten.

Was liefert dieser Eintrag: Anzeigen von Bildern mit abgerundeten Kanten. Es gibt wie immer viele Wege an sein Ziel zu kommen. In diesem Fall wäre es natürlich auch einfach, das ganze per JavaScript zu realisieren. Ich aber wollte dies mit dem sharpcms bewerkstelligen. Dafür durfte ich mich das erste mal mit der sharpcms.Library auseinandersetzen.
Also, in diesem Beitrag schreibe ich darüber, wie man im sharpcms seine Bild mit abgerundeten Kanten darstellen kann. Um das ganze noch abzurunden werde ich den Bildern auch noch Rahmen verpassen. Wer sich mit dem System.Drawing.Graphics schon mal auseinander gesetzt hat weiß wahrscheinlich, dass das Ganze nicht mal so schwer ist. Der Aufwand lag mehr darin, das Ganze in ein bestehendes CMS so einzubauen damit die Funktion auch einfach genutzt werde kann.

Was bisher schon ging: Bild können in beliebiger Größe dargestellt werden. Im unterschied zum HTML wird das Original Bild aber nicht auf eine bestimmte Größe zu einem Vorschaubild zusammengestaucht. Die Ladezeiten wären erheblich, würde man in einer Bildergallery alle Bilder in der original Größe darstellen. So wie die meisten CMS bietet auch sharpcms die Möglichkeit Vorschaubilder automatisch auf eine bestimmte Größe zu rendern. Im sharpcms wird die Größe als Query dem Bild mitgeliefert.

Beispiel 1 (Ergebnis ansehen):

In diesem Beispiel wird das Bild eine höhe von 150px erhalten. Wird nur Höhe oder nur Breite angegeben, werden automatisch die Proportionen des Bildes berücksichtigt. 

sharpcms überprüft dabei, ob das Bild in dieser Größe schon mal erstellt bzw. gerendert wurde. Alle gerenderten Bildkopien landen im untergeordnetem Ordner “thumb”. Ist das Bild nicht vorhanden, wird dies zuerst gerendert. Ich will jetzt aber nicht zu sehr ins Detail gehen.

Auf dem gleichen Weg wie in sharpcms Bilder verkleinert werden, wollte ich auch die abgerundeten Kannten erstellen. Aus diesem Grund gibt es jetzt nebst den Attributen height und width auch noch die Attribute radius, borderwidth und bordercolor. Der IMG-Tag kann daher zum Beispiel auch so aussehen.

Beispiel 2 (Ergebnis ansehen):

In diesem Beispiel erhält das Bild abgerundete Kanten mit einem Radius von 5px. Außerdem besitzt das Bild einen schwarzen Rahmen mit einer Rahmendicke von 2px.

Wichtig!
Diese neue Funktion ist in der vierten Beta noch nicht eingebaut. Wer aber jetzt schon diese Funktion nutzen will, müsste den aktuellsten Stand auf codeplex.com per SVN herunterladen.