Responsive TYPO3 (4): Die FlexSlider-Extension

|
Mitarbeiter sitzen mit Laptops im Schulungsraum. Der Schulungsleiter hilft einer Mitarbeiterin

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.

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.

typo3 flexslider extension
Einstellungsmöglichkeiten des Plug-Ins "FlexSlider"

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
Klick auf Liste, dann "Flexslider" in dem Seitenbaum und zuletzt "Flex Slider" bei "Neuer Datensatz"

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!

Ähnliche Artikel:

Webentwicklung

Lieber mit Agentur: TYPO3 Upgrade oder Relaunch?

Wer TYPO3 nicht regelmäßig aktualisiert, tut sich keinen Gefallen. Erfahrt hier, warum Agenturen bei großen Versionssprüngen unterstützen sollten.

Webentwicklung

TYPO3 12 LTS – die wichtigsten neuen Features

Du fragst dich, ob du ein Update auf die neue TYPO3 12 LTS machen sollst? Im Blog geben TYPO3 CTO Frank Nägler und wir dir gute Gründe dafür!

Webentwicklung

Image Cropping in TYPO3 – der beste Bildausschnitt

Responsive wird noch einfacher, wenn ihr die Image Crop Funktion in TYPO3 nutzt. So klappt es immer mit dem passenden Bildausschnitt.

Kommentare

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
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
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
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
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
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
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
Philippe am

Hat perfekt funktioniert. Vielen Dank!

Antworten
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
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
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
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
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
Mischa am

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

Gruss Mischa

Antworten
Mischa am

Hallo,

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

Gruss Mischa

Antworten
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
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
Olaf am

Hi Marc,

mit flexslider-Version 1.4.1 klappts :-D

Beste Grüße,

Olaf

Antworten
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
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
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
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
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
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
Philipp Stranghöner am

Hallo Falk,

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

Viele Grüße Philipp

Antworten
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
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
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
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
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