Ich möchte gerne zum Hauptmenü (Navigation)
Ich möchte zum Hauptinhalt der Seite
  • Impressum
  • Datenschutz
  • Kontakt
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
      • Praxishomepage
    • 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
      • 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
      • Tabs
      • Timeline / Roadmap (news)
      • Timeline / Roadmap (textmedia)
      • Tabellen sortieren
      • Textarea-Ticker
  • Aktuelles
    • Änderungen
    • News Archiv
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
    • 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":

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«

Das Ergebnis als HTML-Code

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

Sondermenü
  • Impressum
  • Datenschutz
  • AGB
  • Kontakt
  • Sitemap
  • Support
Kontakt

kupix webdesign
Sternschanze 16, 52428 Jülich

 +49 2461 910 111

 +49 2461 910 112

  +49 173 252 0001

 02461@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
Das Design ist geblieben, TYPO3 auf dem neusten Stand

27.02.2022

Schriftsteller "Jan Zweyer" — TYPO3-Upgrade auf V11.5.x

Jan Zweyer sieht zu, dass er seine TYPO3-Anwendung auf dem neusten Stand hält.

⇒ mehr

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

Allgemein Cooikies

Mehr über die genutzten Cookies erfahren