[FEATURE] Hero Image, add semitransparent overlay (#197)

t3kit · May 9, 2017 · bec9812 · bec9812
1 parent d31a05c
commit bec9812
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/Configuration/FlexForms/flexform_heroImage.xml b/Configuration/FlexForms/flexform_heroImage.xml
@@ -41,6 +41,16 @@
 						</TCEforms>
 					</linkAsBtn>
 
+					<transparentLayer>
+            <TCEforms>
+              <label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.transparentLayer</label>
+              <config>
+                <type>input</type>
+                <rows>1</rows>
+              </config>
+            </TCEforms>
+          </transparentLayer>
+
 					<horizontalAlignment>
 						<TCEforms>
 							<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.horizontalAlignment</label>

diff --git a/Resources/Private/Language/ContentElements.xlf b/Resources/Private/Language/ContentElements.xlf
@@ -278,6 +278,9 @@
             </trans-unit>
             <trans-unit id="heroImage.flexform.elementHeight">
                 <source>Set height of element</source>
+            </trans-unit>
+			<trans-unit id="heroImage.flexform.transparentLayer">
+                <source>Element overlay color (rgba). Link to online generator: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool</source>
             </trans-unit>
             <trans-unit id="heroImage.flexform.horizontalAlignment">
                <source>Horizontal alignment</source>

diff --git a/Resources/Private/Templates/ContentElements/HeroImage.html b/Resources/Private/Templates/ContentElements/HeroImage.html
@@ -6,7 +6,7 @@
 <!-- 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__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">
+			<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}">
 						<h2 class="hero-image__caption-header" data-header-content='{data.header}'>{data.header}</h2>