Bootstrap carousel via Typoscript mit Bildern aus den Seiteneigenschaften befüllen

Heutzutage ist ein Slider auf einer Webseite ja mehr oder weniger Standard und Bootstrap wird nicht nur bei uns mehr und mehr verwendet, sondern erfreut sich in der ganzen Webentwicklungs Szene an großer Beliebtheit. Da Bootstrap von Haus aus schon eine Slider Funktion mitbringt, warum sich nicht einfach diese zu nutze machen? und eine unnötige Extension sparen 😀 ?

Um das Ganze zu bewerkstelligen brauchen wir nicht viel.

  • Einmal muss das Javascript vorhanden sein. Entweder die komplette bootstrap.js oder hier habe ich auch ein standalone gefunden, allerdings nicht getestet.
  • JQuery muss natürlich eingebunden sein
  • und dann das Typoscript(siehe unten)
lib.slider = COA
lib.slider{
  wrap = <div id="carousel-slider" class="carousel slide" data-ride="carousel">|</div>
  #Hier hole bzw. zähle ich die Bilder aus den Seiteneigeschaften(Ressourcen/Media) um die Navigation zu erstellen.
  5 = FILES
  5.stdWrap.wrap = <ol class="carousel-indicators">|</ol>
  5{
    references{
      data = levelmedia:-1, slide
      treatIdAsReference = 1
    }
    renderObj = COA
    renderObj {
      4 = TEXT
      4.wrap = <li data-target="#carousel-slider" data-slide-to="|" class="active"></li>|*|<li data-target="#carousel-slider" data-slide-to="|"></li>
      4.value = {register:FILE_NUM_CURRENT}
      4.insertData = 1
    }
  }
  #Hier nochmal das gleiche Spiel nur das ich diesmal auch die Bilder tatsächlich ausgebe
  10 = FILES
  10{
    stdWrap.wrap = <div class="carousel-inner">|</div>
    references{
      data = levelmedia:-1, slide
      treatIdAsReference = 1
    }
    renderObj = COA
    renderObj {
      wrap = <div class="item active">|</div>|*|<div class="item">|</div>
      4 = IMAGE 
      4{
        stdWrap.wrap = |
        stdWrap.required = 1
        file.import.data = file:current:originalUid
        # hier croppe ich mir die Bilder nochmal zurecht und habe mir dafür 2 Konstanten erstellt
        file.width = {$dis.tpitb.silderWidth}c
        file.height = {$dis.tpitb.silderHeight}c
        # Setze den Link der im Bild eingestellt ist.
	stdWrap.typolink.parameter.data = file:current:link
      }
      # Hier gebe ich den Titel und die Beschreibung für das Bild aus. Das Ganze muss dann noch per CSS nach Wünschen gestylt werden.
      10 = COA
      10{
        wrap = <div class="carousel-caption">|</div>
        stdWrap.required = 1
        stdWrap.typolink.parameter.data = file:current:link
        4 = TEXT
        4{
        	wrap = <h3>|</h3>
        	data = file:current:title
        } 
        8 = TEXT
        8{
        	wrap = <p>|</p>
        	data = file:current:description
        } 
      }
    }
  }
}

Jetzt muss natürlich das Javascript auch noch initialisiert werden

//aktiviere den Bootstrap Slider
$('.carousel').carousel();

Und Fertig 😀

Viel Spaß damit.

52 Kommentare

  • Dirk Hundertmark

    Hallo,

     

    endlich mal ein vernünftiges Script, welches auch funktioniert. Ich bin begeistert !!!!!

    Eine Frage hab ich aber: Ich hab die Slideshow in mein Typo3 / Bootstrap eingebunden. FUnktioniert.
    Wie kann ich das einstellen, dass die Bilder responsive auf volle breite / höhe skaliert werden?

    Vielen vielen vielen vielen Dank im voraus.

    Gruß

    Dirk

  • Hallo,

    in den Zeilen 37 und 38 werden die Bilder gecroppt. Du könntest statt fester Breite und Höhe einfach maxWidth und maxHeight für einen Maximalwert verwenden. Das responsive ist dann pures CSS.

  • Hi,

    Could you please tell me „where“ / „how“ should I load the Typoscript?

    Tks!

    • Just add it or create or a Typoscript Template on your Rootpage. Then you can include the lib.slider in FLUID or somewhere on your page using page.356XYZ < lib.slider

  • Hallo, wie baue ich bei diesem Bootstrap Carousel einen prev und next Button ein, irgendwie bekomme ich das gerade nicht hin. Wäre super wenn Sie mir da helfen könnten, danke schonmal. Lg

    • Das würde dann so aussehen. Je nach Styling können dann die spans im cObject 15 verändert werden bzw. das ganze via LESS/CSS individualisiert werden

      lib.slider = COA
      lib.slider{
        wrap = <div id="carousel-slider" class="carousel slide" data-ride="carousel">|</div>
        5 = FILES
        5.stdWrap.wrap = <ol class="carousel-indicators">|</ol>
        5{
          references{
            data = levelmedia:-1, slide
            treatIdAsReference = 1
          }
          renderObj = COA
          renderObj {
            4 = TEXT
            4.wrap = <li data-target="#carousel-slider" data-slide-to="|" class="active"></li>|*|<li data-target="#carousel-slider" data-slide-to="|"></li>
            4.value = {register:FILE_NUM_CURRENT}
            4.insertData = 1
          }
        }
        10 = FILES
        10{
          stdWrap.wrap = <div class="carousel-inner">|</div>
          references{
            data = levelmedia:-1, slide
            treatIdAsReference = 1
          }
          renderObj = COA
          renderObj {
            wrap = <div class="item active">|</div>|*|<div class="item">|</div>
            4 = IMAGE 
            4{
              stdWrap.wrap = |
              stdWrap.required = 1
              file.import.data = file:current:originalUid
              file.width = {$dis.tpitb.style1.silderWidth}c
              file.height = {$dis.tpitb.style1.silderHeight}c
              stdWrap.typolink.parameter.data = file:current:link
            }
            10 = COA
            10{
              wrap = <div class="carousel-caption">|</div>
              stdWrap.required = 1
              stdWrap.typolink.parameter.data = file:current:link
              4 = TEXT
              4{
                wrap = <h3>|</h3>
                data = file:current:title
              } 
              8 = TEXT
              8{
                wrap = <p>|</p>
                data = file:current:description
              } 
            }
          }
        }
        15 = TEXT
        15.value  (
          <a class="left carousel-control" href="#carousel-slider" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-slider" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
        )
      }
      
      • Oliver, ich bedanke mich ganz herzlich fürs Weiterhelfen, hatte eigentlich gestern so einen ähnlichen Code versucht, da hat es mir den ganzen Slider zerschossen, naja.. ich weiß zwar nicht warum, aber jetzt mit deinem Code funktioniert es…. danke nochmal. Lg

  • Ein weiteres hallo und großes Lob für das Script. Funktioniert auch bei mir einwandfrei. Vielen Dank.
    Da ich nicht der einzige bin, der auf unserer Seite arbeiten wird, würde ich wahnsinnig gerne die Bilder nicht aus dem Seiteneigenschaften sondern – der Übersicht wegen – aus einem Content Element der Sorte Image auslesen. Die ID des CE wäre in meinem Fall 852 und liegt auf der Startseite mit der ID 1. Ist das Script dahingehend einfach zu modifizieren? VG

    • Vielen Dank für das Lob und natürlich ist das Script so modifizierbar dass Bilder aus einem gewissen CE verwendet werden.
      Dafür muss man nur folgende Passage (Zeilen 7 und 22)

       references{
            data = levelmedia:-1, slide
            treatIdAsReference = 1
        }
      

      mit

       references{
          table = tt_content
          uid = 13 #<-- UID VOM CE#
          fieldName = image
        }
      

      ersetzten.

      Viel Spaß damit und schönen Feierabend wünsche ich 😀

  • Besten Dank für den super schnellen Support und ebenfalls einen schönen & sonnigen Feierabend 🙂

  • Hallo Oliver, ich hätte nochmal eine Frage, wie baue ich den Slider so um, dass das Bild aus den Seiteneigenschaften als Hintergrundbild ausgegeben wird, versuch es schon die ganze Zeit mit IMG_RESOURCE, leider schaffe ich es nicht. Könntest du mir vielleicht noch einen Tipp geben. Danke schonmal. Lg

  • Hallo,
    vorweg, vielen Dank für die gute Arbeit! 🙂
    Ich konnte den Slider in eine onePage-Seite eingliedern, zumindest beinahe vollständig.
    Zwar wird das entsprechende div in der Seite angezeigt, allerdings zieht er sich nicht die Bilder aus den Ressourcen – der Slider bleibt also immerzu leer.

    Eine Idee, woran das liegen könnte? Die Bilder in den Ressourcen habe ich natürlich ganz normal über das Typo3-Backend „Ressourcen“ hinzugefügt – doch sie wollen einfach nicht angezeigt werden. 🙁

    Viele Grüße
    Valerio

    • Moin Valerio,
      hast du das TS verändert? Wen ja was davon? Liegt das TS im Haupttemplate? Was für eine TYPO3 Version benutzt du? Das HTML für den Slider wird korrekt generiert? Also die Divs „carousel-slider“ usw. werden gerendert? Die Bilder liegen in den „Ressourcen“ der Seiteneigenschaften(um sicher zu gehen 🙂 ).

      • Hallo Oliver,
        danke für die schnelle Antwort.

        – Das TS wurde nicht verändert.
        – Das TS liegt im Haupttemplate, es wird folgendermaßen eingebunden, wobei lib.sectionContent der OnePager ist (der Slider soll am Kopf der Seite stehen):

        <div id="content">
          <f:cObject typoscriptObjectPath="lib.slider" />
          <f:cObject typoscriptObjectPath="lib.sectionContent" />
        </div>
        

        – Typo3 Version ist 7.6.13
        – Die divs werden gerendert, im Quellcode erscheint folgender Text:

        <div id="carousel-slider" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators"></ol>
        <div class="carousel-inner"></div>
        </div>
        

        – Ich füge die Bilder über den Rechtsklick auf die Seite, „Edit Page Properties“, „Resources“ und „Create new Relation“ hinzu. Dies tue ich auf der Root-Seite, das ist auch die Seite, wo das Template eingebunden ist (alle darunter folgenden Seiten erben das Template).

        Viele Grüße
        Valerio

        • emm strange. Hab das gerade noch mal schnell in ein 7.6.11 getestet da holt er sich die Bilder wie gewünscht.
          Versuche doch mal bitte nur das aus dem TS raus zu rendern. Ohne andere Einstellungen.

          page >
          page = PAGE
          page.5 < lib.slider
          
          lib.slider = COA
          lib.slider{
            wrap = <div id="carousel-slider" class="carousel slide" data-ride="carousel">|</div>
            #Hier hole bzw. zähle ich die Bilder aus den Seiteneigeschaften(Ressourcen/Media) um die Navigation zu erstellen.
            5 = FILES
            5.stdWrap.wrap = <ol class="carousel-indicators">|</ol>
            5{
              references{
                data = levelmedia:-1, slide
                treatIdAsReference = 1
              }
              renderObj = COA
              renderObj {
                4 = TEXT
                4.wrap = <li data-target="#carousel-slider" data-slide-to="|" class="active"></li>|*|<li data-target="#carousel-slider" data-slide-to="|"></li>
                4.value = {register:FILE_NUM_CURRENT}
                4.insertData = 1
              }
            }
            #Hier nochmal das gleiche Spiel nur das ich diesmal auch die Bilder tatsächlich ausgebe
            10 = FILES
            10{
              stdWrap.wrap = <div class="carousel-inner">|</div>
              references{
                data = levelmedia:-1, slide
                treatIdAsReference = 1
              }
              renderObj = COA
              renderObj {
                wrap = <div class="item active">|</div>|*|<div class="item">|</div>
                4 = IMAGE
                4{
                  stdWrap.wrap = |
                  stdWrap.required = 1
                  file.import.data = file:current:originalUid
                  # hier croppe ich mir die Bilder nochmal zurecht und habe mir dafür 2 Konstanten erstellt
                  file.width = 100c
                  file.height = 100c
                  # Setze den Link der im Bild eingestellt ist.
              stdWrap.typolink.parameter.data = file:current:link
                }
                # Hier gebe ich den Titel und die Beschreibung für das Bild aus. Das Ganze muss dann noch per CSS nach Wünschen gestylt werden.
                10 = COA
                10{
                  wrap = <div class="carousel-caption">|</div>
                  stdWrap.required = 1
                  stdWrap.typolink.parameter.data = file:current:link
                  4 = TEXT
                  4{
                      wrap = <h3>|</h3>
                      data = file:current:title
                  } 
                  8 = TEXT
                  8{
                      wrap = <p>|</p>
                      data = file:current:description
                  } 
                }
              }
            }
          }
          
          • Wenn ich mein TS komplett rausnehme und deinen Abschnitt einfüge, dann bleibt die Seite (wie zu erwarten) komplett weiß- ich habe zwar keinen Slider, aber er zeigt mir eine Aufzählung an: Bei zwei hochgeladenen Bildern eine „1.“ und eine „2.“
            Lade ich noch ein drittes Bild hoch, erscheint sinnvollerweise auch eine „3.“ in der Aufzählung – also entsprechend der Bildanzahl. Nur Bilder sehe ich keins.

  • Habe das gerade noch mal in einem 7.6.15 testen lassen, da wurden die Bilder auch korrekt gerendert. Das normale Bild rendering funktioniert im test Setup im install tool? Weil die Bilder scheint er ja korrekt zu finden da er auch die Anzahl usw. korrekt rendert, nur irgendwie bekommt das System die Bilder nicht hin.

  • Hallo,

    nachdem ich im Install Tool geschaut habe, geht es jetzt. Keine Ahnung, wieso – trotzdem danke für die Mühe 🙂
    Top Support, weiter so!

    Viele Grüße
    Valerio

  • Hallöchen vorweg, das Script funktioniert sehr gut, klasse Arbeit.
    Ich habe nur ein kleines anderes Problem. Kann man die Ressourcen einer Seiter z.b. ab Bild Nummer 3 anzeigen lassen. Ich nutze gegenwärtig die ersten beiden Bilder unter Ressourcen in der Seite, diese sollen nicht im Slider auftauchen. Ich suche also eine Lösung entweder das die der Slider erst ab Bild 3 anfängt oder das ich die Bilder in einem anderen Content ablege und darauf zugreife.
    Ich benutze Typo 7.6 mit Fluid,
    Ich habe bereits versucht in dem Script dies auszutauschen

     references{
       table = tt_content
       uid = 13 #<-- UID VOM CE#
       fieldName = image
     }
    

    Leider ohne Erfolg.

    • Moinsen, dafür brauchst du einfach eine weitere typoscript if Bedingung.
      Welche in jedes renderObj mit rein muss.

       renderObj = COA
       renderObj {
            #wert ab welchem Bild das ganze angezeigt werden soll
            if.value = 2 
            if.isLessThan.data = register:FILE_NUM_CURRENT
            if.negate = 1
      
           ...
      }
      

      Das könnte allerdings den optionSplit, im renderObj stören(sehr wahrscheinlich 😀 ) und ggf. keinen active Status mehr vergeben. Ich weiß aber nicht ob der zwingend notwendig ist für das korrekte funktionieren, wenn ja, dann brauchen wird dort auch irgendwas z.B. einen override um den wrap zu modifizieren. Kannst mich ja am laufenden halten 🙂

      references{
         table = tt_content
         uid = 13 #<-- UID VOM CE#
         fieldName = image
       }
      

      das sollte allerdings auch gehen, wobei 13 die UID vom dem Content Element ist(welche in deinem Fall dann sicher abweichen würde und dementsprechend ersetzt werden müsste). Vielleicht verursacht der Kommentar in der Zeile Probleme

      //EDIT
      in fluid styled content heißt das field assets

         fieldName = assets
      
      • Hallo Oliver, danke für deine schnelle Reaktion, ich muss mich entschuldigen das Typo3 für mich noch Neuland ist.

        In deinem ersten Beispiel habe ich die If Anweisung in beide renderObj { eingefügt. Er zeigt zwar die richtige Anzahl der restlichen hinterlegten Grafiken an aber die Grafik selbst leider nicht.

        Ich würde die zweite Variante bevorzugen mit Table = tt_content, ich habe auch die uid zugewiesen die bei mir die 32 ist. Leider wird mir anschließend überhaupt nichts angezeigt und der Bereich bleibt leer. Im Content 32 sind ebenfalls die Grafiken unter Ressorcen angelegt. 🙁

        • Dafür braucht man sich doch nicht zu entschuldigegen, irgendwo muss man ja anfangen.
          So sieht die Variante aus wo die Bilder aus den Seiteneigenschaften gezogen werden und erst ab dem 2 angezeigt werden:

          lib.slider = COA
          lib.slider {
          	wrap = <div id="carousel-slider" class="carousel slide" data-ride="carousel">|</div>
          	#Hier hole bzw. zähle ich die Bilder aus den Seiteneigeschaften(Ressourcen/Media) um die Navigation zu erstellen.
          	5 = FILES
          	5.stdWrap.wrap = <ol class="carousel-indicators">|</ol>
          	5{
          		references{
          			data = levelmedia:-1, slide
          			treatIdAsReference = 1
          		}
          		renderObj = COA
          		renderObj {
          			if.value = 2 
          			if.isLessThan.data = register:FILE_NUM_CURRENT
          			if.negate = 1
          			4 = TEXT
          			4.wrap = <li data-target="#carousel-slider" data-slide-to="|" class="active"></li>|*|<li data-target="#carousel-slider" data-slide-to="|"></li>
          			4.value = {register:FILE_NUM_CURRENT}
          			4.insertData = 1
          		}
          	}
          	#Hier nochmal das gleiche Spiel nur das ich diesmal auch die Bilder tatsächlich ausgebe
          	10 = FILES
          	10{
          		stdWrap.wrap = <div class="carousel-inner">|</div>
          		references{
          			data = levelmedia:-1, slide
          			treatIdAsReference = 1
          		}
          		renderObj = COA
          		renderObj {
          			if.value = 2 
          			if.isLessThan.data = register:FILE_NUM_CURRENT
          			if.negate = 1
          			wrap = <div class="item active">|</div>|*|<div class="item">|</div>
          			4 = IMAGE
          			4{
          				stdWrap.wrap = |
          				stdWrap.required = 1
          				file.import.data = file:current:originalUid
          				# hier croppe ich mir die Bilder nochmal zurecht und habe mir dafür 2 Konstanten erstellt
          				#file.width = c
          				#file.height = c
          				# Setze den Link der im Bild eingestellt ist.
          				stdWrap.typolink.parameter.data = file:current:link
          			}
          			# Hier gebe ich den Titel und die Beschreibung für das Bild aus. Das Ganze muss dann noch per CSS nach Wünschen gestylt werden.
          			10 = COA
          			10{
          				wrap = <div class="carousel-caption">|</div>
          				stdWrap.required = 1
          				stdWrap.typolink.parameter.data = file:current:link
          				4 = TEXT
          				4{
          					wrap = <h3>|</h3>
          					data = file:current:title
          				}
          				8 = TEXT
          				8{
          					wrap = <p>|</p>
          					data = file:current:description
          				}
          			}
          		}
          	}
          }
          

          Klappt bei mir in einem 7er System.

      • Hey Oliver vielen vielen Dank, habe es jetzt mit assets versucht und nicht mehr als Ressourcen eines Contents eingefügt sondern in einen der untergeordneten Bereiche des Contents als Media hinterlegt und dann klappt es auch mit dem Zugriff. Nur als Frage am Rande für mich zum Verständnis auf die Ressorcen eines anderen Contents kann man nicht mit tt_content zugreifen?

        • Hmm irgendwie stehe ich auf dem Schlauch, mir ist gerade kein Content Element ( Text & Media usw.) bekannt wo man Ressourcen hinterlegen kann. Das hat nur die Seite (Seiteneigenschaften) so weit mir bekannt ist. Was meinst du mit Zugriff auf die Ressourcen( du meinst wahrscheinlich Media) von einem anderen CE(Content Element)? Das es so funktioniert wie mit der Seite? Also das er dann ein anderes Element als Fallback nimmt?

          Ich greife ja mit dem cObject FILES auf die Media Inhalte zu. Dort sage ich dann das er in der Tabelle tt_content schauen soll und das Feld (in Fluid styled content)assets(media Tab) bzw. image(bilder Tab) (CSS styled contet) auflösen soll. Dann werden die gelieferten Daten über das renderObj gerendert .(https://docs.typo3.org/typo3cms/TyposcriptReference/7.6/ContentObjects/Files/)

          • Ich hatte bisher die Bilder der Seite zugeordnet unter dem Reiter Ressourcen. Diese Ressouren nutze ich auch zur Darstellung von Hintergrundbildern. Dem Content kann man keine Ressourcen zuweißen in dem Falle geht nur Media da hast du vollkommen Recht. Wahrscheinlich habe ich mich ungünstig ausgedrückt.

            Wie sieht es denn aus wenn man unterschiedliche Slider auf verschiedenen Seiten haben möchte. Muss ich dann das Script mehrfach hinterlegen und anpassen oder gibt es für solche Fälle eine geschicktere Lösung.

          • Da gibt es wie so oft viele verschiedene Möglichkeiten. Du könntest auf einer Seite die ganzen CE hinterlegen mit den Bilder und dann auf den verschiedenen Seiten einfach nur die UID ändern/überschreiben in einem entsprechenden typoscript Erweiterungs-Template. Ist wie ich finde nicht sehr elegant. Das nette an dem orignal Script ist ja das er wenn er keinen Inhalt findet die Rootline nach oben durchsucht, so kann man praktisch eine komplette Seite mit einem Slider ausstatten und dort wo man was spezielles haben will, einfach Bilder reinladen und schon wird auf der Seite die entsprechenden Bilder angezeigt.
            Ich persönlich bevorzuge, gerade in Projekten die von Kunden selbst gepflegt werden, Mask. Das ist eine Extension, mit der man sich sehr schnell ein eigenes Inhaltselement machen kann. Dort kann man dann sehr einfach und verständlich Bilder hinterlegen. Das Rendering von dem Mask Element läuft wieder über Fluid, hier kannst du also die von deinem JS erwünschte Struktur schaffen. Dann braucht man nur noch das Slider JS mit einzubinden und Fertig. Ich gebe dem Slider dann immer eine eine eigene colPos im Backendlayout, damit ich das dann einfach in den Fluid Templates rendern kann und für den Redakteur leicht zu verstehen ist.
            Zu guter Letzt würde es auch eine einfache Extbase Extension tun. 🙂

  • Also um das jetzt nicht unnötig in die Länge zu ziehen, es funktioniert ja. Ich glaube auf meine Letzte Frage musst du nicht mehr eingehen da sich das von selbst erklärt wenn man die Grafiken in den Seiteneigenschaften hinterlegt hat. Ich habe nochmal oben dein Script eingebunden welches den Slider erst ab dem 3. Bild füllt. Kurioser Weise sehe ich zwar die Navigation der Bilder (also die punkte die mittig drunter sind mit der richtigen Anzahl, aber die Bilder selbst nicht. Gibt es da ebenfalls einen Unterschied zu beachten wenn man mit Fluid arbeitet?

    • Da war noch ein kleiner Fehler drin, habe es oben nochmal angepasst, das sollte aber nicht das Problem gewesen sein. Also hier funktioniert das nicht angepasste, wie auch das angepasste, Script in einem 7.6.11 System. Das du das ganze im Fluid renderst sollte keinen Einfluss haben

      • Komisch ist es schon habe nochmal geschaut ich nutze version 7.6.9. Teilweise funktioniert es ja, beim Anlegen der Navigation aber warum in diesem Fall die Bilder nicht angezeigt werden entzieht sich meinem Verständniss somal es ja funktioniert wenn man nicht erst ab Bild 3 startet. Ich danke dir trotzdem für deine Mühen und Geduld mit mir 🙂

      • Also im CSS wird angezeigt das die Bilder alle übergeben werden nur sind alle Slider Bilder mit der classe „item“ versehen, soweit ich das verstehe benötigt mindestens ein Bild die classe „item active“ um angezeigt zu werden. Wieso diese Funktion bei mir auser Kraft ist, wenn ich erst ab Bild 3 den Slider befülle, entzieht sich mir.

        • Das liegt daran das der optionSplit nicht mehr funktioniert.

          wrap  = <div class="item active">|</div>|*|<div class="item">|</div>
          

          Versuche mal das

          lib.slider = COA
          lib.slider {
              wrap = <div id="carousel-slider" class="carousel slide" data-ride="carousel">|</div>
              #Hier hole bzw. zähle ich die Bilder aus den Seiteneigeschaften(Ressourcen/Media) um die Navigation zu erstellen.
              5 = FILES
              5.stdWrap.wrap = <ol class="carousel-indicators">|</ol>
              5 {
                  references {
                      data = levelmedia:-1, slide
                      treatIdAsReference = 1
                  }
                  renderObj = COA
                  renderObj {
                      #Anzahl der zu überspringenden Bilder
                      if.value = 2
                      if.isLessThan.data = register:FILE_NUM_CURRENT
                      if.negate = 1
                      4 = TEXT
                      4 {
                          wrap = <li data-target="#carousel-slider" data-slide-to="|"></li>
                          wrap.override = <li data-target="#carousel-slider" data-slide-to="|" class="active">
                          wrap.override.if {
                              equals.data = register:FILE_NUM_CURRENT
                              #Anzahl der zu überspringenden Bilder
                              value = 2
                          }
          
                          stdWrap.cObject = TEXT
                          stdWrap.cObject {
                              current = 1
                              setCurrent.data = register:FILE_NUM_CURRENT
                              #Anzahl der zu überspringenden Bilder
                              setCurrent.wrap = | - 2
                              prioriCalc = 1
                          }
                      }
                  }
              }
          
              #Hier nochmal das gleiche Spiel nur das ich diesmal auch die Bilder tatsächlich ausgebe
              10 = FILES
              10 {
                  stdWrap.wrap = <div class="carousel-inner">|</div>
                  references {
                      data = levelmedia:-1, slide
                      treatIdAsReference = 1
                  }
          
                  renderObj = COA
                  renderObj {
                      #Anzahl der zu überspringenden Bilder
                      if.value = 2
                      if.isLessThan.data = register:FILE_NUM_CURRENT
                      if.negate = 1
                      wrap = <div class="item">|</div>
                      wrap.override = <div class="item active">|</div>
                      wrap.override.if {
                          equals.data = register:FILE_NUM_CURRENT
                          #Anzahl der zu überspringenden Bilder
                          value = 2
                      }
          
                      4 = IMAGE
                      4 {
                          stdWrap.wrap = |
                          stdWrap.required = 1
                          file.import.data = file:current:originalUid
                          # hier croppe ich mir die Bilder nochmal zurecht und habe mir dafür 2 Konstanten erstellt
                          #file.width = c
                          #file.height = c
                          # Setze den Link der im Bild eingestellt ist.
                          stdWrap.typolink.parameter.data = file:current:link
                      }
          
                      # Hier gebe ich den Titel und die Beschreibung für das Bild aus. Das Ganze muss dann noch per CSS nach Wünschen gestylt werden.
                      10 = COA
                      10 {
                          wrap = <div class="carousel-caption">|</div>
                          stdWrap.required = 1
                          stdWrap.typolink.parameter.data = file:current:link
                          4 = TEXT
                          4 {
                              wrap = <h3>|</h3>
                              data = file:current:title
                          }
                          8 = TEXT
                          8 {
                              wrap = <p>|</p>
                              data = file:current:description
                          }
                      }
                  }
              }
          }
          
          • Super Danke das war des Problem. Jetzt läuft alles Super. Vielen vielen Dank nochmal für deine Unterstützung 😉

          • Gerne doch :), viel Spaß damit. (TYPO3 – Inspiring People To Share)

  • Hallo,

    mir ist nicht klar, wo/wie das Javascript initialisiert wird.

    //aktiviere den Bootstrap Slider
    $(‚.carousel‘).carousel();

    • Nach dem du entweder das Carousel JS via Bootstrap beziehst oder wie oben beschrieben das Standalone eingebunden hast, musst du es noch initialisieren mit $(‚.carousel‘).carousel(); . Das muss allerdings nach dem einbinden von Bootstrap(mi Carousel) oder dem Standalone erfolgen damit es keine JS Fehler gibt.

  • guten Morgen Oli,
    nach langer Suche habe diese Seite gefunden. Hier ist auch mal alles gut beschrieben. Nun meine Frage!!! Wie kann ich den Slider an die Kasse .jumbotron übergeben so das der Slider nur in diesem ausgegeben wird. Danke für deine Hilfe im Voraus!!!!
    Noch einige Infos:
    Typo3 Version ist 8.7.4
    die Seite wo es eingebunden werden soll https://frank-balzer.eu

    • Um das ganze in einem Div ausgeben zu lassen mit der Klasse jumbotron musst du nur im wrap ein weiteres DIV hinzufügen:

      lib.slider{ 
        wrap = <div class="jumbotron>"<div id="carousel-slider" class="carousel slide" data-ride="carousel">|</div></div>
        ...
      }
      

      Allerdings weiß ich nicht ob Bootstrap da ggf. irgendwelche Probleme mit hat(irgendwelche spezial css einstellung für das jumbotron z.B. mit dem das JS dann nicht klar kommt) das Carousel innerhalb von einem jumbotron zu initialisieren.

  • Hallo Oliver,

    gibt es die Möglichkeit auch statt ein Bild ein Video hochzuladen bzw. beides zu verwenden? Ich finde nur Anleitungen für Bilder.

    Viele Grüße
    Julian

    • Hallo Julian,
      es würde wahrscheinlich auch mit Videos gehen allerdings ist das ganze dann etwas kompliziert über Typoscript. Würde da eher auf eine Extension zurückgreifen oder wenn nicht vorhanden fix eine selber schreiben. Dort hast du mehr Freiheiten, kannst einen Slider deiner Wahl wählen und kannst direkt im Fluid arbeiten.

  • Hallo,
    wie binde ich den Slider ein? Über ein cObject ein?
    wo gebe ich dann denn Text für die Sliderobjecte ein? Über den RTE-Editor?
    Kann ich dort auch mehrere Bilder einbinden?
    noch eine Frage? Wie sollte das Backendlayout aussehen, an dem ich den Slider einbinde bzw. Übergebe?
    Ich muss den Slider ja im Backend auch ansprechen und befüllen können.

    Danke für Eure Hilfe!

    • Hallo Didi,
      den Slider den du hier siehst, ist dafür konzipiert sich die Daten aus den Seiteneigeschaften zu holen. Dort könntest du den Bild Untertitel bzw. Beschreibung als Textfelder missbrauchen ;). Eingebunden wird das ganze als „lib“, wir verwenden eigentlich nur noch Fluid Seitentempaltes und hier kann es einfach mit einem Viewhelper

      <f:cObject typoscriptObjectPath="lib.slider" />
      

      gerendert werden. Die Position kannst du in dem Fall ja dann selber bestimmen, ein besonderes Backendlayout würdest du dafür nicht brauchen.

  • Hallo Oliver,

    danke mal vorab, ich hab mal versucht den Bereich des Sliders als Partial auszulagern
    und dort mit dem Viewhelper einzubinden, hab aber im Backend Layout ein eigenes Eingabefeld dafür definiert gehabt. Wahrscheinlich war das so falsch.

    Ich versuchs nochmal bei den Seiteneigenschaften, wie du mir beschriben hast.

    Danke

  • Hallo Oliver,

    ich weiss nicht aber irgendwie scheint das nicht so wie es soll?
    Die Bilder kommen alle zugleich und untereinander.
    Dann der Text wird nur beim letzen Bild ausgeeben und alles übereinander.
    Und der Text wird nur blau, besteht die Möglichkeit,
    einer Css Definition dem ganzen mitzugeben?

    • Hast du den die carousel JS eingebunden? Ohne die sieht das ganze natürlich mau aus. Du kannst das ganze natürlich einfach über deine CSS Dateien beeinflussen die du ja so oder so irgendwo im TYPO3 System einbindest.
      Dieser Teil ist für die Ausgabe der Datei Daten als verantwortlich:

        # Hier gebe ich den Titel und die Beschreibung für das Bild aus. Das Ganze muss dann noch per CSS nach Wünschen gestylt werden.
                  10 = COA
                  10 {
                      wrap = <div class="carousel-caption">|</div>
                      stdWrap.required = 1
                      stdWrap.typolink.parameter.data = file:current:link
                      4 = TEXT
                      4 {
                          wrap = <h3>|</h3>
                          data = file:current:title
                      }
                      8 = TEXT
                      8 {
                          wrap = <p>|</p>
                          data = file:current:description
                      }
                  }
      

      hier kannst du natürlich CSS klassen mitgeben die du dann wieder Stylen kannst.

  • Hallo Oliver,

    diese habe ich in carusel.js ausgelagert und in der page.t3s eingebunden.
    Oder ist es besser den js Code im HTML zu lassen.
    bootstrap.js ist auch eingebunden.


    Ist der Seitenquelltext allerdings nachwievor die werden 2 Mal ausgegeben.
    Der Text vom Slider wird nun unter dem Bild ausgegeben.
    Die Css Klassen habe ich mittlerweile eingefügt
    10 = COA
    10{
    wrap = |
    stdWrap.required = 1

    Irgendwo ist da noch der Wurm drin.

  • Sorry der Code wurde mir beim letzen Kommentar geschluckt!
    Nun hier!
    [html]

    [html]

    [ts]
    10 = COA
    10{
    wrap = |
    stdWrap.required = 1
    [ts]

  • Alles wird 2 mal gerendert? Sicher das du die lib nicht aus versehen irgendwo ein zweites mal drin hast?Was für eine TYPO3 Version ist das eigentlich? und was für ne Bootstrap Version? Das Beispiel basiert auf Bootstrap 3

  • Bootstrap 4
    Typo3 8.7.3
    weil 8.7.4 macht Probleme mit Datenbank sollte man nicht verwenden, ist mir schon passiert das während dem entwickeln die DB weg war und ich eine Neustallation durchführen musste.

    • Es könnte an Bootstrap 4 liegen, es kann sein das dort nun eine andere Datenstruktur erwartet wird. Hab das snippet noch nicht mit BS4 verwendet. Weitere Mutmaßungen kann ich leider nicht anstellen da ich das System so nicht kenne. Sonst könnte ich dir noch empfehlen eine der Zahlreichen Slider Extensions aus dem TER(https://extensions.typo3.org/) zu verwenden, damit bekommst du sicher auch einen schicken Slider hin 😉

  • Der Code dazu:

    First Slide
    This is a description for the first slide.

    Second Slide
    This is a description for the second slide.

    Third Slide
    This is a description for the third slide.

    Previous

    Next

Schreibe einen Kommentar zu Martin Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Highlighting von Codes ist mit den Tags  [ts], [php], [html], [javascript], [xml] oder [code] möglich.