Slider über »Dateisammlung« mit dem CE »Dateilinks«

Und so wird es gemacht:



Erweitern des Felds "uploads_type" per TSConfig

"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.



Backend: Das CE Dateisammlung [Template: "Uploads.html"]

Screenshots aus dem Backend zum Silder per "Dateisammlung":

2018-10-03 094903


Erweiterung des Standard-Templates zu "uploads.html"

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.



Dateisammlung / Uploads

Der Slider muss natürlich über ein Uploads-CE gefüttert werden. Dazu hier zwei Bilder zur »Dateisammlung«

2018-10-04 120641 uploads-dateisammlung
2018-10-04 120641 uploads-dateisammlung inhalt


Das Ergebnis als HTML-Code

2018-10-04 120056 uploads-slider-fe-part
2018-10-03 095004

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.

Ein Beispiel - Demo

BorkumStefanGrothus b10
BorkumStefanGrothus b25
BorkumStefanGrothus b30
kupix webdesign — cookies

Allgemein Cookies

Mehr über die genutzten Cookies erfahren