[TASK] seperate responsive image typoscript for contact cards CE (#299)

Configuration/TypoScript/Library/lib.responsiveContactCards.setupts

@@ -0,0 +1,102 @@
+lib.responsiveContactCards = TEXT
+lib.responsiveContactCards {
+    current = 1
+    wrap = responsiveBg|
+
+    append = LOAD_REGISTER
+    append {
+        t3kit_responsiveContactCards = TEXT
+        t3kit_responsiveContactCards {
+            prepend = TEXT
+            prepend {
+                data = register:t3kit_responsiveContactCards
+                wrap = |,
+                required = 1
+            }
+
+            current = 1
+            trim = 1
+        }
+    }
+
+}
+
+page.cssInline {
+    1460 = FILES
+    1460 {
+
+        references.data = register:t3kit_responsiveContactCards
+
+        renderObj = COA
+        renderObj {
+            5 = LOAD_REGISTER
+            5 {
+                mediaImageIndex = TEXT
+                mediaImageIndex {
+                    cObject = TEXT
+                    cObject {
+                        data = register:sectionIteration
+                        intval = 1
+                        outerWrap = |+1
+                    }
+
+                    prioriCalc = 1
+                }
+            }
+
+            10 = TEXT
+            10 {
+                prepend = TEXT
+                prepend {
+                    data = file:current:uid
+                    noTrimWrap = |.responsiveBg| { background-image: url(/|
+                }
+
+                cObject = IMG_RESOURCE
+                cObject {
+                    file {
+                        import.data = file:current:uid
+                        treatIdAsReference = 1
+                        width = 212
+                    }
+                }
+
+                append = TEXT
+                append {
+                    value = ); }
+                }
+            }
+
+            20 = TEXT
+            20.cObject < .10
+            20 {
+                cObject.cObject.file.width = 256
+                noTrimWrap = | @media (max-width: 767px) { | } |
+            }
+            30 = TEXT
+            30.cObject < .10
+            30 {
+                cObject.cObject.file.width = 384
+                noTrimWrap = | @media (min-width: 992px) { | } |
+            }
+            60 = TEXT
+            60.cObject < .10
+            60 {
+                cObject.cObject.file.width = 414
+                noTrimWrap = | @media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 767px) and (min-resolution: 2dppx) { | } |
+            }
+            70 = TEXT
+            70.cObject < .10
+            70 {
+                cObject.cObject.file.width = 512
+                noTrimWrap = | @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 768px) and (min-resolution: 2dppx) { | } |
+            }
+            80 = TEXT
+            80.cObject < .10
+            80 {
+                cObject.cObject.file.width = 768
+                noTrimWrap = | @media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 992px) and (min-resolution: 2dppx) { | } |
+            }
+        }
+    }
+}

Resources/Private/Templates/ContentElements/ContactsCard.html

@@ -12,7 +12,7 @@
 					<f:if condition="{imageIteration.isFirst}">
 						<f:if condition="{settings.imgAsBg} == 1">
 							<f:then>
-								<div class="contacts-card__contacts-photo _img-overlay {f:cObject(typoscriptObjectPath:'lib.responsiveBackgroundImage', data:image.uid)}"></div>
+								<div class="contacts-card__contacts-photo _img-overlay {f:cObject(typoscriptObjectPath:'lib.responsiveContactCards', data:image.uid)}"></div>
 							</f:then>
 							<f:else>
 								<f:image class="img-responsive contacts-card__contacts-photo" image="{image}" maxWidth="{settings.defaultWidth}" cropVariant="default" />