[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