[FEATURE] add responsive bg images into gridelements and HeroImage

t3kit · May 17, 2017 · 19cc05d · 19cc05d
1 parent 8a23016
commit 19cc05d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/Resources/Private/Layouts/GridElements/Default.html b/Resources/Private/Layouts/GridElements/Default.html
@@ -6,7 +6,7 @@
 		<f:then>
 			<f:if condition="{files.0}">
 				<f:then>
-					<div class="{data.frame_class} {data.space_before_class} {data.space_after_class} col-bg-img" style="background-image: url('{f:uri.image(src: '{files.0.uid}', treatIdAsReference: 1)}')">
+					<div class="{data.frame_class} {data.space_before_class} {data.space_after_class} col-bg-img {f:cObject(typoscriptObjectPath:'lib.responsiveBackgroundImage', data:files.0.uid)}">
 				</f:then>
 				<f:else>
 					<div class="{data.frame_class} {data.space_before_class} {data.space_after_class}">
@@ -15,7 +15,7 @@
 		</f:then>
 		<f:else>
 			<f:if condition="{files.0}">
-				<div class="col-bg-img" style="background-image: url('{f:uri.image(src: '{files.0.uid}', treatIdAsReference: 1)}')">
+				<div class="col-bg-img {f:cObject(typoscriptObjectPath:'lib.responsiveBackgroundImage', data:files.0.uid)}" >
 			</f:if>
 		</f:else>
 	</f:if>

diff --git a/Resources/Private/Templates/ContentElements/HeroImage.html b/Resources/Private/Templates/ContentElements/HeroImage.html
@@ -5,7 +5,7 @@
 <f:section name="Main">
 <!-- theme_t3kit: Templates/ContentElements/HeroImage.html [begin] -->
 	<f:if condition="{image}">
-		<div class="hero-image js__hero-image"  style="background-image:url('{f:uri.image(image: image.0, maxWidth:'{f:if(condition: data.imagewidth, then: data.imagewidth, else: settings.maxWidth)}')}');">
+		<div class="hero-image js__hero-image {f:cObject(typoscriptObjectPath:'lib.responsiveBackgroundImage', data:image.0.uid)}">
 			<div class="hero-image__caption-wrp {f:if(condition: '{settings.horizontalAlignment} == 0', then: '_left-align')}{f:if(condition: '{settings.horizontalAlignment} == 1', then: '_center-align')}{f:if(condition: '{settings.horizontalAlignment} == 2', then: '_right-align')}" style="height: {settings.elementHeight}px; background-color:{f:if(condition: settings.transparentLayer, then: '{settings.transparentLayer}')};">
 				<div class="hero-image__caption {f:if(condition: '{settings.animationStyle} == 0', then: '', else: '_caption-animated-{settings.animationStyle}')} {f:if(condition: '{settings.verticalAlignment} == 0', then: '_top')}{f:if(condition: '{settings.verticalAlignment} == 2', then: '_bottom')}">
 					<f:if condition="{data.header}">