Project

General

Profile

Actions

Story #75879

closed

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

Add picture element to FSC

Added by Mathias Schreiber almost 8 years ago. Updated over 6 years ago.

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

0%

Estimated time:
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 3 (2 open1 closed)

Related to TYPO3 Core - Feature #57417: ImageViewHelper responsive ImagesNew2014-03-28

Actions
Related to TYPO3 Core - Feature #27391: Allow multiple formats/resolutions for media-contentNew2011-06-12

Actions
Related to TYPO3 Core - Epic #77810: Improve (responsive) image handlingClosed2014-09-22

Actions
Actions #1

Updated by Frans Saris almost 8 years ago

  • Description updated (diff)
Actions #2

Updated by Frans Saris almost 8 years ago

  • Description updated (diff)
Actions #3

Updated by Frans Saris almost 8 years ago

  • Description updated (diff)
Actions #4

Updated by Frans Saris almost 8 years ago

  • Description updated (diff)
Actions #5

Updated by Frans Saris almost 8 years ago

  • Description updated (diff)
Actions #6

Updated by Frans Saris almost 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

Actions #7

Updated by Frans Saris almost 8 years ago

  • Description updated (diff)
Actions #8

Updated by Wouter Beeftink almost 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.

Actions #9

Updated by Richard Haeser almost 8 years ago

  • Assignee set to Richard Haeser
Actions #10

Updated by Jorgen van der Kroon almost 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>
Actions #11

Updated by Frans Saris almost 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

Actions #12

Updated by Richard Haeser almost 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 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.

Actions #13

Updated by Frans Saris almost 8 years ago

  • Status changed from New to In Progress
Actions #14

Updated by Gerrit Code Review over 7 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

Actions #15

Updated by Gerrit Code Review over 7 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

Actions #16

Updated by Gerrit Code Review over 7 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

Actions #17

Updated by Gerrit Code Review over 7 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

Actions #18

Updated by Benni Mack over 6 years ago

  • Status changed from Under Review to Rejected

Will be added at a later stage.

Actions

Also available in: Atom PDF