\ 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%; }