Kategorien
Allgemein Webdesign

Die freie JavaScript Bibliothek jQuery

jQuery ist die am meisten verwendete JavaScript Bibliothek. Sie steht unter einer Open Source Lizenz und stellt browserübergreifende Funktionen bereit, die Programmierern Zeit und Nerven sparen. Mit wenigen Zeilen jQuery Code lassen sich eine Vielzahl von Funktionen umsetzen und teilweise hunderte, selbst geschriebener JavaScript Code ersetzen.

Alle grossen Content Management Systeme bringen die jQuery Bibliothek in ihren Core Paketen mit.

  • WordPress 4.5.2 in der Version 1.12.3,
  • Joomla 3.5.1 in der Version 1.11.3,
  • Drupal 8 in der Version 2.2.x.

Die beiden Versionsstränge jQuery 1.x und jQuery 2.x besitzen seit der Version 1.9 eine kompatible API. Die Version 1.x unterstützt den Internet Explorer 8 und wird daher immer noch gepflegt. Der Code der Version 2.x wurde „aufgeräumt“, dafür entfiel die Unterstützung für den Microsoft Internet Explorer 8. Im WordPress Paket befindet sich eine fast aktuelle Version des 1.x Zweigs, Joomla ist ein wenig hinterher. Drupal 8 setzt dagegen bereits auf die Version 2.x.

Vor ein paar Tagen ist nun die Version jQuery 3.0 erschienen. Im Blogpost jQuery 3.0 Final Released! werden die Neuigkeiten erklärt. Für Gelegenheitsprogrammierer teilweise schwer verständlich, geht es in erster Linie um Optimierung und Standardisierung. Das bezieht sich einerseits auf den alten 1.x Code, der viel Rücksicht auf Internet Explorer 6-8 nimmt, andererseits aber auch auf den 2.x Code, der nun wegen einiger Änderungen nicht mehr 100% kompatibel ist. Daher auch der Major Versionssprung auf 3.x.
Das Update einer Anwendung von Version 2.x auf 3.x soll jedoch einfach möglich sein.

Da die Neuerungen doch recht abstrakt sind, möchte ich eine mal etwas näher erläutern um das ganze jQuery Prinzip (write less, do more) besser zu verstehen.

jQuery.Deferred ist jetzt Promises/A+ und ES 2015 kompatibel

Ein wichtiges Feature in der Version 3.0 ist die Kompatibilität zu Promises/A+ und ES2015-Promises.

Ein Promise (deutsch: Versprechen) ist zunächst mal eine Programmieridee und hat mit asynchroner Programmierung zu tun. Es geht dabei um den vermutlichen Rückgabewert einer Operation. Man verspricht, dass ein bestimmter Wert kommen wird und das Prinzip ist denkbar einfach:

  1. Ein Promise-Objekt wird erzeugt
  2. Der asynchroner Programmteil wird aufgerufen
  3. Das Promise wird gehalten oder abgelehnt
  4. Man reagiert auf Erfolg oder Fehlschlag

Es gibt nun historisch zwei Methoden der Implementierung von Promises.

ES2015 Promises

Promises sind ein Feature aus ECMAScript (ECMA 262) in der Version 6 und nicht mit allen Browsern kompatibel. Die Version 6 wird ES2015 genannt, weil sie 2015 verabschiedet wurde. ECMAScript selbst ist der standardisierte Sprachkern von JavaScript. ECMA ist eine private, internationale Normungsorganisation mit Sitz in Genf, die früher so etwas wie Standards für Floppy Disk Laufwerke beschrieben hat. Seit 1994 heisst die Organisation ECMA International und hat unter anderem auch C#, .NET, U3D und Office Open XML standardisiert.

Promises/A+

Promises/A+ dagegen ist ein offener Standard und war der Vorläufer für die Implementierung von Promises in ES6. Promises/A+ konnten als Zusatzbibliothek zu ES5.1 hinzugefügt werden und unterstützen mehr Browser als ES2015.

jQuery 3.0 Promises

jQuery 3.0 bietet nun eine einheitliche Inplementierung der beiden Varianten an.
Es geht dabei um jQuery.Deferred Objekte. Als Programmierer muss man sich keine Gedanken um die verschiedenen Standards machen, sondern kann die Idee dahinter mit Hilfe von jQuery einfach nutzen!

Slim Build

Heutzutage spielt die Größe einer Bibliothek eine entscheidende Rolle. Mit der Version 3.0 gibt es jQuery nun komplett als 30 Kilobyte große Datei und es gibt einen Slim build, der auf verschiedene Funktionen verzichtet, als 23,6 Kilobyte großes Paket. Der Unterschied sieht erstmal nicht so groß aus, reduziert Ladezeiten aber erheblich.

Aufbauend auf jQuery gibt es jQuery UI und jQuery mobile, jQuery UI bietet viele Widgets, Effekte und Interaktionen, jQuery mobile hilft bei der Erstellung von responsiven Websites, die auf Smartphones, Tablets und Desktop Computer angezeigt werden sollen.

Und jQuery soll einfach sein?

Auch wenn der Artikel bisher etwas theoretisch daherkommt, so möchte ich nochmal betonen, dass jQuery das Programmiererleben vereinfacht und nicht verkompliziert ;). Vielleicht bist du ja neugierig geworden, was man mit jQuery alles machen kann und vor allem wie man es macht. Immerhin gibt es das Projekt seit 10 Jahren und es vereinfacht das Programmierleben wirklich. Daher hier ein paar Beispiele.

Alle Beispiele zeigen den Quellcode in einem Fenster und die Ausgabe in einem anderen Fenster. Du kannst den Code verändern und direkt sehen, was passiert.

w3schools - Tryit Editor
w3schools – Tryit Editor

Wenn du den Links folgst, siehst du auch gleich den Quellcode dazu:

Um so etwas lokal auf deinem Computer auszuprobieren, musst du nur den Quellcode als HTML Seite speichern und über einen Browser aufrufen. Eine deutschsprachige, ausführliche Einführung findest du hier.

Fazit

Auch wenn du nicht täglich mit JavaScript arbeitest, so hilft es doch ungemein ein paar Gehversuche mit jQuery zu unternehmen um Zusammenhänge besser verstehen zu können.

Links

Kategorien
Content Management Systeme Shared Hosting

Drupal 8 – Slideshow im Benutzerprofil

Im vierten Teil des Kunstarchivs mit Drupal 8 zeige ich, wie die Werke, die die Künstler hochladen als Slideshow dargestellt werden können.

Jeder Benutzer kann beliebig viele Werke anlegen und zu jeden Werk können mehrere Bilder hochgeladen werden. Ein Werk ist ein Inhaltstyp in Drupal und die Bilder darin ein Feld. Manchmal ist es sinnvoll, wenn es mehrere Bilder zu einem Werk gibt, beispielsweise bei Installationen, Kunstprojekten oder Skulpturen, manchmal reicht zur Beschreibung eines Werks auch nur ein Bild.

Es wäre schön, eine Slideshow der Werke im Künstlerprofil zu haben und ich werde zeigen, wie du das einrichten kannst.

Einem Feld wird in Drupal ein Format zugeordnet, das dessen Anzeige im Browser steuert. Leider ist kein Slideshow Format in der Core Distribution verfügbar und so musst du dir anders behelfen.

Als Erweiterung für das Views Modul gibt es ein Slideshow Modul (Views Slideshow). Es nutzt das Cycle Plugin für jQuery. Eine mögliche Lösung ist, die Darstellung der Bilder in einen Block auszulagern, der abhängig vom aufgerufenen Werk und Künstler, die entsprechenden Bilder anzeigt.

Der Slideshow-Block kann dann über oder unterhalb des Hauptinhalts angezeigt und mit dem Views Modul konfiguriert werden.

Installation des Moduls Views Slideshow

Du kannst Module über die Drush Konsole oder per Browser im Adminbereich installieren und aktivieren.

Drush Befehle:

drush dl views_slideshow
drush en views_slideshow

Per Browser (/admin/modules/install)

Drupal 8 - Modul installieren

Innerhalb des Views-Slideshow Pakets befinden sich zwei Module, die nach der Installation aktiviert werden müssen. Anschliessend werden folgende Informationen angezeigt (/admin/modules).

Drupal 8 - Modul aktivieren

Installation jQuery Cycle Dateien

Die JavaScript Dateien für jQuery Cycle kannst du von GitHub herunterladen (https://github.com/malsup/cycle).

jQuery Cycle - Download

Du packst das Dateipaket aus und benennst das Verzeichnis von cycle-master nach jquery.cycle um. Dann erstellst du im Drupal Root ein Verzeichnis libraries und kopierst das jquery.cycle Verzeichnis dort hinein. Die Struktur sieht dann aus wie im folgenden Screenshot.

Drupal 8 - Libraries

Damit ist die Installation beendet und du kannst einen Slideshow-Block erstellen. Als Basis benötigst du mindestens einen Inhaltstyp mit einem Bildfeld, so wie ich ihn auf seafolly.ch nutze (Kunstarchiv mit Drupal 8 – Werke).

Slideshow Block erstellen

Um den Block zu erzeugen, musst die eine neue Ansicht hinzufügen (/admin/structure/views/add). Ich benutze die folgenden Parameter.

  • Ansichtsname: Slideshow
  • Anzeigen: Inhalt
  • Typ: Werk
  • Erzeuge einen Block: Check
  • Anzeigeformat: Slideshow
  • von: Felder

Elemente pro Block: 10
Drupal 8 - Slideshow Block anlegen

Nach einem Klick auf Speichern und Bearbeiten landest du in der Bearbeitungsmaske.
Dort musst du zusätzlich zum bestehenden Feld Title, das Feld, das die Bilder enthält, zuordnen. Klicke im Bereich Felder auf den Add -Button.

Drupal 8 - Views - Feld hinzufügen

Wähle in der Auswahlmaske dein Bildfeld aus.
Drupal 8 - Views - Feld hinzufügen- Auswahl

Übernehme zunächst die Standardwerte auf der folgenden Seite und füge das Feld hinzu. Wenn du nach unten scrollst, siehst du bereits eine Vorschau innerhalb der Bearbeitungsmaske aus allen Bildern aller Werke. Die Bilder sollten bereits automatisch wechseln.

Drupal 8 - Views - Vorschau

Der Block is nun in der Struktur fertig und kann zum Testen an die gewünschte Stelle positioniert werden.

Slideshow Block pro Künstler

Im Bereich Struktur -> Blocklayout kann der eben erstellte Block an die gewünschte Stelle platziert werden.
Drupal 8 - Slideshow Block plazieren

Der Block soll nur im Künstlerprofil angezeigt werden, daher musst du Sichtbarkeit mit dem Ausdruck /user/* einschränken. Der Ausdruck bezieht sich auf dem URL des Benutzerprofils.
Drupal 8 - Slideshow Block - Sichtbarkeit

Nach dem Speichern wird der Block auf allen Profilseiten zunächst dargestellt, hat aber noch viele Fehler.

  1. Die Überschrift Slideshow muss verschwinden (oder verändert werden)
  2. Nur die Werke des ausgewählten Künstlers sollen angezeigt werden
  3. Die Bildgrösse ist momentan die Originalgrösse des hochgeladenen Bildes

Drupal 8 - Slideshow Block im Profilbereich

Die Überschrift Slideshow verschwinden lassen

Die Überschrift eines Block kann ausgeblendet werden.
Einfach im Blocklayout (/admin/structure/block/list/bootstrap) den Slideshow Block konfigurieren und die Checkbox bei Titel anzeigen entfernen.

Nur die Werke des angezeigten Künstlers sollen angezeigt werden

Hierzu muss ein Bezug zur User-ID des Künstlers in die Blockansicht aufgenommen werden. Das geht mit einem sogenannten Kontextfilter innerhalb der Ansicht. Rufe den Slideshow Block zur Bearbeitung auf (/admin/structure/views/view/slideshow) und füge im Bereich Erweiterungen als Kontextfilter das Feld Inhalt: Erstellt von hinzu.

Drupal 8 - Slideshow Block - Kontextfilter

Das Feld stellt nun einen „Kontext“ bereit, der mit dem Wert der richtigen User-ID gefüllt werden muss. Um an den Wert der User-ID zu kommen, musst du den Vorgabewert User-ID from route context wählen.

Jetzt werden bei jedem Künstler „nur noch“ die Bilder seiner Werke als Slideshow angezeigt.

Die Bildgrösse ist momentan die Originalgrösse des hochgeladenen Bildes

Hier wird es nun sehr individuell. Grundsätzlich speichert Drupal das Original des hochgeladenen Bildes und erzeugt nach Bedarf eine passende Ausgabe. Diese passende Ausgabe kann natürlich auch umfassender bearbeitet werden (Grösse, Format, Wasserzeichen, etc). Je nach Template und anzeigendem Browser werden die Bilder unterschiedlich dargestellt. In meinem Fall benutze ich das Bootstrap Theme und die Bilder werden responsiv dargestellt. Grundsätzlich bietet sich ein einheitliches Ausgabeformat an, weil die Bilder im Original sehr gross und datenintensiv sind und auch die Möglichkeit besteht, dass die Künstler Bilder in unterschiedlichen Formaten (Quadratisch, Querformat, Hochformat) hochladen. Eine „richtige“ Lösung gibt es dabei nicht, nur unterschiedliche Herangehensweisen.

Generell lässt sich das Format eines Bildes in der Views-Bearbeitungsansicht des Blocks einstellen. Rufe den Slideshow Block zur Bearbeitung auf (/admin/structure/views/view/slideshow), klicke im Bereich Felder auf das Feld Inhalt: Bild und wähle das gewünschte Format aus.

Drupal 8 - Slideshow Block - Bildformat

Zweiter Test auf der Profilseite

Als Ergebnis ist die Überschrift verschwunden, die Bilder gehören zum Künstler und die Bildgrösse ist einheitlich. Aber, wenn zu einem Werk mehrere Bilder hochgeladen wurden, zeigt die Slideshow alle Bilder (untereinander) an.
Eine Lösung dieses Problems könnte beispielsweise sein, nur das erste Bild eines Werks anzuzeigen. Rufe dazu den Slideshow Block zur Bearbeitung auf (/admin/structure/views/view/slideshow), klicke im Bereich Felder auf das Feld Inhalt: Bild und gehe in den Bereich Multiple Field Settings.
Wähle im Optionsfeld Zeige n Werte eine 1 aus.

Drupal 8 - Slideshow Block - Nur das erste Bild

Bei der Gelegenheit kannst du auch gleich Bild verlinken mit Inhalt auswählen. Wenn dann jemand auf das Bild klickt, landet er auf der Detailseite des Werks.

Slideshow Parameter

Nachdem die Slideshow nun prinzipiell funktioniert, kannst du noch Parameter für die Anzeige setzen, beispielsweise einen anderen Überblendungseffekt. Rufe dazu den Slideshow Block zur Bearbeitung auf (/admin/structure/views/view/slideshow), klicke im Bereich Format auf das Feld Einstellungen (neben Slideshow).

Der Block im Profilbereich funktioniert nun wie gewünscht.

Fazit

Es ist erstaunlich, wie komplex die Anforderungen für ein „einfache“ Slideshow sind und es ist gleichermaßend faszinierend, wie so etwas über eine Browser Oberfläche in Drupal 8 konfiguriert werden kann.

Links


tl;dr: Ich zeige, wie du eine Slideshow in Drupal 8 erstellst