HOWTO: Bilder mit abgerundetem Rahmen umranden

Hallo,

ich musste Bilder mit einem Rahmen umranden, der abgerundete Ecken hat. Leider fand ich hier im Forum nur ähnliche Fragensteller, jedoch keine konkrete Lösung.

Ich stelle hier nun meine der Community zur Verfügung:

Das ganze muss man mit der Mask-Eigenschaft von imgResource lösen. Daher habe ich zuerst meine Maske für den 3px-Rahmen erzeugt:

Bild: dschung.biz/…/mask_3.gif

Das Bild hab ich dann unter fileadmin/templates/images/mask_3.gif gespeichert.

Weiter ging es mim TypoScript. Da ich das ganze relativ dynamisch halten will, verwende ich 2 Konstanten, die man unter "constants" setzten kann, die Farbe und die Rahmenstärke. Das Bild von oben muss an die jeweilige Rahmenstärke angepasst werden.

Zu erst wird dynamisch die Maske erzeugt, die später verwendet wird.

temp.imgBoxMask = GIFBUILDER
temp.imgBoxMask {
  XY = [1.w]+{$myBorderWidth}+{$myBorderWidth}, [1.h]+{$myBorderWidth}+{$myBorderWidth}
  1 = IMAGE
  1.offset = {$myBorderWidth},{$myBorderWidth}
  1.file.import.current = 1
  1.file.import.listNum = 0
  1.file.width.field = imagewidth
  1.file.height.field = imageheight
  10 = BOX
  10.dimensions = {$myBorderWidth},{$myBorderWidth},[1.w],[1.h]
  10.color = #000000
  20 = IMAGE
  20.file = fileadmin/templates/images/mask_{$myBorderWidth}.gif
  20.align = l,t
  21 = IMAGE
  21.file = fileadmin/templates/images/mask_{$myBorderWidth}.gif
  21.file.params = -rotate 90
  21.align = r,t
  22 = IMAGE
  22.file = fileadmin/templates/images/mask_{$myBorderWidth}.gif
  22.file.params = -rotate 180
  22.align = r,b
  23 = IMAGE
  23.file = fileadmin/templates/images/mask_{$myBorderWidth}.gif
  23.file.params = -rotate 270
  23.align = l,b
}

In Zeile 4 bis 9 wird das aktuelle Bild geladen, damit die Breite und Höhe ausgelesen werden kann. Wusste nicht, wie ich auf die Angaben aus nem anderen TypoScript-Bereich hätte auslesen sollen.

Es wird also eine Maske erzeugt, die genau um die doppelte Breite des Borders höher, bzw. breiter ist als das Bild. Die Multiplikation im TS hat nicht funktioniert, daher die doppelte Addition. Das Maskenbild von oben für die Rundungen wird für alle Ecken verwendet, nur halt entsprechend immer gedreht.

Im Folgenden habe ich den Code für "Text m/Bild" erstellt. Kann man natürlich anpassen.

tt_content.textpic.20.1.file >
tt_content.textpic.20.1.file = GIFBUILDER
tt_content.textpic.20.1.file {
  XY = [10.w],[10.h]
  transparentColor=#ffffff
  backColor = #ffffff
  10 = IMAGE
  10.file = GIFBUILDER
  10.file {
    XY = [10.w]+{$myBorderWidth}+{$myBorderWidth},[10.h]+{$myBorderWidth}+{$myBorderWidth}
    10 = IMAGE
    10.offset = {$myBorderWidth},{$myBorderWidth}
    10.file.import.current=1
    10.file.width.field = imagewidth
    10.file.height.field = imageheight
    15 = IMAGE
    15.file = GIFBUILDER
    15.file {
      XY = [1.w]+{$myBorderWidth}+{$myBorderWidth},[1.h]+{$myBorderWidth}+{$myBorderWidth}
      1 = IMAGE
      1.file.import.current=1
      1.file.import.listNum = 0
      1.file.width.field = imagewidth
      1.file.height.field = imageheight
      10 = BOX
      10.dimensions = 0,0,[1.w]+{$myBorderWidth}+{$myBorderWidth},[1.h]+{$myBorderWidth}+{$myBorderWidth}
      10.color = {$myBorderColor}
    }
    15.mask < temp.imgBoxMask
  }
}

Die Maske von oben wird nun in Zeile 29 eingebunden. Habe übrigend als untere Ebene das Bild und _darüber_ den Rahmen gelegt, nicht umgekehrt, wäre in meinen Augen schwieriger gewesen.

Das Ganze sieht dann so aus:
http://gfr-ludwigshafen.de.server212-han.de-nserver.de/
(Die Seite ist im Aufbau, kann daher nicht garantieren, dass sie z.Z. des Zugriffes gescheit dargestellt wird)

Noch offene Fragen:
- Wäre es möglich trotz Maske mehr als 256 Farben zu erhalten? Wäre dann also keine GIF mehr und die Ecken wären dann auch nicht mehr transparent, aber das würde ich in Kauf nehmen.
- Zugriff auf das aktuelle Bild ohne es neu zu laden.

Folgendes möchte ich erreichen:
Ich will das obige Umsetzen, jedoch soll das Bild nur dann neu gerendert werden, wenn auch das Häckchen bei "Rahmen" gesetzt ist.

Folgendes habe ich ausprobiert:

1. Über TSFE:

[globalVar = TSFE:tt_content|imageborder = 0]
tt_content.textpic.20.1.file >
tt_content.textpic.20.1.file = GIFBUILDER
tt_content.textpic.20.1.file {
  XY = [10.w],[10.h]
  transparentColor=#ffffff
  backColor = #ffffff
  10 = IMAGE
  10.file = GIFBUILDER
  10.file {
    XY = [10.w]+{$myBorderWidth}+{$myBorderWidth},[10.h]+{$myBorderWidth}+{$myBorderWidth}
    10 = IMAGE
    10.offset = {$myBorderWidth},{$myBorderWidth}
    10.file.import.current=1
    10.file.width.field = imagewidth
    10.file.height.field = imageheight
    15 = IMAGE
    15.file = GIFBUILDER
    15.file {
      XY = [1.w]+{$myBorderWidth}+{$myBorderWidth},[1.h]+{$myBorderWidth}+{$myBorderWidth}
      1 = IMAGE
      1.file.import.current=1
      1.file.import.listNum = 0
      1.file.width.field = imagewidth
      1.file.height.field = imageheight
      10 = BOX
      10.dimensions = 0,0,[1.w]+{$myBorderWidth}+{$myBorderWidth},[1.h]+{$myBorderWidth}+{$myBorderWidth}
      10.color = {$myBorderColor}
    }
    15.mask < temp.imgBoxMask
  }
}
[global]

Auch mit der [else][global] funktioniert dies leider nicht.

2. Über Case:

temp.tt_content.textpic.20.1.default < tt_content.textpic.20.1
tt_content.textpic.20.1>
tt_content.textpic.20.1 = CASE
tt_content.textpic.20.1.key.field = imageborder
tt_content.textpic.20.1.default < temp.tt_content.textpic.20.1.default 
tt_content.textpic.20.1.1 < temp.tt_content.textpic.20.1.default 
tt_content.textpic.20.1.1.file >
tt_content.textpic.20.1.1.file = GIFBUILDER
tt_content.textpic.20.1.1.file {
  XY = [10.w],[10.h]
  transparentColor=#ffffff
  backColor = #ffffff
  10 = IMAGE
  10.file = GIFBUILDER
  10.file {
    XY = [10.w]+{$myBorderWidth}+{$myBorderWidth},[10.h]+{$myBorderWidth}+{$myBorderWidth}
    10 = IMAGE
    10.offset = {$myBorderWidth},{$myBorderWidth}
    10.file.import.current=1
    10.file.width.field = imagewidth
    10.file.height.field = imageheight
    15 = IMAGE
    15.file = GIFBUILDER
    15.file {
      XY = [1.w]+{$myBorderWidth}+{$myBorderWidth},[1.h]+{$myBorderWidth}+{$myBorderWidth}
      1 = IMAGE
      1.file.import.current=1
      1.file.import.listNum = 0
      1.file.width.field = imagewidth
      1.file.height.field = imageheight
      10 = BOX
      10.dimensions = 0,0,[1.w]+{$myBorderWidth}+{$myBorderWidth},[1.h]+{$myBorderWidth}+{$myBorderWidth}
      10.color = {$myBorderColor}
    }
    15.mask < temp.imgBoxMask
  }
}

Auch im Object Browser zeigt er es mir genau so an, wie ich es will. Jedoch rendert er jetzt gar kein Bild mehr. Vermute, dass man den Ast "tt_content.textpic.20.1" nicht einfach so um ein "default" oder "1" erweitern darf.

Wäre um jede Idee dankbar
Gruß
Gregor

Und warum nutzt du nicht einfach die fertigen Rahmen und tauscht einfach die vorhandenen Masken gegen deine aus ?
Schau mal ins Template styles.content.get, dort brauchst du nur 1 oder 2 Zeilen per TS überschreiben (und zwar bei der Masken-Collektion), und fertig ist die Laube. 😉

So, hab noch mal nachgeschaut, ab in die Constants damit :

styles.content.imgFrames {
  #frameCollection = darkroom
  frameCollection = deine_collection
  #path = media/frames/
  path = dein/pfad
}

Ey... stimmt.. ist um einiges einfacher #angry#

Wobei... Funktioniert das dann auch mit der cron_cssstyledimgtext-Extension (oder sonstigen css-extensions) ?

An Vorteil hat meine Lösung jedoch auf jedem Fall: Die Ecken verzerren nicht :-)

VassiliZaitsev schrieb

Wobei... Funktioniert das dann auch mit der cron_cssstyledimgtext-Extension (oder sonstigen css-extensions) ?

Ja, du mußt nur cron_csc_imgframes installieren,
das ist im Prinzip nichts weiter als das imgFrame-TS aus styles.content.

suche gerade cron_csc_imgframes im online reposirory.
keine chance 😢

die beschreibung/manual auf typo3.org habe ich gefunden
aber ich kann mir die extension nirgends downloaden.

bin ich zu blöd oder ist die nicht mehr zu finden??

Die Extension ist "shy". Du musst also im Extension-Manager das Häkchen bei "Display shy extensions" machen, dann wird auch diese Extension angezeigt und lässt sich ganz normal installieren.