[TYPO3-german] <picture>-Tag im Frontend rendern

Arno arno.pfeuffer at gmx.net
Thu Nov 27 11:19:46 CET 2014


Hallo.
Ich lese aus einem Textfeld mehrere durch ein "Return" getrennte Dateinamen aus (z.B. Jellyfish.jpg) und möchte diese in einem <picture>, <source> Konstrukt ausgeben. Folgendes TS setze ich ein:

tmp.responsiveIMG = TEXT
tmp.responsiveIMG {
	field = tx_responsiveIMG_domain_model_artikel.img
	split {
		token.char = 10
		cObjNum = 1
		1.current = 1
		1.cObject = IMAGE
		1.cObject {
			file.import.dataWrap = fileadmin/FE/Dummy/{current:1}
			layoutKey = picture
			layout {
				default {
					element = <img src="###SRC###" width="###WIDTH###" height="###HEIGHT###" ###PARAMS### ###ALTPARAMS### ###BORDER### ###SELFCLOSINGTAGSLASH###>
					source =
				}
				srcset {
					element = <img src="###SRC###" srcset="###SOURCECOLLECTION###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
					source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
				}
				picture {
					element = <picture>###SOURCECOLLECTION###<img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###></picture>
					source = <source src="###SRC###" media="###MEDIAQUERY###" ###SELFCLOSINGTAGSLASH###>
				}
				data {
					element = <img src="###SRC###" ###SOURCECOLLECTION### ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
					source.noTrimWrap = | data-###DATAKEY###="###SRC###"|
				}
			}
			sourceCollection {
				small {
					width = 200

					srcsetCandidate = 800w
					mediaQuery = (min-device-width: 800px)
					dataKey = small
				}
				smallHires {
					if.directReturn = 1
					width = 300
					pixelDensity = 2

					srcsetCandidate = 800w 2x
					mediaQuery = (min-device-width: 800px) AND (foobar)
					dataKey = smallHires
					pictureFoo = bar
				}
			}
		}
	}
}

Soweit klappt das, d.h. die durch "Return" getrennten Bilder werden jeweils sep. im FE ausgegeben. Das default-, srcset- und data-Layout klappt einwandfrei. Das picture-Layout aber nicht. Hier wird kein <picture>-Tag gerendert sonder reiner Text.

Was muss ich tun, damit Typo3 das <picture>-Tag auch als <picture>-Tage im Frontend ausgibt?

Gruss


More information about the TYPO3-german mailing list