Story #75879
closedEpic #75878: Add support for picture elements in the media element
Add picture element to FSC
0%
Description
https://www.w3.org/TR/2013/WD-html-picture-element-20130226/
Example typoscript configuration:
tt_content { textmedia =< lib.fluidContent textmedia { templateName = Textmedia dataProcessing { 10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor 10 { references.fieldName = assets } 20 = TYPO3\CMS\Frontend\DataProcessing\PictureSourceProcessor 20 { // Taking into account: // - Mediaquery // - Container width // - Columns // ContainerWidth(InText) can be overruled in the content element // Keys to use as identifier for mediaQuery columns.field = imagecols sources { default { containerMaxWidth = {$styles.content.maxW} containerMaxWidth { override.field = container_width } containerMaxWidthInText = {$styles.content.maxWinText} containerMaxWidthInText { override.field = container_width } pixelDensity = 1,2 } 768 { containerMaxWidth = 300 containerMaxWidthInText = 150 maxColumns = 4 overrideColumnsMap { 2 = 1 } mediaQuery = (max-device-width: 768px) pixelDensity = 1,2 } } as = pictureSources } } } }
Output of pictureSourceProcessor
pictureSources { 768 { width = 300 mediaQuery = (max-device-width: 768px) pixelDensity { 0 = 1 1 = 2 } } default { width = 600 mediaQuery = pixelDensity { 0 = 1 1 = 2 } } }
pictureSourceViewHelper
pictureSourceViewHelper - FileInterface $file - string $mediaQuery - string $width This can be a numeric value representing the fixed width of in pixels. But you can also perform simple calculations by adding "m" or "c" to the value - array $pixelDensity - string $type Content type, f.i: "image/webp"
Fluid partial
<picture> <f:for each="{pictureSources}" as="source"> <f:pictureSource mediaQuery="{source.mediaQuery}" width="{source.width}m" pixelDensity="{source.pixelDensity}" image="{file}" /> </f:for> <f:image image="{file}" width="{pictureSources.default.width}m" alt="" /> </picture>
Output
<picture> <source media="(max-device-width: 768px)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt=""> </picture>
Updated by Frans Saris over 8 years ago
we need to check if the order of the <source tags matters. Else we need to order the result of pictureSourceProcessor so default
is always returned last
Updated by Wouter Beeftink over 8 years ago
Please note that the order of the source and img tags within the picture element matters.
This works as expected:
<picture> <source media="(max-width: 400px)" srcset="400.png"> <source media="(max-width: 800px)" srcset="800.png"> <source srcset="1200.png"> <img src="1200.png" alt=""> </picture>
This will load the 800.png over the 400.png on a viewport under 400 pixels:
<picture> <source media="(max-width: 800px)" srcset="800.png"> <source media="(max-width: 400px)" srcset="400.png"> <source srcset="1200.png"> <img src="1200.png" alt=""> </picture>
The fallbacks should be rendered last.
Tested in Chrome 50.
Updated by Jorgen van der Kroon over 8 years ago
Can you also add the type attribute in the source element. Then you are able to add different filetypes to the picture element.
<picture> <source type="image/webp" srcset="images/butterfly.webp"> <source type="image/jpeg" srcset="images/butterfly.jpg"> <img src="images/butterfly.jpg" alt="a butterfly"> </picture>
Updated by Frans Saris over 8 years ago
- Description updated (diff)
Added the type
option to the viewHelper proposal. But can't we just by default fill the type with the mime-type
of $file
Updated by Richard Haeser over 8 years ago
Frans Saris wrote:
Added the
type
option to the viewHelper proposal. But can't we just by default fill the type with themime-type
of$file
I just checked the specs at https://html.spec.whatwg.org/multipage/embedded-content.html#attr-source-type. The type
option can have all valid mime-types as a value. This will result in something to discuss: We have only 1 source image. If an integrator sets the type to for example video/mp4
we have a non-working solution because an image in a video source will result into unreliable results I think. So if we accept the type
attribute, I propose to check if the given type is a type we can generate by IM/GM.
Updated by Gerrit Code Review over 8 years ago
- Status changed from In Progress to Under Review
Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/49714
Updated by Gerrit Code Review over 8 years ago
Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/49714
Updated by Gerrit Code Review over 8 years ago
Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/49714
Updated by Gerrit Code Review over 8 years ago
Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/49714
Updated by Benni Mack about 7 years ago
- Status changed from Under Review to Rejected
Will be added at a later stage.