Story #75879

Epic #75878: Add support for picture elements in the media element

Add picture element to FSC

Added by Mathias Schreiber over 3 years ago. Updated almost 2 years ago.

Status:
Rejected
Priority:
Should have
Category:
-
Target version:
-
Start date:
2016-04-23
Due date:
% Done:

0%

TYPO3 Version:
8
PHP Version:
Tags:
Sprint Focus:

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>


Related issues

Related to TYPO3 Core - Feature #57417: ImageViewHelper responsive Images New 2014-03-28
Related to TYPO3 Core - Feature #27391: Allow multiple formats/resolutions for media-content New 2011-06-12
Related to TYPO3 Core - Epic #77810: Improve (responsive) image handling New 2014-09-22

History

#1 Updated by Frans Saris over 3 years ago

  • Description updated (diff)

#2 Updated by Frans Saris over 3 years ago

  • Description updated (diff)

#3 Updated by Frans Saris over 3 years ago

  • Description updated (diff)

#4 Updated by Frans Saris over 3 years ago

  • Description updated (diff)

#5 Updated by Frans Saris over 3 years ago

  • Description updated (diff)

#6 Updated by Frans Saris over 3 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

#7 Updated by Frans Saris over 3 years ago

  • Description updated (diff)

#8 Updated by Wouter Beeftink over 3 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.

#9 Updated by Richard Haeser over 3 years ago

  • Assignee set to Richard Haeser

#10 Updated by Jorgen van der Kroon over 3 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>

#11 Updated by Frans Saris over 3 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

#12 Updated by Richard Haeser over 3 years ago

Frans Saris wrote:

Added the type option to the viewHelper proposal. But can't we just by default fill the type with the mime-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.

#13 Updated by Frans Saris over 3 years ago

  • Status changed from New to In Progress

#14 Updated by Gerrit Code Review about 3 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

#15 Updated by Gerrit Code Review about 3 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

#16 Updated by Gerrit Code Review about 3 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

#17 Updated by Gerrit Code Review about 3 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

#18 Updated by Benni Mack almost 2 years ago

  • Status changed from Under Review to Rejected

Will be added at a later stage.

Also available in: Atom PDF