Kategorien
Content Management Systeme seafolly.ch Webdesign

Drupal 8.5 Layout Builder

Das Open Source Content Management System Drupal hat schon immer mit sogenannten Content Construction Kits geglänzt. Für eine Website mit strukturierten Inhalten können bereits im Drupal Core beliebig viele Inhaltstypen angelegt und mit Zusatzfeldern ergänzt werden. Die Felder können aufeinander Bezug nehmen und individuell formatiert werden. Es ist also sehr einfach und elegant, beispielsweise einen Inhaltstyp Künstler, einen Inhaltstyp Werke, einen Inhaltstyp Galerien und einen Inhaltstyp Ausstellungen zu erstellen, miteinander zu verknüpfen und dann ein Kunstportal zu starten. Einen solchen prinzipiellen Aufbau benötigen fast alle größeren Websites.  Mit der neuen Drupal 8.5 Version kommt nun ein Layout Builder hinzu, der einen Schritt weiter geht.

Kategorien
Content Management Systeme seafolly.ch Shared Hosting Webdesign Wunschthema

Ein Zeitstrahl für Inhalte in Drupal 8

Für die Darstellung von Inhalten in einer zeitlichen Abfolge, beispielsweise für einen Lebenslauf, eignen sich besonders gut grafisch aufbereitete horizontale oder vertikale Zeitstrahlen und Zeitleisten (time line). In diesem Blogbeitrag möchte ich die Erstellung eines einfachen vertikalen Zeitstrahls in Drupal 8 zeigen.

Vor mehr als zwei Jahren habe ich als Beispiel für eine Drupal 8 Site die seafolly.ch Site erstellt (seafolly.ch – wir starten eine Kunstgalerie). Dort kannst du dich registrieren und deine Kunstwerke hochladen. Bisher war die Darstellung der hochgeladenen Werke ein einfache Tabelle. Diese Tabelle soll zu einem Zeitstrahl werden.

Kategorien
Content Management Systeme Soziale Netze Webdesign

Eine Community in Drupal 8 mit Open Social

Gerade weil Facebook so erfolgreich ist, versuchen nun auch immer mehr Unternehmen, Bildungseinrichtungen und NGOs ihren Zielgruppen eine Community Umgebung zu bieten, in der man näher beisammen ist und voneinander lernen kann. Die Betreiber der Community erhalten dadurch Feedback und können, wenn sie das wollen, ehrlich und transparent darauf reagieren. Im günstigsten Fall ergeben sich Synergie Effekte für alle Beteiligten. So eine „Community“ kann beispielsweise

  • ein soziales Netzwerk für eine Schule oder Universität
  • ein Firmen internes Kommunikationstool
  • oder ein soziales Netzwerk für Produkte und Services, beispielsweise für besondere Motorräder, Antiquitäten, Rezepte, Filme, Spiele und ähnliche Themen

sein.

Kategorien
Content Management Systeme Webdesign

Thunder – Ein Online Magazin out of the Box

Im Frühjahr 2016 veröffentlichte der deutsche Verlag Hubert Burda GmbH eine Drupal 8 Distribution mit dem unbescheidenen Namen Thunder. Thunder ist ein fertig konfiguriertes Online Magazin „out of the Box“ und ist 100% freie Software unter der GNU Public License. Thunder steht auf Drupal.org zum freien Download zur Verfügung.

  • Eine Channel Taxonomie (News, Events) ist bereits konfiguriert, Artikel und Events mit einigen Feldern erweitert (beispielsweise ein separates Bild für Facebook).
  • Die Inhalte werden mit dem Paragraphs Modul strukturiert (siehe auch Strukturierte Artikel mit dem Paragraphs Modul für Drupal 8). Die Veröffentlichung kann zeitgesteuert geplant werden. Meta Tags können über Variable (Tokens) pro Artikel konfiguriert werden. Viele nützliche Dinge sind vorkonfiguriert. Es gibt Paragraphs-Typen für Einzelbilder, Galerien, Instagram, Twitter, Video und natürlich Text.
  • Alles, was mit Medien zu tun hat, wird über das Modul media_entity organisiert.
  • Ein schlichtes, aber ansprechendes Theme (Infinite) mit „endlos scrollen“ bei Listen ist integriert, inklusive SASS & Compass Dateien zur Individualisierung
  • Third-Party Services können bei Bedarf aktiviert werden werden (Google Adsense, Google Analytics, Riddle, IVW, Nexx Video, Facebook Instant Articles, …) 

Die Entwicklung der Distribution geht weiter, da Burda das System für viele eigene Sites nutzt und die Verbreitung durch die freie Verfügbarkeit generell zunimmt. Im Laufe des Jahres 2016 sind bereits viele Neuerungen eingeflossen, die letzte Version, die auf Drupal.org zum Download steht, ist vom 21.12.2016.

Sichtbare Beispiele von Thunder Websites sind Mein schöner Garten, Elle,  mylife,  InStyle, Harpers Bazaar und natürlich playboy.de.

Beispiel: Mein schöner Garten
Beispiel: mein-schoener-garten.de

Die Zeitschrift Bunte hat im Oktober 2016 Drupal/Thunder in einer Headless Version eingeführt. In dieser Kombination wird Drupal/Thunder als Backend und Datenlieferant genutzt, das Frontend der Website läuft jedoch auf Amazon Web Services mit selbst geschriebenen Node.js Apps in Docker Containern. Durch diese Trennung wird eine Geschwindigkeitssteigerung beim Seitenaufbau um das Zweieinhalbfache erreicht. Websites wie Bunte haben mehr als 30 Millionen Seitenaufrufe pro Monat und da rechtfertigt Schnelligkeit jeden Aufwand.

Der Grund für diese offene Art der Software Entwicklung ist die Annahme, dass du beispielsweise ein Restaurant nicht wegen der tollen Küchengeräte besuchst sondern wegen des guten Essens und einem guten Service. Für Online Magazine gilt das ebenso. Du liest sie nicht wegen des tollen Content Management Systems das dahinter steckt, sondern wegen der Inhalte.

In der Zukunft sind für Thunder Verbesserungen der User Experience und im Bereich der Inhaltsmoderation geplant. Googles Accelerated Mobile Pages (AMP) Projekt wird unterstützt werden und eine eCommerce Anbindung soll kommen.

Die Installation der Distribution ist sehr einfach möglich. Der Quellcode kann mit dem Befehl

drush dl thunder

in das gewünschte Verzeichnis geladen und dann per Webinstaller installiert werden. Du kannst es auch online testen. Einfach auf den Link https://simplytest.me/project/thunder klicken und danach auf Launch Sandbox.

Installation Drupal Thunder
Installation Drupal Thunder

Nach der Installation kannst du sofort loslegen und Artikel schreiben (/node/add/article).

Artikel bearbeiten
Artikel bearbeiten

Durch das Paragraphs Modul kann ein Artikel aus beliebig vielen Text-, Medien- und Individualelementen (Links, Twitter, Instagram, …) bestehen.

Artikel Elemente
Artikel Elemente

Auf der responsiven Website sieht der Artikel dann sehr professionell aus. Hier als Screenshot die Listansicht der Startseite.

Artikel Übersicht
Artikel Übersicht

Fazit

Thunder ist eine professionelle Basis für ein Online Magazin und kommt als Open Source Software daher. Es kann erweitert und verändert werden und besteht zu 100% aus freien Drupal Modulen. Mehr kann man sich als Webentwickler oder Agentur nicht wünschen.

Links


tl;dr: Die Drupal Distribution Thunder bietet ein Online Magazin als Open Source Software.

Kategorien
Content Management Systeme Webdesign Wunschthema

Strukturierte Artikel mit dem Paragraphs Modul für Drupal 8

Heute mal wieder ein Wunschthema!

Ein immer wiederkehrendes Problem bei Content Management Systemen ist die Strukturierung der Inhalte. Wenn sich derjenige, der den Inhalt eingibt und pflegt, an die Erstellung eines Artikels macht, dann „muss“ alles möglich sein und mindestens so komfortabel, wie in Microsoft Word. In WordPress, Joomla und Drupal gibt es für den Artikeltext als Standard ein! Textfeld zur Eingabe des Inhalts und ein separates Feld für den Titel. Damit die Textbearbeitung komfortabel für den Bearbeiter ist, wird ein WYSIWYG Editor eingebunden, der alle gewünschten Funktionen wie  Bild-Upload, Formatierungen und vieles andere mehr beinhaltet. Der Editor erzeugt wiederum das benötigte Markup automatisch und schreibt es in das Textfeld. In diesem Textfeld befindet sich bei längeren Artikeln ein großer „HTML Klumpen“, der heutzutage natürlich auch responsive sein sollte. Spätestens bei Videos und Bildern wird das, sagen wir mal, anspruchsvoll. Eine weitere Herausforderung ist die seitenweite Anpassung oder Änderung vorhandener Artikel. Bei mehr als 500 Artikeln kann man so etwas nicht mehr manuell anpassen. Je mehr Autoren an einer Seite arbeiten, desto wichtiger wird eine Strukturierung der Texte.

An dieser Stelle setzt das Paragraphs Modul für Drupal an. Wenn ein Autor einen neuen Artikel schreibt, so kann er die entsprechenden Paragraph Typen auswählen und beliebig oft verwenden. In diesem Artikel beschreibe ich die Einrichtung und Konfiguration des Paragraphs Moduls in Drupal 8.

Installation

Die Installation von Modulen erfolgt in Drupal 8, je nach Art der Drupal Instanz, über die Kommandozeilen Tools Composer und Drush oder über die Drupal Benutzeroberfläche, also

composer require paragraphs

oder

drush dl paragraphs
drush en paragraphs

oder

Drupal 8 - Modul installieren
Drupal 8 – Modul installieren

Konfiguration

Damit man Paragraph Typen benutzen kann, müssen sie zunächst erstellt werden. Im einfachsten Fall nehmen wir mal ein Bild und einen Text. In Admin -> Struktur -> Paragraphs Type (/admin/structure/paragraphs_type) können die Typen angelegt werden.

Paragraphs Typen erstellen
Paragraphs Typen erstellen

Text Typ erstellen

Nach einem Klick auf den Add paragraph type Button wird zunächst der Name des gewünschten Typs abgefragt. Ich möchte einen Text Typ erstellen. Dies ist auch der Name, der später dem Autor des Artikels angezeigt werden wird.

Paragraphs Typ Text erstellen
Paragraphs Typ Text erstellen

Nachdem der Typ erstellt ist, muss ein Feld hinzugefügt werden. In meinem Fall natürlich ein Textfeld.

Paragraphs Typ Textfeld hinzufügen
Paragraphs Typ Textfeld hinzufügen

Drupal bietet die Möglichkeit die Anzahl der Felder festzulegen. In meinem einfachen Fall möchte ich nur ein Textfeld. Ich könnte aber auch beispielsweise drei Textfelder erlauben, die dann entsprechend gestylt werden, so dass sie in einem Slider oder in drei Spalten nebeneinander dargestellt werden könnten.

Anzahl der Textfelder im Paragraphs Typ
Anzahl der Textfelder im Paragraphs Typ

Bild Typ erstellen

Der Bild Typ wird genauso erstellt, wie der Text Typ. Als Feldinhalt muss natürlich  Bild (Image) ausgewählt werden. Die Schritte sind

  • neuen Paragraph Typ anlegen
  • in dem Typ ein Feld Bild anlegen
  • Anzahl der Bilder begrenzen auf eins
  • alt und title Text konfigurieren (nach Bedarf)
Paragraphs Typ Bild - alt und title Text
Paragraphs Typ Bild – alt und title Text

Formatierung

Im Ergebnis haben wir jetzt zwei Paragraph Typen, die jedoch noch für die Ausgabe und Eingabe formatiert werden müssen.

Paragraphs Typen
Paragraphs Typen

Als Beispiel blende ich beim Bild das Label aus und ändere die Anzeige von Originalbild auf einen vordefinierten Style (hier 480 x 480 px).

Feld Anzeige - Bild
Feld Anzeige – Bild

Strukturierten Inhaltstyp konfigurieren

Nach der Erstellung der Paragraph Typen kann ich einen neuen Inhaltstyp erstellen, in dem der spätere Autor die unterschiedlichen Paragraphen auswählen kann (/admin/structure/types). Ich nenne den Inhaltstyp Struktur, lösche das standardmäßig erzeugte Body Feld heraus und füge ein Referenzfeld auf Paragraphs hinzu. Hier ist es nun wichtig, die Anzahl der möglichen Werte auf unbegrenzt zu setzen, da der strukturierte Artikel ja beliebig viel Paragraphen enthalten soll.

Referenzfeld
Referenzfeld

Inhalt eingeben

Jetzt kann der Autor Inhalte eingeben (Content -> Inhalt hinzufügen -> Struktur oder /node/add/struktur). Das Interessante dabei ist nun, dass er einen Titel festlegt und dann den entsprechenden Paragrafen wählt. In meinem einfachen Fall ist das entweder ein Text oder ein Bild. Man könnte aber natürlich auch Videos, Slideshows und vieles andere mehr hier anbieten. Die Möglichkeit Fehler zu machen, ist für den Autor viel geringer als wenn er das Bild selbst positionieren müsste.

Inhalt eingeben
Inhalt eingeben

Anzeige für den Besucher der Website

Hier ein Beispiel Inhalt. Ich habe den Titel (strukturierter Artikel), drei Text Paragraphen und zwei Bild Paragraphen angelegt und so sieht das Ergebnis auf der Website für den Besucher aus:

Strukturierter Artikel
Strukturierter Artikel

Die Ausgabe kann durch individuelle Templates natürlich verändert werden.

Fazit

Je nach Anwendungsfall ist es notwendig, Inhalte zu strukturieren und dabei gleichzeitig den Autoren die Arbeit zu erleichtern. Das Paragraphs Modul bietet dafür eine elegante Vorgehensweise an.

Links

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 5864px; left: 50px;">Save