Responsive TYPO3 (4): Die FlexSlider-Extension

Responsive TYPO3 (4): Die FlexSlider-Extension

Ihr wartet bestimmt schon auf den nächsten Teil unserer Blog-Reihe zu der Responsive TYPO3 Vorlage? :-) Im vierten Teil möchten wir Euch erklären, wie wir den Flexslider als TYPO3-Extension in die Vorlage eingebunden haben.

  1. Allgemeines zum FlexSlider
  2. Konfiguration
  3. Datensätze anlegen
  4. Layout ändern
  5. Nächster Artikel unserer Serie
  6. Bisherige Beiträge der Responsive TYPO3 Reihe

Allgemeines zum FlexSlider

Mittlerweile erfreuen sich Slider auf Webseiten sehr großer Beliebtheit, allerdings haben vielen einen kleinen Nachteil: Sie sind oft nicht auf ResponsiveWebdesign ausgelegt. Dort kommt dann bei TYPO3 die Erweiterung FlexSlider ins Spiel, dieser passt sich automatisch an die Bildschirmauflösung des Nutzers an. Außerdem unterstützt der FlexSlider die sogenannten Touch-Gesten für Smartphones oder Tablets, damit ist es möglich ist, mit nur einem Fingerwisch zwischen den Bildern hin und her zu wechseln. Unterstützt werden die mobilen Betriebssysteme iOS und Android.

typo3 schulungen

Konfiguration

Nach der Installation der Extension über das Repository, kann diese sofort auf jeder Seite verwendet werden. Um den Slider auf der gewünschten Seite einzubinden, besucht Ihr die jeweilige Seite im TYPO3-Backend. Dann wählt Ihr die gewünschte Spalte und erstellt einen neuen Datensatz als Plugin „Flexslider“. Dieser kann dann über die Tabs Einstellungen, Slideshow, Animation und Bilder konfiguriert werden. Wobei der Tab „Bilder“ zu vernachlässigen ist, da sonst keine Responsive Ausgabe des Sliders mehr möglich ist. Im nächsten Schritt muss dem Plugin noch vorgegeben werden, wo die Bilder gespeichert sind. Im Tab „Verhalten“ muss die zuvor angelegte Datensatzsammlung angegeben werden. Danach ist das Plugin fertig konfiguriert.

typo3 flexslider extension

Datensätze anlegen

Damit die Bilder im Frontend angezeigt werden, müssen diese noch in der Datensatzsammlung gespeichert werden. Dazu klickt man auf Liste > Flexslider (Name der Datensatzsammlung ) > Neuen Datensatz erstellen > Flex Slider. Dort wird das Bild hochgeladen. Außerdem können noch weitere Informationen zum Bild angegeben werden.

flexslider datensätze anlegen

Layout ändern

Der FlexSlider wird mit einem Standard Theme ausgeliefert, allerdings kann dieser auch den individuellen Bedürfnissen angepasst werden. Hierfür ist es nötig die CSS-, Javascript– und Bilddateien zu verändern.

Nächster Artikel unserer Serie

Ich hoffe, ich konnte Euch einen kleinen Einblick in die Konfiguration des FlexSliders geben. In nächsten Artikel werden wir Euch die restlichen Extensions vorstellen, welche wir in unserer Vorlage eingesetzt haben.

Bisherige Beiträge der Responsive TYPO3 Reihe

Responsive TYPO3 (3): Backend-Layouts und Grid Elements

Responsive TYPO3 (2): Aufbau des Designs

Responsive TYPO3 (1): Die Mittwald Vorlage

Kommentare

  1. Gravatar
    Kobi am

    Ich hab gerade das Problem, dass ich den Subheader eines Flexslider-Datensatzes um nen RTE erweitert hab (mit der vorhandenen Funktion im Extensionmanager.

    In der Datenbank wird aber kein Tag gespeichert obwohl es im RTE angezeigt wird. Auch wenn ich den Datensatz erneut öffne, ist im RTE / SourceView ein Tag zu sehen aber in der Datenbank und im Frontend fehlt es. Jemand ne Ahnung in welche Richtung ich suchen muss?

    Antworten
  2. Gravatar
    Bernd am

    In 7.6.2 funktioniert der Newsslider zwar, allerdings verschwindet das Backend auf der Seite, in der das Plugin eingefügt ist, wenn man sich auf der Seitenansicht befindet. Die Listenansicht hingegen funzt. Ist allerdings umständlich, da man die Elemente nicht mehr richtig zuordnen kann.

    Antworten
  3. Gravatar
    Mischa am

    Hallo,

    ich sehe grad mein letzter Kommentar wurde nicht veröffentlich. Ich hatte geschrieben das ich festgestellt habe das der flexslider 1.5.3 nicht mit TYPO3 Version 7.5 kompatibel ist. Bis 7.2 hat’s noch funktioniert, aber nach dem Update auf 7.5 nicht mehr. Die Nutzung des Backend bereit dann Probleme. Nach der Deinstallation vom Slider geht wieder alles normal.

    Antworten
  4. Gravatar
    Tarik Boz am

    Hallo!

    Danke für die übersichtliche Anleitung, ich habe Flexslider installiert und nach der obigen Beschreibung angewendet, leider habe ich in der Ausgabe alle Bilder untereinander stehen, wie kan so etwas sein?

    Für ne Antwort wäre ich sehr dankbar.

    Gruß

    Tarik

    Antworten
  5. Gravatar
    Uwe am

    Kann ich den Flexslider auch direkt an einem marker ausgeben wie früher z.b jf_headerslider?
    Hab ein etwas älteres Templ und wollte ihn da einsetzen.
    Danke für ne Antwort

    Antworten
  6. Gravatar
    Alex am

    Gibt es denn eine Möglichkeit, die Reihenfolge der Slides zu bestimmen? Der bisher einzige Weg, den ich entdeckt habe ist, dass die Slides anhand der Dateinamen alphabetisch sortiert werden. Aber geht das auch backendseitig oder via TypoScript?

    Antworten
  7. Gravatar
    Kurt Kunig am

    Wäre ja schön gewesen, wenn man hier auf die Fragen eine Antwort bekommen hätte.

    Wie geht das denn nun mit einer Fremdsprache? Weiß das niemand?

    Antworten
  8. Gravatar
    Philippe am

    Hat perfekt funktioniert. Vielen Dank!

    Antworten
  9. Gravatar
    Manuel am

    Ich habe auch das introduction-package der Typo3 Version 6.2 im Einsatz und hatte das gleiche Problem wie Philippe und Martin.

    Bei mir führte die Ergänzung von „height: auto;“ zum css-Wert „.flexslider .slides img“ zum Erfolg.
    Ich habe den gesamten css-Eintrag in meine custom.css importiert die im Typoscript-Setup über „theme3 = {$page.includePath.css}custom.css“ implementiert ist.
    Also kurz: „.flexslider .slides img { width: 100%; display: block; height: auto;} in die eigene css Datei, dann sollte es klappen.

    Ob das die finale Lösung ist kann ich nicht sagen, aber für meine zwei Slider funkioniert es.

    Antworten
  10. Gravatar
    Philippe am

    Hallo zusammen. Ich habe das gleich Problem wie Martin weiter unten schon beschrieben hat. Die Skalierung der Bilder funktioniert bei mir nur in der Breite. Was kann ich tun? Vielen Dank. Grüsse Philippe

    Antworten
  11. Gravatar
    Roland am

    Hallo, ich benutze das Bootstrap Framework und möchte den Flexslider einbauen. Wenn ich eine Seite ohne Slider aufrufe wird die Mobilnavi richtig angezeigt, wenn ein Slider auch auf der Seite vorkommt habe ich einen JQuery conflict.
    Ich binde JQuery manuell über google ein (auf jeder Seite:
    https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

    Kann ich im Flexslider das JQuery ausschalten?

    Antworten
  12. Gravatar
    Kurt Kunig am

    Leider klappt das Ganze nicht bei ein weiteren Sprache!? Lege unter der Fremdsprache ein neues Bildobj. an, wird es unter Sprache „Standard“ abgespeichert. Gehe ich über Liste und editiere ein Bild aus der Standradspr., und speichere es unter Fremdspr. (NEU) ab, dann steht es mit der Sprache in der Liste. Angzeigt im FE wird aber in der zeitl. Abfolge ALLES, nur, dass eben kein Bild (sondern leer) angezeigt wird!?
    Irgendetwas muss da faul sein, glaub ich!?

    Antworten
  13. Gravatar
    Manfred Rutschmann am

    Hallo,
    nachdem unsere Slider Extension nun lange ohne große öffentliche Info rumgedümpelt ist, haben wir es geschafft endlich eine Plattform dafür einzurichten. Würde mich freuen wenn diese neue Extension erwähnt werden könnte :-)

    Danke & Liebe Grüße

    Antworten
  14. Gravatar
    Mischa am

    und wo wir grad dabei sind..der Link funzt auch niet mehr:

    Gruss Mischa

    Antworten
  15. Gravatar
    Mischa am

    Hallo,

    der Link zum Manuell auf TYPO.org funktioniert leider nicht. Kommt ein 404er.

    Gruss Mischa

    Antworten
  16. Gravatar
    Martin am

    Hallo

    erstens eine tolle Erklärung und einfach Installation den toll. Ich bin begeistert, einzig das Problem, das bei mir nun auftritt ist, das Responsive bei mir nur in der breite funktioniert ;(

    Es sollte sich ja der ganze Slider in breite und höhe skalieren, bei mir leider nur in der breit, d.h. meine Bilder werden zusammen geschoben und somit verzerrt.

    Woran könnte das denn liegen?

    Ich habe keine fixen Bildwerte eingetragen.
    Mach ich da was falsch?

    glg Martin

    Antworten
  17. Gravatar
    Tobias am

    Hallo zusammen,
    ich bin relativ schnell auf das Plugin gestoßen, es sieht auch sehr vielversprechend aus, nur haben ich folgendes Problem:
    Ich möchte das Plugin, welches ich natürlich vorher installiert habe, nun via Templavoila in einen als content Element gemappten Div einfügen. Funktioniert soweit ganz gut. Das Problem ist jetzt nur: Es wird mir zwar der Titel des Plugins angezeigt, aber es ist kein Plugin da.
    Siehe: matchless-jugend.de
    Dort wo nun „headerlfex“ steht, sollte normal das Plugin folgen, aber außer diesem Text, ist dort nichts. Ich bitte um schnelle Hilfe!

    Lg

    Tobi

    Antworten
  18. Gravatar
    Olaf am

    Hi Marc,

    mit flexslider-Version 1.4.1 klappts :-D

    Beste Grüße,

    Olaf

    Antworten
  19. Gravatar
    Nikodemus am

    Ich hab folgendes Problem, das bei mir die Bilder nicht angezeigt werden.

    Typo3 version 6.08

    Wie in den Tutorial alles eingerichtet, wenn ich aber auf der Seite das Extension laufen lassen will kommen keine Bilder.

    In wieweit das mit Jquery zusammenliegt kann ich nicht sagen aber die
    Jquery-Min hab ich nur 1x drin, zumindest mit den Namen.

    Andere Jquerys hab ich drin aber die sind anders benannt und von anderen Extension.

    Antworten
  20. Gravatar
    Marc am

    Hier ein Fehler, sobald das erste Slide eingetragen wurde:
    The argument „arguments“ was registered with type „array“, but is of type „NULL“ in view helper „Tx_Fluid_ViewHelpers_RenderViewHelper“

    Ideen?

    Und: Das Anlegen der Slide-Records hat endliche viele Nachteile. Es dauert sehr lange, gerade bei imfangreichen Slidern (eine einfach PFadangabe oder ein Multi-Select wäre um Längen besser), zudem kann man so nur einen Slider pro Seite installieren.. Ist da ein Update in Sicht?

    Marc

    Antworten
  21. Gravatar
    Markus Miederer am

    Hallo,
    super Extension, ich habe aber das Problem das HTML Tags in der Description im Frontend direkt ausgegeben werden. Sprich diese werden nicht gerendert, hatte das Problem schon jemand? Im RTE Setup sind die Tags erlaubt

    Wenn jemand eine Lösung hätte wäre ich sehr dankbar.

    Antworten
  22. Gravatar
    Jorge am

    Flexslider Plugin samt setup und Konstanten installiert, aber wie füge ich die Bilder ein und in welchen Ordner sollen die Bilder sprich wo lege ich die Verknüfung fest?- Danke für Hilfe und Grüsse aus Berlin

    Antworten
    1. James David Wiebe am

      Hallo Jorge,

      Unter dem Punkt Datensätze anlegen diesen Artikels dürftest du die Antwort auf deine Frage finden. Sollte es wie dort beschrieben dennoch nicht funktionieren muss bei der Installation oder Konfiguration etwas schief gelaufen sein.

      Falls weiterhin Fragen bestehen, melde dich gerne wieder.

      Viele Grüße James David

      Antworten
  23. Gravatar
    Albrecht am

    Hallo Andy,

    ich benutze deinen Flexslider für ein Projekt. Funktioniert super. Ich bekomme es nur nicht hin, den flexslider zusammen mit einer Diashow laufen zu lassen. Ich benutze die perfeclightbox. Hast du da Alternativen oder Tipps?

    MfG
    Albrecht

    Antworten
  24. Philipp Stranghöner am

    Hallo Falk,

    in den Einstellungen des Plugins kannst du die Größe der Bilder festlegen.

    Viele Grüße Philipp

    Antworten
  25. Gravatar
    Falk am

    hat sich. Habs allein hinbekommen. Hab die JS, CSS und PNG files alle im fileadmin ordner gespeichert und im TS Template ruf ich die entsprechenden files auf. Allerdings passt er die Bilder nicht an die Größe des div an. das bekomme ich nicht hin irgendwie.

    Antworten
  26. Gravatar
    Falk am

    ich baue hier einen slider ein, bzw habe es vor. Warum bekomme ich eine jQuery fehlermeldung a la $(window).load(function() is not defined ? Wie kann ich sicherstellen dass die notwendigen bibliotheken geladen werden? bin leider in JS nicht wirklich versiert.

    Wäre für hilfe dankbar.

    Antworten
  27. Gravatar
    Andy Hausmann am

    @Jan Greth:

    Sorry, jetzt erst gelesen.

    Der FlexSlider ist von Hause aus (und auch in der Extension) vollständig responsive. Dazu ist auch kein Workaround notwendig – vielleicht missverstehe ich dich aber auch nur.

    Das einzige, was vielleicht nachdenklich macht, ist das Plugin-Tab für Bilder. Das habe ich auf Wunsch zu experimentellen Zwecken mit dazu genommen, damit Cropping und maximale Höhen und Breiten genutzt werden können. Eben „experimentell“. Die Implementierung funktioniert nach einigem Feedback tadellos.

    Speziell was Bild-Inhalte betrifft, nutzt man im Responsive-Context gerne folgende CSS-Direktive:

    tag.selector-x.selector-y img { width: 100%, height: auto; }

    Selbst wenn also nun Bild-Dimensionen im Plugin angegeben sind, ist die Responsive-Darstellung nicht negativ beeinträchtigt. Es sei denn, die Dimensionen berücksichtigen bspw. keine Auflösungen für Large Desktops, wenn jedoch das Screendesign dies vorsieht. Beispiel: 1140px, etc.

    Der FlexSlider wird aktuell um einige Dinge erweitert, die längst erwartete Features und Bugfixes darstellen.

    So wird es in der Version 1.3 auch nicht mehr notwendig sein, den Record Storage im Plugin zu definieren, sollten sich die Datensätze auf der selben Seite befinden.

    Antworten
  28. Gravatar
    Jan Greth am

    @ Andy Hausmann:
    Wird dieser dann auch standardmäßig responsive sein – oder benötigt man in der neuen Version immer noch den hier vorgestellten Workaround? :)

    Antworten
  29. Gravatar
    Andy Hausmann am

    Der FlexSlider wird aktuell via Github gehostet. Da ich noch keine Zeit für eine Dokumentation fand, befindet sich im Repo und im TER eine Markdown-Readme:

    Dort befinden sich ebenfalls alle Konstanten und TS-Setup Objekt-Pfade:

    Das Plugin kann vollständig customized werden; JS, CSS und Templates können selbstverständlich ausgelagert werden, ohne die Extension zu berühren.

    Das FlexSlider v2 Script migriere ich in dieser Extension jedoch aus Gründen der Kompatibilität nicht.

    Für den FlexSlider rollen wir dann in den kommenden Wochen eine neue Extension aus, die Carousels in verschiedenen Layouts, wie auch Slider und beides in Kombination erlauben.

    Bugs und Feature-Requests gerne einfach in den Github Issue-Tracker schmeißen.

    Antworten

Kommentar hinzufügen