TYPO3 – tx_news Bootstrap Carousel wenn mehr als ein Bild

Diese Woche habe ich in einem TYPO3 Projekt was das Framework Bootstrap verwendet einen Bootstrap Carousel Slider in die tx_news eingebunden.
Hier möchte ich Euch kurz beschreiben wie Ihr selbst das Bootstrap Carousel in die Extension einbauen könnt: http://getbootstrap.com/javascript/#carousel

Als Erstes muss natürlich das Bootstrap Framework richtig im TYPO3 eingebunden werden. Dann gehen wir an die tx_news Templates dran.
Die Datei: FalMediaContainer.html müssen wir als Erstes bearbeiten und eine Abfrage einbauen, dass ein anderes Template verwendet wird, sobald mehr als ein Bild eingebunden wurde.

FalMediaContainer.html

<f:if condition="{media}">
	<!-- fal media files -->
	<div class="news-img-wrap">

		<f:if condition="{media -> f:count()} == 1">
			<f:then>
				<f:for each="{media}" as="mediaElement">
					<div class="outer">
						<f:if condition="{mediaElement.originalResource.type} == 2">
							<f:render partial="Detail/FalMediaImage" arguments="{mediaElement: mediaElement, settings:settings}"/>
						</f:if>
						<f:if condition="{mediaElement.originalResource.type} == 4">
							<f:render partial="Detail/FalMediaVideo" arguments="{mediaElement: mediaElement, settings:settings}"/>
						</f:if>
					</div>
				</f:for>
			</f:then>
			<f:else>
				<div id="carousel-news" class="carousel slide" data-ride="carousel">
					<!-- Indicators -->
					<ol class="carousel-indicators">
					<f:for each="{media}" as="mediaElement" iteration="iterator">
						<li data-target="#carousel-news" data-slide-to="{iterator.index}" class="{f:if(condition:'{iterator.isFirst} == 1',then:'active')}"></li>
					</f:for>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
						<f:for each="{media}" as="mediaElement" iteration="iterator">
							<f:if condition="{mediaElement.originalResource.type} == 2">
								<f:render partial="Detail/FalMediaImageSlider" arguments="{mediaElement: mediaElement, settings:settings, iterator:iterator}"/>
							</f:if>
						</f:for>
					</div>
				</div>
			</f:else>
		</f:if>
	</div>
</f:if>

Mit der Condition condition="{media -> f:count()} == 1" frage ich ab, ob es mehr als ein Bild gibt.
Sollte es mehr als ein Bild geben, verweise ich auf das „else“ und habe dort einen Teil des Bootstrap Carousel HTML´s eingebaut. Die for each Schleife verweise ich auf eine neue File: Detail/FalMediaImageSlider
Die Indicators erstelle ich mit einer zusätzlichen for each Schleife und einem iterator.index auf, damit wir ab der 0 den Iterator hochzählen.
Sollte es weniger als 2 Bilder geben, dann verweise ich auf die bekannte Datei: Detail/FalMediaImage hin.

Hier der Aufbau für die FalMediaImageSlider Datei:

<div class="item {f:if(condition:'{iterator.isFirst} == 1',then:'active')}">
	<div class="mediaelement mediaelement-image">
		<f:if condition="{settings.detail.media.image.lightbox}">
			<f:then>
				<a rel="{settings.detail.media.image.lightbox}" title="{mediaElement.title}" href="{f:uri.image(src:'{mediaElement.uid}' treatIdAsReference:1 maxWidth:'800')}">
					<f:image src="{mediaElement.uid}" treatIdAsReference="1" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{settings.detail.media.image.maxWidth}" maxHeight="{settings.detail.media.image.maxHeight}" class="img-responsive" />
				</a>
			</f:then>
			<f:else>
				<f:if condition="{mediaElement.link}">
					<f:then>
						<f:format.html parseFuncTSPath="lib.parseFuncNews">
							<link {mediaElement.link}>
							<f:image src="{mediaElement.uid}" treatIdAsReference="1" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{settings.detail.media.image.maxWidth}" maxHeight="{settings.detail.media.image.maxHeight}" class="img-responsive" />
							</link>
						</f:format.html>
					</f:then>
					<f:else>
						<f:image src="{mediaElement.uid}" treatIdAsReference="1" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{settings.detail.media.image.maxWidth}" maxHeight="{settings.detail.media.image.maxHeight}" class="img-responsive" />
					</f:else>
				</f:if>
			</f:else>
		</f:if>
	</div>
	<f:if condition="{mediaElement.description}">
		<p class="news-img-caption">
			{mediaElement.description}
		</p>
	</f:if>
</div>

Da der Bootstrap Slider eine „active“ Class für das erste Element benötigt, habe ich im ersten Teil eine Condition eingebunden: {f:if(condition:'{iterator.isFirst} == 1',then:'active')} .
Der restliche HTML/Fluid-Code sieht der org. Datei sehr ähnlich.
Diese kann natürlich nach belieben angepasst und umgebaut werden, wichtig das Ihr den Div-Container class="item" beibehaltet!

Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel geholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste.
Vielen Dank!


Ich bin TYPO3 Freelancer, TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web seit 2004.
Mehr Infos zu der TYPO3 Internet-Agentur INGENIUMDESIGN.

Besucht auch unser TYPO3 Hilfe Forum.

Leave a Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Ein Kommentar

  1. Peter

    Vielen Dank für die Anleitung. Genau, was ich brauchte ^^

Next ArticleTYPO3 User eXperience Week 2016 Sponsoren gesucht!