Rahmen um Bilder rendern (oder eben nicht)

Manchmal ist es notwendig, dass die Bilder, die im BE reingestellt werden, im FE ein bestimmtes Aussehen verpasst bekommen, wie z.B. einen Rahmen in 2 Farben oder abgerundete Ecken. Interessanterweise hat sich rausgestellt, dass es einfacher ist, runde Ecken ins Bild zu rendern, als einen festen Rahmen.
Hier die Anleitung zum Erweitern des Render-Mechanismus, damit alle Bilder mit runden Ecken versehen werden:
Dynamische Masken
Zu beachten dabei ist, dass die Stärke der Abrundung im Zusammenhang steht mit der Ausgangsbildgröße und der Ausgabebildgröße, d.h. alle Ecken sind unterschiedlich groß. Die Maske wird nämlich auf das ursprüngliche Bild gelegt und dann mit dem Bild zusammen kleiner skaliert, so dass es nicht möglich ist, bei allen Bildern in in jeder Eingangs- und Ausgangsgröße die Ecken gleich groß zu gestalten.
Ein gute Lösung für diese Problem ist mir bisher nicht bekannt. Was man aber machen kann, ist mit den Typo3 Variablen in borderSpace und wrap zu experimentieren, so dass man auf die Bilder einen Rand legen kann oder z.B. runde Ecken. Theoretisches Beispiel:

wrap =

… [etc.]|


Und so ein CSS:

.roundcorners {
position: relative;
}
.roundcorners .topleft {
position: absolute;
top: 0;
left: 0;
}
.roundcorners .topright {
position: absolute;
top: 0;
right: 0;
}

Kommentare sind geschlossen.