Project

General

Profile

Actions

Feature #50075

closed

Responsive Image Rendering

Added by Ingo Schmitt over 10 years ago. Updated over 10 years ago.

Status:
Closed
Priority:
Must have
Assignee:
-
Category:
Content Rendering
Target version:
Start date:
2013-07-16
Due date:
% Done:

0%

Estimated time:
PHP Version:
5.3
Tags:
Complexity:
medium
Sprint Focus:

Description

Result of the Workshop "Implementing Reponsive Images Rendering" from the TYPO3 Developer Days 2013 in Hamburg:

See also: https://notes.typo3.org/p/t3dd_rwd

Currently TYPO3 renders an image hard coded as HTML IMG Tag. The result is:

<img src="src" alt="alt" title="title" width="" height="" border="">

When implementing a responsive website a different approach is needed to render Images:

  • Without any width and height attribute
    <img src="small.jpg" data-medium="medium.jpg" data-1="1.jpg" ... alt=".." />
    
  • Without any width and height attribute and with srcset attribute
    <img src="1.jpg" srcset="1.jpg, 2.jpg 800w" alt="foo" />
    
  • With picture Tag
    <picture alt="Description of image subject.">
            <source src="small.jpg">
            <source media="(min-width: 18em)" src="med.jpg">
            <source media="(min-width: 45em)" src="large.jpg">
            <source media="(min-width: 45em) AND (min-resolution: 192dpi)" src="large_highres.jpg">
            <img src="small.jpg" alt="Description of image subject.">
    </picture>
    
  • With no script Tag
    <noscript data-large="Koala.jpg" 
              data-small="Koala-small.jpg" 
              data-small-highres="Koala.jpg" 
              data-alt="Koala">
      <img src="Koala.jpg" alt="Koala" />
    </noscript>
    

The idea of the workshop is to update the rendering to have it fully configurable by TYPO Script to have the opportunity to change the rendering in future if new tags could be introduced by the W3C.

A solution was setup in the workshop as Patch https://review.typo3.org/#/c/22052/ including a test-Extension which xclasses the core to have the possibility to change the TS Rendering until the complete patch is in the core.


Files


Related issues 2 (0 open2 closed)

Related to TYPO3 Core - Feature #49723: Improve rendering of responsive imagesClosed2013-07-06

Actions
Related to TYPO3 Core - Feature #51842: Allow to remove dimensions in img tagClosed2013-09-09

Actions
Actions #1

Updated by Ingo Schmitt over 10 years ago

Example TS:

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

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

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

Updated by Philipp Gampe over 10 years ago

  • Status changed from New to Accepted
  • PHP Version set to 5.3

Can you (or other workshop members) work on this to bring to the TYPO3 CMS core? http://wiki.typo3.org/CWT

Please split this up into smaller issues if possible and set this issue as parent.

I am not sure if I get the TS, at least it is not intuitive (from my POV). Please add some comments.

Actions #3

Updated by Ingo Schmitt over 10 years ago

There will be a workshop at 22nd of August in Düsseldorf at [[Marketing Factory:https://www.marketing-factory.de]] to work on this issue, feel free to join us ether remote or in person. If you do want to attend, please add to http://www.doodle.com/g59uhvrgsf8m6r6v.

Actions #4

Updated by Ernesto Baschny over 10 years ago

There seem to be several patches already in https://review.typo3.org/#/c/22052/ and some discussion around it. Would be very cool if we could get this feature in for 6.2! Thanks for all involved until now.

Actions #5

Updated by Ernesto Baschny over 10 years ago

  • Status changed from Accepted to Closed
  • Priority changed from Should have to Must have

Merged for 6.2 in #49723. Thanks!

Actions

Also available in: Atom PDF