Feature #49723

Improve rendering of responsive images

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

Status:
Closed
Priority:
Should have
Assignee:
-
Category:
-
Target version:
-
Start date:
2013-07-06
Due date:
% Done:

100%

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

Feature #49725: Make rendering image dimensions configurableRejected


Related issues

Related to TYPO3 Core - Feature #50075: Responsive Image Rendering Closed 2013-07-16

Associated revisions

Revision 1316fe39 (diff)
Added by Martin Ficzel almost 6 years ago

[FEATURE] Add responsive Image Rendering

The Image cObject can render a sourceCollection to support
different display-resolutions and screen sizes.

Resolves: #49723
Releases: 6.2
Change-Id: Ief02532f8f0a4e8e4b78ba15e7a9fd47c6cbd463
Reviewed-on: https://review.typo3.org/22052
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
Reviewed-by: Sebastian Fischer
Tested-by: Sebastian Fischer
Reviewed-by: Anja Leichsenring
Tested-by: Anja Leichsenring

Revision b5d5ff9e (diff)
Added by Christian Kuhn almost 6 years ago

[BUGFIX] Follow-up: Responsive image rendering, CGL

Change-Id: I03bd35c36616bae451e7e21e12858f65d13087e5
Resolves: #49723
Releases: 6.2
Reviewed-on: https://review.typo3.org/24525
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn

History

#1 Updated by Gerrit Code Review about 6 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

#2 Updated by Gerrit Code Review about 6 years ago

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

#3 Updated by Gerrit Code Review about 6 years ago

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

#4 Updated by Gerrit Code Review about 6 years ago

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

#5 Updated by Martin Ficzel about 6 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

#6 Updated by Gerrit Code Review about 6 years ago

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

#7 Updated by Gerrit Code Review about 6 years ago

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

#8 Updated by Gerrit Code Review about 6 years ago

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

#9 Updated by Gerrit Code Review about 6 years ago

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

#10 Updated by Gerrit Code Review about 6 years ago

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

#11 Updated by Gerrit Code Review almost 6 years ago

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

#12 Updated by Gerrit Code Review almost 6 years ago

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

#13 Updated by Gerrit Code Review almost 6 years ago

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

#14 Updated by Gerrit Code Review almost 6 years ago

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

#15 Updated by Gerrit Code Review almost 6 years ago

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

#16 Updated by Gerrit Code Review almost 6 years ago

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

#17 Updated by Gerrit Code Review almost 6 years ago

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

#18 Updated by Gerrit Code Review almost 6 years ago

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

#19 Updated by Gerrit Code Review almost 6 years ago

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

#20 Updated by Gerrit Code Review almost 6 years ago

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

#21 Updated by Gerrit Code Review almost 6 years ago

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

#22 Updated by Gerrit Code Review almost 6 years ago

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

#23 Updated by Gerrit Code Review almost 6 years ago

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

#24 Updated by Gerrit Code Review almost 6 years ago

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

#25 Updated by Gerrit Code Review almost 6 years ago

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

#26 Updated by Gerrit Code Review almost 6 years ago

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

#27 Updated by Gerrit Code Review almost 6 years ago

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

#28 Updated by Gerrit Code Review almost 6 years ago

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

#29 Updated by Gerrit Code Review almost 6 years ago

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

#30 Updated by Gerrit Code Review almost 6 years ago

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

#31 Updated by Gerrit Code Review almost 6 years ago

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

#32 Updated by Gerrit Code Review almost 6 years ago

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

#33 Updated by Anonymous almost 6 years ago

  • Status changed from Under Review to Resolved

#34 Updated by Gerrit Code Review almost 6 years ago

  • Status changed from Resolved to Under Review

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

#35 Updated by Christian Kuhn almost 6 years ago

  • Status changed from Under Review to Resolved

#36 Updated by Benni Mack 11 months ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF