Vor kurzem wurde ich vor die Aufgabe gestellt auf einer Website die Bilder der Standard-Content-Elemente mit einem Schlagschatten zu hinterelegen. Sollte eine Überschrift im Content-Element vom Typ „Bildüberschrift“ definiert sein, so sollte diese direkt über dem Bild erscheinen und ebenfalls mit einem Schatten hinterlegt sein. Um dies zu erreichen, sind ein paar kleine Kniffe von Nöten, die ich im folgenden vorstellen möchte.
Um den gewünschten Effekt zu erreichen muss zunächst einmal die Standard-Definition mit dem GIFBUILDER neu geschrieben werden. „tt_content.image.20.1“ stellt hierbei das TypoScript für alle Bilder in Text mit Bild / nur Bild zur Verfügung. In diesem Beispiel gehen wir davon aus, dass der Hintergrund der Seite weiß ist und wir die Bilder als JPG und in höchster Qualität ausgegeben haben wollen. Zusätzlich wird ein blauer Rahmen um das Bild gezeichnet und der Schlagschatten in Dunkelgrau ausgegeben.
Schritt 1: Bild mit Schatten hinterlegen
# Das Standard-TypoScript muss mit dem GIFBUILDER neu geschrieben werden. tt_content.image.20.1.file > tt_content.image.20.1.file = GIFBUILDER tt_content.image.20.1.file { XY = [10.w]+7, [10.h]+34 backColor = #FFFFFF format = jpg quality = 100 # Zur Größenberechnung wird an Position 10 einmal das Bild aus dem CE geladen. 10 = IMAGE 10 { file.import.current = 1 file.width.stdWrap = 1 file.width.stdWrap.field = imagewidth file.width.prioriCalc = intval offset = 1,1 } # Nun wird eine Box gezeichnet, der Schlagschatten wird dabei 4px nach rechts und 4px nach unten zeigen. # Damit der Schatten nicht zu dunkel und kräftig wird, verwenden wir hier mit #444444 ein dunkles Grau. 20 = BOX 20.dimensions = 4,4,[10.w],[10.h] 20.color = #444444 # Mit dem Blur-Effekt zeichen wir den Schatten weicher. Wer einen harten Schatten haben will, lässt diese Definition aus. 30 = EFFECT 30.value = blur=25 | # Hiermit wird der balue Rahmen um das Bild gezeichnet. 40 = BOX 40.dimensions = -1,-1,[10.w]+3,[10.h]+3 40.color = #3333FF # Wir legen hier noch einmal das Bild aus Position 10 über das Ganze, damit es auch angezeigt wird # und nicht hinter dem Schatten und dem Rahmen verschwindet. 50 < .10 } |
Schritt 2: Neuen Überschriftentyp anlegen
Die Zusatzaufgabe war es nun, falls eine Überschrift im Inhaltselement vom Typ „Bildüberschrift“ eingetragen ist, dass diese in einer blauen Box direkt über dem Bild angezeigt wird. Dies geschieht folgendermaßen:
In der TSConfig unter den Seiteneigenschaften wird zuerst ein neuer Überschriftentyp definiert indem die TCEFORM um ein neues Header-Layout erweitert wird:
# 22 muss unbenutzt sein. Dies wird später der Schlüssel werden mit dem wir die Überschrift ansprechen. TCEFORM.tt_content.header_layout.addItems { 22 = Bildüberschrift } |
Danach legen wir fest, wie unser neuer Header-Type aussehen wird (Template):
lib.stdheader.10.22 < lib.stdheader.10.3 lib.stdheader.10.22.fontTag = <h3 class="textpic">|</h3> |
Schritt 3: Mit Hilfe der IF-Eigenschaft im TypoScript prüfen wir nun ob der Überschriftentyp gesetzt wurde:
Zunächst kopieren wir das obige TS in neue Positionen, die wir später mit Hilfe der IF-Eigenschaft entweder anzeigen oder auch nicht. Unsere Überschrift wird später eine Höhe von 27px haben.
110 < .10 110.offset = 1,28 120 < .20 120.dimensions = 4,4,[10.w],[10.h]+27 130 < .30 140 < .40 140.dimensions = -1,-1,[10.w]+3,[10.h]+3+27 150 < .110 # Nun erweitern wir diese Positionen um die IF-Eigenschaften: 110.if.value.field = header_layout 110.if.equals = 22 120.if < .110.if 130.if < .110.if 140.if < .110.if 150.if < .110.if # ... und die alten Positionen blenden wir aus, falls der Überschriftentyp nicht gesetzt wurde. 10.if < .110.if 10.if.negate = 1 20.if < .110.if 30.if < .110.if 40.if < .110.if 50.if < .110.if |
Und zu guter letzt setzen wir die Überschrift mit CSS noch 27px nach unten, damit sie auch im Rahmen liegt.
.csc-header h3.textpic { position: relative; top: 27px; margin-top: -27px; } |
Aussehen könnte das Ganze am Ende dann so:
Bild mit Schlagschatten und Überschrift
Viel Spaß beim Nachmachen!
