Blog

Kategoie: TYPO3
29.03.2013
17:29 Uhr
Alter: 5 Jahre
Kategorie: TYPO3
Von: Ingo Reuter

Responsive Images mit TYPO3

In den letzten Versionen von TYPO3 hat sich in Hinblick auf Responsive Webdesign einiges getan. Wer allerdings Bildgrößen dynamisch halten möchte, ohne dabei Extensions einzusetzen, muss selber arbeiten.

Liest man den von TYPO3 generierten HTML-Quellcode durch, fällt zunächst ein width- und height-Attribut in jedem IMG-Tag  auf. Der andere Code bereitet auf den ersten Blick wenig bedenken. Hat man TYPO3 (6.0) auf HTML5 eingestellt und nutzt die aktuellste Version von CSS-Styled-Content, finden sich keine weiteren inline style-Attribute. Somit sollte es kein großes Problem darstellen, die Bildgrößen über CSS-Werte zu definieren.

Nach einer kurzen Internetrecherche findet man eine Beschreibung, die noch störenden width- und height-Attribute des IMG-Tag los zu werden. Ein paar Zeilen TypoScript im Setup des Templates erledigen das:

tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    width.unset = 1
    height.unset = 1
}
tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    width.unset = 1
    height.unset = 1
}
lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    width.unset = 1
    height.unset = 1
}

Diese Anweisung macht, was sie soll: sie entfernt die störenden Attribute aus dem IMG-Tag. Leider ist das aber nicht alles! Neben den stören Attributen absorbiert der Code auch die FIGURE-Umgebung der Bilder und die Klick-vergrößern-Links (vielleicht sogar noch mehr - das habe ich nicht überprüft).

Mit diesen Einschränkungen ist diese Lösung sicher nicht optimal!

Ein zweiter Ansatz war zunächst die width- und height-Attribute des IMG-Tags zu ignorieren und die Skalierung über CSS vorzunehmen:

img {
    height: auto;
    width: auto;
    max-width: 100%;
}

Zum Glück sind Browser von CSS mehr beeindruckt, als von den Attributen des Bildes. Somit können die Attribute zu nächst ein mal vernachlässigt werden.

Augenscheinlich klappt der Weg ganz gut, wenn die Bilder links- oder rechtsbündig dargestellt werden sollen. Soll ein Bild zentriert werden, hängt es irgendwo - aber leider nicht mittig.
(Anmerkung: Interessanterweise klappt alles wunderbar, wenn der Wert von max-width eine absolute Größe ist - soll der Wert aber eine Prozentangabe, zerschießt sich die Darstellung)

Mit ein Bisschen mehr CSS lässt sich das Verrutschen des zentrierten Bildes wieder beheben:

img {
    height: auto;
    width: auto;
    max-width: 100%;
}

DIV.csc-textpic .csc-textpic-imagewrap FIGURE {
    max-width: 100%;
    overflow: hidden;
    display: block;
}

DIV.csc-textpic-center .csc-textpic-imagewrap,
DIV.csc-textpic-center FIGURE.csc-textpic-imagewrap {
    width: 100%;
    display: block;
}

DIV.csc-textpic-center .csc-textpic-center-outer {
    max-width: 100%; /* max. Groesse des Bildes */
}

DIV.csc-textpic-center .csc-textpic-center-inner {
    width: 100%;
}

Wichtig ist, dass ab jetzt die Maximalgröße des Bildes über die max-width-Eigenschaft des umschließenden DIV-Containers der Klasse "csc-textpic-center-outer" bestimmt wird und nicht mehr über die max-width des Bildes.

In diesem konkretem Beispeil wird an dieser Stelle angegeben, dass für das Bild (maximal) die volle Breite des DIV-Containers genutzt werden soll.

Kommentar hinzufügen
*
*
* - Pflichtfeld
*
Ingo Reuter www.ingoreuter.de 16.02.2014, 16:18
Haben Sie darauf geachtet, nicht(!) das oben angegebene TypoScript zu nutzen? Wie bereits im Blogeintrag geschrieben, entfernt das TypoScript Funktionen wie die Figure-Umgebung oder den Link.

Die korrekte Umsetzung erfolgt ausschließlich über den CSS-Code, der im letzten Listing angegeben ist.

Jedenfalls bei mir (TYPO3 6.0 / 6.1) bleiben so die A-Tags erhalten.

Ich hoffe, ich konnte Ihnen helfen. Bei weiteren Rückfragen, zögern Sie bitte nicht zu fragen.
TYPO3 Internetagentur www.ingeniumdesign.de 15.02.2014, 19:57
Bei mir verschwinden dadurch die A-Tag´s um den Bild.
D.h. es lässt sich kein Bild verlinken!
Gibt es ggf. andere Lösungen?
Vielen Dank
Robert Ehrmann 29.08.2013, 20:11
Super Sache, leider verschwindet der "caption" Tag