Zum Inhalt springen

Inner Wrap von Bildelement - Klasse hinzufügen - Layout 1

Erstellt am 25. Mai 2012 · 7 Antworten · letzte Antwort am 15. April 2013

Tags: Inhaltselemente, Bilder, Frage

icke_der_tolga ·

Typo3 4.6.8
Templavoila

Hallo, ich möchte einem Bildelement eine Klasse hinzufügen, die sich "innerhalb" des Bildes befindet ala

<img class="a" src="#">

Idealerweise von den Bildern, wo ich im Erscheinungsbild "Layout 1" oder wo ich eine andere Spezifizierung (Ausrichtung unten rechts o.ä.) eingestellt habe (so dass nicht alle Bilder die Klasse erhalten). Ich brauche die Klasse innerhalb des Bildes für eine jquery-Anfrage.

Im Typoscript Object Browser kann ich die divs (z.B. csc-textpic etc.) ansprechen, die das Bild umgeben. Ich brauche aber eine Klasse innerhalb des Bildes.

Vielleicht irgendwie sowas in der Richtung? (Ich selber bin kein Typoscript-Experte und versuche mir zusammenzubasteln aus diversen Antworten)

tt_content.stdWrap.innerWrap.cObject.20 =< tt_content.stdWrap.innerWrap.cObject.default
tt_content.stdWrap.innerWrap.cObject.20.15.value = a

Das funktioniert aber schonmal nicht :-(

Über Hilfe, Tipps, Verweise, Suchwörter o.ä. würde ich mich freuen.
Tolga

icke_der_tolga ·

Also mit

tt_content.image.20.1.params = class = "a"

kann man schonmal Bilder mit der Klasse "a" versehen. Das ist ja schonmal gut. Aber wie bekomme ich es abhängig vom "Content Element Layout" von einem Text/Bild-Element hin? Folgendes geht leider nicht:

[globalVar=TSFE:content|layout=1]
tt_content.image.20.1.params = class = "a"
[global]

Kann mir Jemand weiterhelfen? Das wäre spiiiitze! :-)

icke_der_tolga ·

Im Prinzip bräuchte ich sowas in der Art

    tt_content.stdWrap.innerWrap.cObject{
            key.field = layout
           
            1 = TEXT
            1.value = <div class="innerLeft"> | </div>
    }

Nur anstatt einem Div, was das Bild umschließt halt sowas

tt_content.image.20.1.params = class = "a"

Ich denke jetzt mal laut, weil mir ja wahrscheinlich in diesem Leben keiner mehr mit dieser Angelegenheit weiterhilft. :-) Mal gucken, vielleicht komme ich so ja auf die Lösung...

icke_der_tolga ·

Ich komme nicht weiter #angry#

Wie kann ich

tt_content.image.20.1.params = class = "a"

von einem Wert des Bildelementes abhängig machen? Die Klasse "a" darf nicht in allen Bildern auftauchen. Ich sehe nur folgende Möglichkeiten:

1. vom "Content Element Layout" abhängig machen
2. von der ausrichtung des Bildes abhängig machen

Help

TimoF ·

genau vor dem gleichen problem stehe ich im moment auch. hast du schon eine lösung gefunden?

TimoF ·

ich habe jetzt für mich eine lösung gefunden. eigentlich recht simpel.

ich habe die image frames aktiviert: (grafische rahmen)

TCEFORM.tt_content.image_frames.disabled=0
TCEFORM.tt_content.image_frames.removeItems = 1,2,3,4,5,6,7,8
TCEFORM.tt_content.image_frames.addItems.10 = runde Ecken

dann im setup mache ich:

tt_content.image.20.1.params.field = image_frames
tt_content.image.20.1.params.if.isTrue.field = image_frames
tt_content.image.20.1.params.wrap = class="imageFrames-|"

wenn ich jetzt bei den neu aktivierten image frames "runde Ecken" auswähle, bekommen die bilder die klasse "imageFrames-10".
wenn ich bei image frames "keine" auswähle (default), bekommt das bild keine klasse. weil der wert 0 ist und die bedingung nicht greift.

so kannst du dann in deiner jquery abfrage auf "imageFrames-10" prüfen. und du kannst auch noch 11, 12, 13 etc. hinzufügen und diese auch mit jquery abfragen.

triskal ·

Danke, super Tipp!! Hab auch gerade überlegt, wie ich eigene Klassen in die img-Tags bekomme. Über die image-Frames schnell realisierbar.

Oft wird die Notwendigkeit hierfür in Frage gestellt, da TYPO3 alle Elemente bereits mit ausreichenden Klassen und Wraps ausstattet. Ist auch super so. War für mich jahrelang ausreichend. Jetzt aber habe ich drei Kontent-Elemente, alle gleich, alle mit Text im Bild. Nur eines dieser Elemente hat eine Badge-Grafik im Bild, die ich per CSS drüberlegen muss.

VG, triskal

rookie_37 ·

Du könntest das Ganze auch über Bildeffekte lösen:

Hierfür musst der Auswahlliste für Effekte (siehe Screenshot) weitere Effekte hinzufügen. Dies kannst du mit folgendem Eintrag ins TSconfig deiner Root-Seite (oder, wenn es nur auf bestimmten Seiten benötigt wird, ins TSconfig der entsprechenden Seiten):

TCEFORM.tt_content.image_effects.addItems {
30 = Klasse a
31 = Klasse b
32 = Klasse c
}

Anschliessend kannst du diese Effekte normal via Typoscript (im Setup, nicht mehr im TSconfig) konfigurieren:

tt_content.image.20.1.params.cObject = CASE
tt_content.image.20.1.params.cObject {
  key.field = image_effects
  30 = TEXT
  30.value = class="a"
  31 = TEXT
  31.value = class="b"
  32 = TEXT
  32.value = class="c"
}

Somit kannst du deinen Bildern leicht und sehr flexibel spezielle Klassen zuweisen (unabhängig vom Layout) und du erhältst HTML wie von dir eingangs gewünscht:

<img class="a" src="#">

Es entstehen keine zusätzlichen Wraps.

img_effect.png