Überschrift mit 1/2 durchsichtigen Hintergrund im Bild

Hey,
ich bin auf der Suche nach einer Möglichkeit meinen Bildern einen halb durchsichtigen Schatten im unteren Bereich zu geben (auf dem Bild, nicht darunter) auf dem ich eine Überschrift plazieren kann.

Da ich das ganze einfach steuerbar haben möchte habe ich mir überlegt das Feld "Bildunterschrift" zu benutzen.

Ich weiß aber leider nicht wie ich die Auswahlmöglichkeiten ändern kann, momentan erzeugt er ein <dd> um den Text.
Ich möchte das er mir wenn ich eine Bildunterschrift angebe diese nicht in ein <dd> packt sondern so:

 <div class="bildMitUnterschrift">
  <img alt="" src="../pics/5.png" width="250" height="150"/>
  <div class="transp">&nbsp;</div>
  <div class="pa">(hier der Text)</div>
 </div>

Falls jemand eine einfachere Möglichkeit kennt wäre es klasse wenn er mir sie sagen könnte.

Lg,
JakobRa

Hallo.

Wenn Du generell das Rendering von bildern ändern willst, dann solltest Du dort suchen, wo TYPO3 sein Rendering vornimmt. Normalerweise ist das heutzutage über die Systemextension css_styled_content. Dort findet sich dann auch das Typoscript unter typo3/sysext/css_styled_content/static/setup.txt. Im Abschnitt "cObject: Image" findest Du dann zahlreiche Einstellmöglichkeiten...

Viele Grüße
Julian

Danke für den Tipp =), schau ich mir gleich mal an.

Kennt ihr vllt. noch ein gutes Beispiel für das "renderobj" verstehe das leider nicht wircklich.

Lg,
JakobRa

Ich würde das ganz gerne mit renderObj = COA machen.

Wie müsste ich das TS gestalten um es damit zu lösen, wie spreche ich das Image an?

Lg,
JakobRa

Die Verwendung von renderObj ist nur dann nötig, wenn TYPO3 nicht "weiß", wie es abgerufene Daten aufbereiten soll. Für die Standard-Content-Elemente ist das Rendering aber bereits definiert (u.a. über css_styled_content). Warum also nochmal das Rad neu erfinden, statt das vorhandene zu modifizieren?

Ganz auf die Schnelle wäre es in etwa:

tt_content.image.20.rendering {
		dl {
			imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"> | </div>
			noRowsStdWrap.wrap =
			oneImageStdWrap.dataWrap = <div class="bildMitUnterschrift"> | </div>
			imgTagStdWrap.wrap = |<div class="transp"> </div>
			editIconsStdWrap.wrap = <div> | </div>
			caption {
				required = 1
				wrap = <div class="pa"> | </div>
			}
		}
}

Könntest du mir das ein wenig erklären ich verstehe TypoScript noch nicht wircklich, was macht das ts genau? :o

Danke für die Hilfe!

Lg,
JakobRa

Für TS hab ich einmal die sehr kurze Definition gefunden: "TypoScript bildet mithilfe von Plaintext und einer gegebenen Syntax hierarchische Informationen in ein multidimensionales assoziatives PHP-Array ab".

Für den von mir geposteten TS-Abschnitt sollte man TS auch genau so sehen: als Text, der irgendwelche Werte in einer Struktur darstellt. TYPO3 liest diese Werte aus und verwendet sie im Rendering-Prozess.

tt_content.image.20 - Das heißt, dass die Werte für das Content-Element Bild verwendet werden sollen. Da das CE aus mehreren Objekten besteht, wir uns aber wirklich nur auf das Bild selbst beziehen, greifen wir auf die 20 durch.

rendering.dl - Das ist eine vorgegebene Benennung, die keine Aktion direkt auslöst

*StdWrap - Hier werden für die einzelnen Situationen/Stellen die Wraps definiert und könnten beliebige stdWrap-Eigenschaften verwendet werden.

Hoffe, dass ich's halbwegs erklären konnte. Sind schon etwas tiefere Ebenen von TS.

Klasse Erklärung, hat mir sehr geholfen das ganze zu verstehen! =)

Habe aber noch ein paar Fragen:
Was macht "editIconsStdWrap"?

Gibt es die Möglichkeit das "dl" Tag durch ein div zu ersetzten, also dass das ganze in ein <div> anstelle eines <dl> gesetzt wird?

Nochmals vielen Dank Julian, für deine super Erklärung und das TypoScript!! 🙂

Lg,
JakobRa

JakobRa schrieb

Habe aber noch ein paar Fragen:
Was macht "editIconsStdWrap"?

Das dürfte die Stelle bzw. der Wrap sein für das Edit-Icon des Frontend-Editings.

JakobRa schrieb

Gibt es die Möglichkeit das "dl" Tag durch ein div zu ersetzten, also dass das ganze in ein <div> anstelle eines <dl> gesetzt wird?

Das "dl" ist derzeit nur ein Bezeichner der Konfiguration. Über die gepostete Anpassung des TS sollte im HTML-Code kein dl-Tag mehr ankommen.

Wenn man das ganze sauber(er) lösen will, dann werfen wir nochmal einen Blick in typo3/sysext/css_styled_content/static/setup.txt. Dort sind unter "rendering" drei Einträge: dl, ul, div. Auf welche Weise Bilder nun eingebundenw erden, ist über renderMethod = dl im Anschluss festgelegt. Hier hast Du also die Wahl, welche der (Standard-)Konfigurationen Du verwenden willst. Für den Fall, dass Du Dir selbst Dein Bild-Element baust, dürfte es egal sein, welche Konfiguration Du anpasst.

Funktioniert alles wunderbar. 🙂

Ein großes Dankeschön an dich Julian, hast mir wircklich weitergeholfen und auch ein wenig Licht ins Dunkle gebracht!

Lg,
JakobRa

Bitte, gern geschehen. Musste selbst auch mal die Hürde überwinden, TS zu verstehen, und war über jede Hilfe froh. Dokumentationen können leider nicht alles vermitteln bzw. sind dazu zu genau. Wenn jemand in TS einsteigen will, und nicht nur auf der schnellen Suche nach einem Schnipsel ist, dann helfe ich da gern.