[FEATURE] add an option to use the Title from the first slide as main…

… header of the page in the CE Slider (#275)
t3kit · Sep 12, 2017 · f1db53d · f1db53d
1 parent 9723f51
commit f1db53d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/Configuration/FlexForms/flexform_slider.xml b/Configuration/FlexForms/flexform_slider.xml
@@ -30,6 +30,14 @@
 						</config>
 					</TCEforms>
 				</captionAlign>
+				<useSlideOneHeaderAsPageHeader>
+					<TCEforms>
+						<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:slider.flexform.useSlideOneHeaderAsPageHeader</label>
+						<config>
+							<type>check</type>
+						</config>
+					</TCEforms>
+				</useSlideOneHeaderAsPageHeader>
 				</el>
 			</ROOT>
 		</sDEF>

diff --git a/Resources/Private/Language/ContentElements.xlf b/Resources/Private/Language/ContentElements.xlf
@@ -108,6 +108,9 @@
 			<trans-unit id="slider.link.text">
 				<source>Link text</source>
 			</trans-unit>
+			<trans-unit id="slider.flexform.useSlideOneHeaderAsPageHeader">
+				<source>Use the Title from the first slide as main header of the page (h1)</source>
+			</trans-unit>
 
 			<!--Bootstrap slider-->
 			<trans-unit id="bootstrap.slider.tabs.slides">

diff --git a/Resources/Private/Templates/ContentElements/Slider.html b/Resources/Private/Templates/ContentElements/Slider.html
@@ -3,11 +3,12 @@
 <f:layout name="Default" />
 <f:section name="Header" />
 <f:section name="Main">
+
 <!-- theme_t3kit: Templates/ContentElements/Slider.html [begin] -->
 	<f:if condition="{slides}">
 		<div class="img-slider swiper-container js__img-slider" data-autoplay="{f:if(condition: '{settings.autoplay} > 0', then: settings.autoplay)}">
 			<div class="swiper-wrapper img-slider__wrp">
-				<f:for each="{slides}" as="image">
+				<f:for each="{slides}" as="image" iteration="slideIteration">
 					<div class="swiper-slide img-slider__slide {settings.appearance.{image.referenceProperties.tx_themet3kit_slide_appearance}}">
 						<div data-background="{f:uri.image(src: '{image.uid}', treatIdAsReference:"1", width:'{f:if(condition: data.imagewidth, then: data.imagewidth, else: settings.defaultWidth)}')}" class="swiper-lazy img-slider__slide-bg">
 							<div class="swiper-lazy-preloader"></div>
@@ -16,7 +17,14 @@
 									<h3 class="img-slider__caption-sub-header">{image.referenceProperties.alternative}</h3>
 								</f:if>
 								<f:if condition="{image.referenceProperties.title}">
-									<h2 class="img-slider__caption-header">{image.referenceProperties.title}</h2>
+									<f:if condition="{slideIteration.cycle} == 1 && {settings.useSlideOneHeaderAsPageHeader}">
+										<f:then>
+											<h1 class="img-slider__caption-header">{image.referenceProperties.title}</h1>
+										</f:then>
+										<f:else>
+											<h2 class="img-slider__caption-header">{image.referenceProperties.title}</h2>
+										</f:else>
+									</f:if>
 								</f:if>
 								<f:if condition="{image.referenceProperties.description}">
 									<p class="img-slider__caption-p js__img-slider__caption-p">{image.referenceProperties.description}</p>