KG Strohmänner 1966 e.V. — Selgersdorf
Der Webmaster Karl-Heinz Stier kam auf uns zu und bat um einen neuen Internetauftritt.
⇒ mehr"uploads_type" = "Datei/Symbol/Vorschaubild anzeigen"
in die Page-TSConfig kommt:
TCEFORM.tt_content {
uploads_type {
// Slider hinzufügen
addItems.3 = Bilddateien als Slider ausgeben
addItems.4 = Bilddateien als Thumbs ausgeben
}
}
Der Tipp mit TSConfig anstatt TCA ($GLOBALS['TCA']['tt_content']['columns']['uploads_type']['config']['items']['3']['0'] = 'Bilddateien als Slider ausgeben';) kam von Roman Ott aus dem TYPO3-Forum in Facebook.
Ich habe das Standard-TYPO3-Template "uoloads.html" verändert. Dazu gehören dann noch zwei Partials:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
// Slider-Parameter:
// - mode: 'horizontal', 'vertical', 'fade',
<f:section name="Main">
<f:if condition="{files}">
<f:switch expression="{data.uploads_type}">
<f:case value="3">
<f:render partial="PartUploads3" arguments="{_all}" />
</f:case>
<f:case value="4">
<f:render partial="PartUploads4" arguments="{_all}" />
</f:case>
<f:defaultCase>
<ul class="ce-uploads ce-uploads{data.uploads_type}">
<f:for each="{files}" as="file" iteration="fileIterator">
<li>
<f:if condition="{data.uploads_type} == 1">
<img src="{f:uri.resource(path: 'Icons/FileIcons/{file.extension}.gif', extensionName: 'frontend')}" alt="">
</f:if>
<f:if condition="{data.uploads_type} == 2">
<f:if condition="{f:uri.image(src: 'file:{f:if(condition: file.originalFile, then: \'file:{file.originalFile.uid}\', else: \'file:{file.uid}\')}')} != '/'">
<f:then>
<a href="{file.publicUrl}" {f:if(condition:data.target,then: ' target="{data.target}"')}{f:if(condition: file.title, then: ' title="{file.title}"')}>
<f:media file="{file}" width="150" alt="{file.properties.alternative}" />
</a>
</f:then>
<f:else>
<img src="{f:uri.resource(path: 'Icons/FileIcons/{file.extension}.gif', extensionName: 'frontend')}" alt="">
</f:else>
</f:if>
</f:if>
<div>
<a href="{file.publicUrl}" {f:if(condition:data.target,then: ' target="{data.target}"')}{f:if(condition: file.title, then: ' title="{file.title}"')}>
<span class="ce-uploads-fileName">{f:if(condition: file.properties.title, then: file.properties.title, else: file.name) -> f:format.htmlspecialchars()}</span>
</a>
<f:if condition="{file.properties.description}">
<f:if condition="{data.uploads_description}">
<span class="ce-uploads-description">{file.properties.description}</span>
</f:if>
</f:if>
<f:if condition="{data.filelink_size}">
<span class="ce-uploads-filesize"><f:format.bytes value="{file.properties.size}" /></span>
</f:if>
</div>
</li>
</f:for>
</ul>
</f:defaultCase>
</f:switch>
</f:if>
</f:section>
</html>
Das Partial "PartUploads3.html":
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div id="imageSlider{data.uid}" class="ce-uploads ce-uploads-{data.uploads_type} imageSlider">
<f:for each="{files}" as="file" iteration="fileIterator">
<div class="slider-item">
<figure>
<f:media file="{file}" alt="{file.properties.alternative}" />
<f:if condition="{data.uploads_description}">
<figcaption class="ce-uploads-description">{file.properties.description}</figcaption>
</f:if>
</figure>
</div>
</f:for>
</div>
<script>
$(document).ready(function(){
$(<f:format.raw>'#imageSlider{data.uid}'</f:format.raw>).bxSlider({
mode: <f:format.raw>{f:if(condition:'{data.layout} == "horizontal"', then: "'horizontal'", else: "'fade'")}</f:format.raw>,
auto: true,
speed: 1000,
pause: 5000,
autoControls: true,
stopAutoOnClick: true,
pager: true,
captions: true,
autoHover: true
});
});
</script>
Das Partial "PartUploads3.html":
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div id="imageThumbs{data.uid}" class="ce-uploads ce-uploads-{data.uploads_type} imageThumbs">
<f:for each="{files}" as="file" iteration="fileIterator">
<div class="thumb">
<figure>
<f:media file="{file}" alt="{file.properties.alternative}" />
<f:if condition="{data.uploads_description}">
<figcaption class="ce-uploads-description">{file.properties.description}</figcaption>
</f:if>
</figure>
</div>
</f:for>
</div>
Alles, was Ihr braucht — Es steht gezippt unten zum Herunterladen bereit.
Ich habe mal unter FSC mit dem Template "uploads.html" (Dateisammlung) einen Slider mit dem Javascript "jquery.bxslider.js" umgesetzt.
Das möchte ich Euch gerne hier vorstellen (Der Wunsch dazu kam aus einem Facebook-TYPO3-Forum).
Eine wichtige Bemerkung: Falls Ihr bootstrap benutzt dann müsst Ihr aufpassen beim bxSlide => mode "fade" aufpassen. Falls Ihr nämlich in einem umgebenden DIV die Klasse "fade" vergebt, dann seht Ihr im FE gar nichts, nur ein reines weiß!
Denn in den Bootstrap wird die Klasse "fade" mit "opacity:0;" im CSS versehen und man sieht dann eben NICHTS.