Ich möchte gerne zum Hauptmenü (Navigation)
Ich möchte zum Hauptinhalt der Seite
  • Impressum
  • Datenschutz
  • Kontakt
  • Seitenübersicht
Logo von kupix webdesign Internet-Agentur
  • Aktuelle Hauptseite:
  • Über uns
    • Wie Sie uns finden
    • Referenzen
      • Ref. Kompaktübersicht
      • Referenzen gruppiert
      • Nicht mehr online
    • Testimonials
    • Unsere Partner
    • Kontakt
    • Angebotsanfrage
    • Einzugsermächtigung
    • Barrierefreiheit
    • Detail-Infos
  • Leistungen
    • Webdesign
      • Betreuung Ihrer Webseiten
      • Web auf'm Smartphone
      • One-Pager
    • Webseiten mieten
    • Webhosting
    • Ihre Geschäftspapiere
    • SKI
      • Fragen
      • Beispiele
      • SKI bestellen
  • Aktuelle Hauptseite:TYPO3
    • Über das CMS 'TYPO3'
    • TYPO3–Qualitätskriterien
    • Was kostet TYPO3?
    • TYPO3 für Redakteure
    • TYPO3 Hochrüstung!?
    • TYPO3 Snippets
      • Eigenes Inhaltselement (CType)
      • MASK-Akkordeon
      • MASK-Tabs
      • MASK-Multicolumn
      • Aktuelle Hauptseite:Slider über »Dateisammlung«
      • Text&Media–Slider
      • Text&Media Bilder aus Verzeichnis
      • #Gridelements-Akkordeon
      • #Gridelements-Tabs
      • T3 jQuery-Zoomple
      • News-List Mini-Cards
    • TYPO3 Lernvideos
  • Service
    • Support / Fernwartung
    • Was bedeutet CMS?
    • Warum ein CMS!?
    • Das CMS TYPO3
    • E-Mail-Konto einrichten
    • E-Mails sind Postkarten
    • Homepage-Validierung
  • Designelemente
    • Grids (Rasterelemente)
      • 2-Spalter
      • 3-Spalter
      • 4-Spalter
      • 5-Spalter
    • Boxen
      • Video-Box
      • Boxen nebeneinander
    • Features
      • Akkordeon
      • Akkordeon CSS
      • Bilder aus Verzeichnis (Thumbs)
      • Bilder aus Verzeichnis (Mauer)
      • Slider mit Hintergrundbildern
      • BX-Slider
      • GE Cards
      • Lupeneffekt
      • Parallax
      • Tabs
      • Timeline / Roadmap (news)
      • Timeline / Roadmap (textmedia)
      • Tabellen sortieren
      • News: Mini-Cards
      • Textarea-Ticker
  • Aktuelles
    • Änderungen
    • News Archiv
  • Impressum
  • Datenschutz
  • Kontakt
  • Seitenübersicht
kupix Logo
Home » TYPO3 » TYPO3 Snippets » Slider über »Dateisammlung«
TYPO3
  • Über das CMS 'TYPO3'
  • TYPO3–Qualitätskriterien
  • Was kostet TYPO3?
  • TYPO3 für Redakteure
  • TYPO3 Hochrüstung!?
  • Aktuelle Seite:TYPO3 Snippets
    • Eigenes Inhaltselement (CType)
    • MASK-Akkordeon
    • MASK-Tabs
    • MASK-Multicolumn
    • Aktuelle Seite:Slider über »Dateisammlung«
    • Text&Media–Slider
    • Text&Media Bilder aus Verzeichnis
    • #Gridelements-Akkordeon
    • #Gridelements-Tabs
    • T3 jQuery-Zoomple
    • News-List Mini-Cards
  • TYPO3 Lernvideos

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
Sondermenü
  • Impressum
  • Datenschutz
  • AGB
  • Seitenübersicht
  • Kontakt
  • Support
Kontakt

kupix webdesign
Sternschanze 16, 52428 Jülich

 +49 2461 910 111

 +49 2461 910 112

  +49 173 252 0001

 02461.xxx@keinSpam.910111.de

 Kontaktformular

 

Geschäftszeiten

Sie erreichen uns

am Mo., Di., Mi. und Fr.
 von 10:00 bis 18:00 Uhr

und am Do.
 von 09:00 bis 12:30 Uhr

Zuletzt abgeschlossenes Projekt
Langerweher Tafel ab 01.01.2023

01.01.2023

Langerweher Tafel, ab 2023 im Corporate Design der Tafel Deutschland

Ein Upgrade von TYPO3 V4 auf die aktuellste V11 haben wir am 25. Jan. 2022 durchgezogen!

⇒ mehr

Copyright © 2007 - 2023, kupix webdesign, 52428 Jülich
kupix webdesign — cookies

Allgemein Cookies

Mehr über die genutzten Cookies erfahren