Feature #49723: Improve rendering of responsive images - TYPO3 Core - TYPO3 Forge

Actions

Copy link

Feature #49723

closed

Improve rendering of responsive images

Added by Georg Ringer over 11 years ago. Updated about 6 years ago.

Status:

Closed

Priority:

Should have

Assignee:

Category:

Target version:

Start date:

2013-07-06

Due date:

% Done:

100%

Estimated time:

(Total: 0.00 h)

PHP Version:

Tags:

Complexity:

Sprint Focus:

Description

There are some tasks which could be improved when responsives images should be rendered:

Don't output width/height tag in img tag
Improved option for setting multiple sources

possible variants¶

http://responsejs.com/

<img src="lo-fi.png" data-min-device-width-641="hi-fi.png" alt="example" />
<img src="image.jpg" alt="" data-src-600px="image-600px.jpg">

Support srcset¶

<img alt="The Breakfast Combo" src="banner.jpeg" 
   srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w,
   banner-phone-HD.jpeg 100w 2x">

picture tag¶

<picture width="500" height="500">
  <source src="large.jpg"  media="(min-width: 45em)">
  <source src="middle.jpg" media="(min-width: 18em)">
  <img src="small.jpg" alt="">
  <p>Accessible text</p>
</picture>

Subtasks 1 (0 open — 1 closed)

Related issues 1 (0 open — 1 closed)

Actions

Copy link

Updated by Gerrit Code Review over 11 years ago

Status changed from New to Under Review

Patch set 1 for branch master has been pushed to the review server.
It is available at https://review.typo3.org/22052

Actions

Copy link

Updated by Gerrit Code Review over 11 years ago

Patch set 2 for branch master has been pushed to the review server.
It is available at https://review.typo3.org/22052

Actions

Copy link

Updated by Gerrit Code Review over 11 years ago

Patch set 3 for branch master has been pushed to the review server.
It is available at https://review.typo3.org/22052

Actions

Copy link

Updated by Gerrit Code Review over 11 years ago

Patch set 4 for branch master has been pushed to the review server.
It is available at https://review.typo3.org/22052

Actions

Copy link

Updated by Martin Ficzel over 11 years ago

Some example TypoScript

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="###SOURCECOLLECTION###" ###PARAMS### ###ALTPARAMS### />
      source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
    }

    picture {
      element = <picture>###SOURCECOLLECTION###<img src="###SRC###" ###PARAMS### ###ALTPARAMS### /></picture>
      source = <source src="###SRC###" media="###MEDIAQUERY###" />
    }

    data {
      element = <img src="###SRC###" ###SOURCECOLLECTION### ###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

Actions

Copy link