\&nbsp;You can change notification settings in the options pageClose Anouk van der Kroon heem misschien staat hij er wel bij weet het niet zeker heb je een mapje macbook Anouk en dan 9 maanden boek just now m \url{https://notes.typo3.org/p/t3dd\_rwd} **Related forge issues**: - Umbrella issue: \url{http://forge.typo3.org/issues/49723} \url{https://review.typo3.org/#/c/22052/} - Documentation Issue: \url{http://forge.typo3.org/issues/49770} - \url{https://review.typo3.org/#/c/23250/} Rejectedsout- Showing/Hiding the dimensions: sout\url{southttp://forge.typo3.org/issues/49725sout}sout + sout\url{southttps://review.typo3.org/#/c/21992/sout}sout > sout -> PHP Integration: \url{https://review.typo3.org/#/c/22052/} -> css\_styled\_content Integration: \url{https://review.typo3.org/#/c/22052/} ## ## ##Next Steps: Workshop at Marketing Factory for the next Steps at 22nd of August 22. Please join us via Doodle \url{http://www.doodle.com/g59uhvrgsf8m6r6v}. Patch for core for rendering the image tag -> css\_styled\_content must be adapted on basis of patch -> add percentage width field in core to be used in css\_styled\_content ## ## ##**Team:** ## **- Frontent-Rendering** * Arnd Messer * info@arndmesser.de * Karoline Steinfatt * ksteinfatt@gmail.com * Carla Froitzheim * cf@computer-foto.de * Jan Rowold * j.rowold@neusta.de * Timo Feuerstein * feuerstein.rhp@gmail.com * * Riona Kuthe * rkuthe@jweiland.net **- PHP/TS** * Martin Ficzel * martin.ficzel@gmx.de * Jerome Trawniczek * jerome@work.de * * Sebastian Fischer * typo3@evoweb.de **- Grids/TCA** * kathrin grafahrend kg@artplan21.de * oberritter@i-gelb.net * * Matthias Diekmann * diekmann@i-gelb.net **- Nothing special** * Ingo Schmitt * is@marketing-factory.de * David Gurk * dgurk@medienwerft.de * Tobias Schenk * tschenk84@gmail.com * ############################################################################## ### Patch review Infos \url{https://review.typo3.org/#/c/22052/} \url{http://forge.typo3.org/issues/50075} ############################################################################## ### T3DD2013 Workshop Slides: \url{http://de.slideshare.net/ischmittis/slides-from-t3dd13-workshop-responsive-images-rendering} ##Links from the slides: \url{https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0} \url{http://www.w3.org/community/respimg/} \url{http://www.w3.org/TR/html-picture-element/} \url{http://adaptive-images.com/} \url{http://maddesigns.de/responsive-typo3/#36} \url{underlinehttp://www.evoweb.de/fileadmin/examples/responsive\_image/responsive.htmlunderline} \url{http://stackoverflow.com/questions/12899691/use-of-picture-inside-figure-element-in-html5} \url{http://designmodo.com/responsive-test/} ## ## ##Development: * Virtualbox * Extensionpack * t3dd.ova * ssh localhost -p 2222 * \url{http://localhost:8080/} **To Discuss...** Using Source set at images -> Implement TS settings to define which image tags are used option tr * to supress width/and height * Supress src attribute (should be off by default) * Define different render methods * Add more methods in future ##**underlinebox-sizing problem:underline** HTML elements must have the CSS property box-sizing: border-box, when dealing with percentage "width" \url{http://www.paulirish.com/2012/box-sizing-border-box-ftw/} IE7 doesn't support this: \url{http://caniuse.com/#search=box-sizing} \url{https://github.com/Schepp/box-sizing-polyfill} ... should be documentated in TsRef! the polyfill is not integrated by default. **underlinecss\_styled\_content integration:underline** Add this in setup.txt of css\_styled\_content on line 2086: {$styles.content.imgtext.responsive} { * div.csc-textpic, div.csc-textpic * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }} Add this in constants.tx after line 35: # cat=content/cImage/b3; type=boolean; label= Responsive rendering for images responsive = **underlinedependencies of styles.content.imgtext.responsive = 0|1 (boolean)underline** styles.content.imgtext.responsive should also trigger a default layout-rendering in tt\_content.image.30 ... ## ##-> Today: response.js (license Dual licensed under the MIT or GPL Version 2 licenses) working on the image tag rendering Change from absolute sizes to columns / colums by layout Change from absolute sizes to percentages Change of TCA for Backend Elements IMAGE { } IMAGE Tage types <img src="small.jpg" data-medium="medium.jpg" data-1="1.jpg" ... alt=".." /> <img src="1.jpg" srcset="1.jpg, 2.jpg 800w" alt="foo" /> <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> <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> <!-- current 6.2 code start --> <img src="fileadmin/content/teaser-quadratical.jpg" width="600" height="600" alt="Square Image Alt Text"> <!-- current 6.2 code end --> foo = IMAGE foo { file = bar.jpg width = 200 showDimensions = 0 noSrc = 1 renderMethod = resolution { small { # this image will be 200px w # inherited from IMAGE.width # width = 200 # resolution = 1 is default # all options from IMG\_RECOURCE srcsetCandidate = 800w pictureMedia = (min-width: 18em) futurevariable = difhasidofhao } small-highres { # this image will be 400px w # will be displayed in 200px # inherited from IMAGE.width # width = 200 resolution = 2 srcsetCandidate = 800w 2x pictureMedia = (min-width: 18em) AND (min-resolution: 192dpi) } large { # this image will be 800px w width = 800 # resolution = 1 is default srcsetCandidate = 1200w pictureMedia = (min-width: 45em) } large-highres { # this image will be 1600px w width = 800 resolution = 2 srcsetCandidate = 1200w 2x pictureMedia = (min-width: 45em) AND (min-resolution: 192dpi) } } } * imgObjNum = 1 1 { renderLayout = CASE renderLayout { key = {$picture} default = TEXT default.value = <img src="###SRC##" alt="###ALT###" /> picture = TEXT picture.value = <picture><img src="###SRC###" alt="###ALT###" />###TAGS###</picture> srcset = TEXT srcset.value = <img src="###SRC###" srcset="###RESOLUTIONS###" alt="###ALT###" /> data = TEXT srcset.value = <img src="###SRC###" ###PARAMS### alt="###ALT###" /> } resolutions { small { srcsetCandidate = 800w } small\_hires { resolution = 2 srcsetCandidate = 800w 2x } } public function cImage($file, $conf) { $info = $this->getImgResource($file, $conf['file.']); $GLOBALS['TSFE']->lastImageInfo = $info; if (is\_array($info)) { if (\TYPO3\CMS\Core\Utility\GeneralUtility::isAllowedAbsPath(PATH\_site . $info['3'])) { $source = \TYPO3\CMS\Core\Utility\GeneralUtility::rawUrlEncodeFP(\TYPO3\CMS\Core\Utility\GeneralUtility::png\_to\_gif\_by\_imagemagick($info[3])); $source = $GLOBALS['TSFE']->absRefPrefix . $source; } else { $source = $info[3]; } // This array is used to collect the image-refs on the page... $GLOBALS['TSFE']->imagesOnPage[] = $source; $altParam = $this->getAltParam($conf); if ($conf['params'] \&\& !isset($conf['params.'])) { $params = ' ' . $conf['params']; } else { $params = isset($conf['params.']) ? ' ' . $this->stdWrap($conf['params'], $conf['params.']) : ''; } $values = array( 'width' => $info[0], 'src' => htmlspecialchars($source), 'tags' => (isset($conf['tags.'])) ? $this->stdWrap($conf['tags.'], $conf['tags']): $conf['tags'], ); $theValue = '<img src="' . htmlspecialchars($source) . '" width="' . $info[0] . '" height="' . $info[1] . '"' . $this->getBorderAttr(' border="' . intval($conf['border']) . '"') . $params . $altParam . (!empty($GLOBALS['TSFE']->xhtmlDoctype) ? ' /' : '') . '>'; $theValue = $this->substituteMarkerArray($conf['renderLayout'], $theValue, '###|###', TRUE); $linkWrap = isset($conf['linkWrap.']) ? $this->stdWrap($conf['linkWrap'], $conf['linkWrap.']) : $conf['linkWrap']; if ($linkWrap) { $theValue = $this->linkWrap($theValue, $linkWrap); } elseif ($conf['imageLinkWrap']) { $theValue = $this->imageLinkWrap($theValue, $info['origFile'], $conf['imageLinkWrap.']); } $wrap = isset($conf['wrap.']) ? $this->stdWrap($conf['wrap'], $conf['wrap.']) : $conf['wrap']; if ($wrap) { $theValue = $this->wrap($theValue, $conf['wrap']); } return $theValue; } } ---------------------------------------------- Css\_styled\_content --------------------------------------------- info: \url{http://www.typo3-media.com/blog/article/typoscript-approvements-in-typo3-4.html} Approach for css\_styled\_content: plugin**.**tx\_cssstyledcontent**.**\_CSS\_DEFAULT\_STYLE **>** *############## tt\_content Aenderungen############* tt\_content**.**image**.**20**.**rendering**.**noCaption **{** lastRowStdWrap**.**wrap**.**cObject **=** CASE lastRowStdWrap**.**wrap**.**cObject **{** default **=** TEXT default**.**value **=** **<**div class**=**"csc-textpic-imagerow csc-textpic-imagerow-last imagecol1"**>**| **<**/div> 1 **<**.default 2 **=** TEXT 2**.**value **=** **<**div class**=**"csc-textpic-imagerow csc-textpic-imagerow-last imagecol2 clearfix"**>**| **<**/div> 3 **=** TEXT 3**.**value **=** **<**div class**=**"csc-textpic-imagerow csc-textpic-imagerow-last imagecol3 clearfix"**>**| **<**/div> 4 **=** TEXT 4**.**value **=** **<**div class**=**"csc-textpic-imagerow csc-textpic-imagerow-last imagecol4 clearfix"**>**| **<**/div> key**.**field **=** imagecols **}** rowStdWrap**.**wrap**.**cObject **=** CASE rowStdWrap**.**wrap**.**cObject **{** default **=** TEXT default**.**value **=** **<**div class**=**"csc-textpic-imagerow imagecol1"**>**| **<**/div> 1 **<**.default 2 **=** TEXT 2**.**value **=** **<**div class**=**"csc-textpic-imagerow imagecol2 clearfix"**>**| **<**/div> 3 **=** TEXT 3**.**value **=** **<**div class**=**"csc-textpic-imagerow imagecol3 clearfix"**>**| **<**/div> 4 **=** TEXT 4**.**value **=** **<**div class**=**"csc-textpic-imagerow imagecol4 clearfix"**>**| **<**/div> key**.**field **=** imagecols **}** noRowsStdWrap**.**wrap**.**cObject **=** CASE noRowsStdWrap**.**wrap**.**cObject **{** default **=** TEXT default**.**value **=** **<**div class**=**"csc-textpic-imagerow csc-textpic-imagerow-none imagecol1"**>** | **<**/div> 1 **<**.default 2 **=** TEXT 2**.**value **=** **<**div class**=**"csc-textpic-imagerow csc-textpic-imagerow-none imagecol2 clearfix"**>** | **<**/div> 3 **=** TEXT 3**.**value **=** **<**div class**=**"csc-textpic-imagerow csc-textpic-imagerow-none imagecol3 clearfix"**>** | **<**/div> 4 **=** TEXT 4**.**value **=** **<**div class**=**"csc-textpic-imagerow csc-textpic-imagerow-none imagecol4 clearfix"**>** | **<**/div> key**.**field **=** imagecols **}** allStdWrap**.**innerWrap**.**cObject**.**0**.**cObject **=** CASE allStdWrap**.**innerWrap**.**cObject**.**0**.**cObject **{** default **=** TEXT default**.**value **=** **<**div class**=**"csc-textpic-center-outer"**><**div class**=**"csc-textpic-center-inner"**>** | **<**/div**><**/div> 1 **=** TEXT 1**.**value **=** **<**div class**=**"csc-textpic-center-outer imagecol1"**><**div class**=**"csc-textpic-center-inner"**>** | **<**/div**><**/div> key**.**field **=** imagecols **}** **}** tt\_content**.**image**.**20**.**rendering**.**splitCaption **{** rowStdWrap**.**wrap **<** tt\_content.image.20.rendering.noCaption.rowStdWrap.wrap lastRowStdWrap**.**wrap **<** tt\_content.image.20.rendering.noCaption.lastRowStdWrap.wrap noRowsStdWrap**.**wrap **<** tt\_content.image.20.rendering.noCaption.noRowsStdWrap.wrap **}** *##single image* tt\_content**.**image**.**20**.**rendering **{** singleCaption**.**singleStdWrap**.**wrap**.**override **=** **<**div class**=**"imagecol1"**><**figure class**=**"csc-textpic-image###CLASSES###"**>**|###CAPTION###**<**/figure**><**/div> singleNoCaption**.**singleStdWrap**.**wrap**.**override **=** **<**div class**=**"imagecol1"**><**figure class**=**"csc-textpic-image###CLASSES###"**>** | **<**/figure**><**/div> **}** Notes: tt\_content.image.20.maxW = **651** div.csc-textpic-imagecolumn, td.csc-textpic-imagecolumn .csc-textpic-image {margin-right: 2%;} div[data-csc-cols="1"] div.csc-textpic-imagecolumn { width: 100%; } div[data-csc-cols="2"] div.csc-textpic-imagecolumn { width: 49%; } div[data-csc-cols="3"] div.csc-textpic-imagecolumn { width: 32%; } div[data-csc-cols="4"] div.csc-textpic-imagecolumn { width: 23.5%; } div[data-csc-cols="5"] div.csc-textpic-imagecolumn { width: 18.4%; } div[data-csc-cols="6"] div.csc-textpic-imagecolumn { width: 15%; } div[data-csc-cols="7"] div.csc-textpic-imagecolumn { width: 12.5%; } div[data-csc-cols="8"] div.csc-textpic-imagecolumn { width: 10.75%; }
{}