[FEATURE] Usefull additions for responsive image galleries in csc

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

@@ -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