Zum Inhalt springen

Bilder mit CSS -Klassen versehen

Erstellt am 11. Januar 2015 · 5 Antworten · letzte Antwort am 19. Januar 2015

Tags: Frage

LucitheR ·

Moin,

irgendwie stehe ich grad auf dem Schlauch,

Wie kann ich einem Bild (in diesem Falle dem Img-Tag, nicht den Kram drum rum) eine Klasse wie "img-responsive" zuweisen?

Ich möchte ungerne jetzt jedes einzelne vorhandene Template kopieren und dann anpassen, gibt es sonst eine Möglichkeit nur das HTML zu überschreiben? Habe in der Doku nix dazu gefunden.

Wool ·

Ergänzung:

Du kannst natürlich auch mit Verschachtelungen arbeiten.
Da um das Bild (img) sicher ein Rahmen drumrum ist, bspw. ein div-Tag oder ein p-Tag, der bestimmt auch eine Klasse besitzt, könnte man die extra Klasse für das img-Tag umgehen, indem man im CSS etwas wie folgt ergänzt:

div.className img { ... gewünschte Eigenschaften ... }

Somit gibst Du jedem img-Tag die "gewünschten Eigenschaften" welche in einem div-Tag stecken das die Klasse "className" besitzt.

maikusch ·

Wool, hier gehts um NEOS. Da geht das ein wenig anders.
Aber, ich habe genau das gleiche Problem. Besser noch, ich versuche zusätzlich auch noch data-dash Attribute in den <img> tag zu bekommen.
Vermutlich muss man sich dafür nen eigenen ViewHelper bauen. Ist zwar eher umständlich, aber ne andere Möglichkeit sehe ich da im Moment nicht.

ellei91 ·

probier es mal mit TypoScritp zB. in der Root.ts2 mit:

prototype(TYPO3.Neos.NodeTypes:Image) {
  attributes.class = 'img-responsive'
}

und für Data Attribute genauso nur eben:

attributes.data-dash = '...'

Alternativ kann man auch das Image Template von Neos in den eigenen Ordner kopieren und dann anpassen.

prototype(TYPO3.Neos.NodeTypes:Image) {
  templatePath = 'resource://Vendor.Site/Private/Templates/NodeTypes/Image.html'
}

edit:
ah sry seh grad das du das so nicht haben wolltest^^ - glaube das is nur möglich wenn du das template überschreibst