Feature #50075
closed
Responsive Image Rendering
Added by Ingo Schmitt almost 11 years ago.
Updated over 10 years ago.
Category:
Content Rendering
Description
Result of the Workshop "Implementing Reponsive Images Rendering" from the TYPO3 Developer Days 2013 in Hamburg:
See also: https://notes.typo3.org/p/t3dd_rwd
Currently TYPO3 renders an image hard coded as HTML IMG Tag. The result is:
<img src="src" alt="alt" title="title" width="" height="" border="">
When implementing a responsive website a different approach is needed to render Images:
- Without any width and height attribute and with srcset attribute
<img src="1.jpg" srcset="1.jpg, 2.jpg 800w" alt="foo" />
- With picture Tag
<picture alt="Description of image subject.">
<source src="small.jpg">
<source media="(min-width: 18em)" src="med.jpg">
<source media="(min-width: 45em)" src="large.jpg">
<source media="(min-width: 45em) AND (min-resolution: 192dpi)" src="large_highres.jpg">
<img src="small.jpg" alt="Description of image subject.">
</picture>
- With no script Tag
<noscript data-large="Koala.jpg"
data-small="Koala-small.jpg"
data-small-highres="Koala.jpg"
data-alt="Koala">
<img src="Koala.jpg" alt="Koala" />
</noscript>
The idea of the workshop is to update the rendering to have it fully configurable by TYPO Script to have the opportunity to change the rendering in future if new tags could be introduced by the W3C.
A solution was setup in the workshop as Patch https://review.typo3.org/#/c/22052/ including a test-Extension which xclasses the core to have the possibility to change the TS Rendering until the complete patch is in the core.
Files
Example TS:
page.30 = IMAGE
page.30 {
file = fileadmin/oskar.jpg
file.width = 100
layoutKey = default
layout {
default {
element = <img src="###SRC###" width="###WIDTH###" height="###HEIGHT###" ###PARAMS### ###ALTPARAMS### ###BORDER### />
source =
}
srcset {
element = <img src="###SRC###" srcset="###SOURCES###" ###PARAMS### ###ALTPARAMS### />
source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
}
picture {
element = <picture>###SOURCES###<img src="###SRC###" ###PARAMS### ###ALTPARAMS### /></picture>
source = <source src="###SRC###" media="###MEDIAQUERY###" />
}
data {
element = <img src="###SRC###" ###SOURCES### ###PARAMS### ###ALTPARAMS### />
source = data-###DATAKEY###="###SRC###"
}
}
sourceCollection {
small {
width = 200
srcsetCandidate = 800w
mediaQuery = (min-device-width: 800px)
dataKey = small
}
smallHires {
width = 300
pixelDensity = 2
srcsetCandidate = 800w 2x
mediaQuery = (min-device-width: 800px) AND (foobar)
dataKey = smallHires
pictureFoo = bar
}
}
}
page.40 < page.30 page.40.layoutKey = data
page.50 < page.30 page.50.layoutKey = picture
page.60 < page.30 page.60.layoutKey = srcset
- Status changed from New to Accepted
- PHP Version set to 5.3
Can you (or other workshop members) work on this to bring to the TYPO3 CMS core? http://wiki.typo3.org/CWT
Please split this up into smaller issues if possible and set this issue as parent.
I am not sure if I get the TS, at least it is not intuitive (from my POV). Please add some comments.
There will be a workshop at 22nd of August in Düsseldorf at [[Marketing Factory:https://www.marketing-factory.de]] to work on this issue, feel free to join us ether remote or in person. If you do want to attend, please add to http://www.doodle.com/g59uhvrgsf8m6r6v.
There seem to be several patches already in https://review.typo3.org/#/c/22052/ and some discussion around it. Would be very cool if we could get this feature in for 6.2! Thanks for all involved until now.
- Status changed from Accepted to Closed
- Priority changed from Should have to Must have
Merged for 6.2 in #49723. Thanks!
Also available in: Atom
PDF
Updated by 
Updated by 
Updated by