[FEATURE] Usefull additions for responsive image galleries in csc 53/20153/2
authorPatrick Broens <patrick@patrickbroens.nl>
Thu, 25 Apr 2013 11:35:37 +0000 (13:35 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Thu, 2 May 2013 20:44:16 +0000 (22:44 +0200)
For responsive html5 image galleries it might be wise to add some extra
data, using extra html5 attributes containing the image count and the
amount of rows.

This patch adds these attributes to the elements with the class
csc-textpic-imagewrap.

Change-Id: I60e8fd055b472092282315fef2984481d083321c
Resolves: #47578
Releases: 6.2
Reviewed-on: https://review.typo3.org/20153
Reviewed-by: Dmitry Dulepov
Reviewed-by: Sebastian Fischer
Tested-by: Sebastian Fischer
Reviewed-by: Mattias Nilsson
Tested-by: Mattias Nilsson
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
typo3/sysext/css_styled_content/static/setup.txt

index 246fb38..3676ffd 100644 (file)
@@ -934,7 +934,16 @@ tt_content.image.20 {
                                }
                        }
                        allStdWrap {
-                               wrap = <div class="csc-textpic-imagewrap"> | </div>
+                               dataWrap = <div class="csc-textpic-imagewrap"> | </div>
+                               dataWrap {
+                                       override = <div class="csc-textpic-imagewrap" data-csc-images="{register:imageCount}" data-csc-cols="{field:imagecols}"> | </div>
+                                       override {
+                                               if {
+                                                       value = html5
+                                                       equals.data = TSFE:config|config|doctype
+                                               }
+                                       }
+                               }
                                innerWrap.cObject = CASE
                                innerWrap.cObject {
                                        key.field = imageorient
@@ -968,7 +977,18 @@ tt_content.image.20 {
                noCaption {
                        # Multiple images and no caption at all
                        fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
-                       allStdWrap.wrap = <div class="csc-textpic-imagewrap"> | </div>
+                       allStdWrap {
+                               dataWrap = <div class="csc-textpic-imagewrap"> | </div>
+                               dataWrap {
+                                       override = <div class="csc-textpic-imagewrap" data-csc-images="{register:imageCount}" data-csc-cols="{field:imagecols}"> | </div>
+                                       override {
+                                               if {
+                                                       value = html5
+                                                       equals.data = TSFE:config|config|doctype
+                                               }
+                                       }
+                               }
+                       }
                        singleStdWrap {
                                wrap = <div class="csc-textpic-image###CLASSES###"> | </div>
                                wrap {
@@ -1045,9 +1065,9 @@ tt_content.image.20 {
                        # Just one image without a caption
                        fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
                        allStdWrap {
-                               wrap = <div class="csc-textpic-imagewrap"><table>###CAPTION###<tbody> | </tbody></table></div>
-                               wrap {
-                                       override = <figure class="csc-textpic-imagewrap"> | ###CAPTION###</figure>
+                               dataWrap = <div class="csc-textpic-imagewrap"><table>###CAPTION###<tbody> | </tbody></table></div>
+                               dataWrap {
+                                       override = <figure class="csc-textpic-imagewrap" data-csc-images="{register:imageCount}" data-csc-cols="{field:imagecols}"> | ###CAPTION###</figure>
                                        override {
                                                if {
                                                        value = html5