Responsive TYPO3 (4): Die FlexSlider-Extension
Allgemeines zum FlexSlider
Mittlerweile erfreuen sich Slider auf Webseiten sehr großer Beliebtheit, allerdings haben vielen einen kleinen Nachteil: Sie sind oft nicht auf Responsive Webdesign 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.
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.
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.
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.
Azubi-Projekt: Responsive TYPO3 Template
Realisiert wurde die Responsive TYPO3 Vorlage von den Auszubildenden in der Mediengestaltung, die sich intensiv mit HTML5 und Responsive Webdesign in TYPO3 beschäftigt haben. Wir freuen uns über Euer Feedback und Eure Anregungen!
Kommentare
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?
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.
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.
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
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
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?
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?
Hat perfekt funktioniert. Vielen Dank!
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.
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
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?
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!?
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
und wo wir grad dabei sind..der Link funzt auch niet mehr:
Gruss Mischa
Hallo,
der Link zum Manuell auf TYPO.org funktioniert leider nicht. Kommt ein 404er.
Gruss Mischa
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
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
Hi Marc,
mit flexslider-Version 1.4.1 klappts :-D
Beste Grüße,
Olaf
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.
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
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.
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
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
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
Hallo Falk,
in den Einstellungen des Plugins kannst du die Größe der Bilder festlegen.
Viele Grüße Philipp
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.
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.
@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.
@ Andy Hausmann:
Wird dieser dann auch standardmäßig responsive sein – oder benötigt man in der neuen Version immer noch den hier vorgestellten Workaround? :)
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.