Erweitere In-Place Editing um Rich Text, Bilder, Galerien und die integrierte Lightbox.
Von einfachen Feldern zu Rich Content
Im ersten Teil haben wir Text-, Zahlen-, Boolean-, Select- und Radio-Felder direkt auf der Show-Seite bearbeitbar gemacht.
Jetzt gehen wir einen Schritt weiter. Unser bestehendes Product erhält:
Rich Text mit Action Text und Trix
ein einzelnes Bild
eine Galerie mit mehreren Bildern
eine Lightbox zur vergrößerten Darstellung
Auch diese Inhalte lassen sich anschließend direkt auf der Show-Seite bearbeiten.
Rich Text mit Trix hinzufügen
Zunächst erweitern wir unser Product um eine Beschreibung mit Action Text.
Der b4um Generator übernimmt dafür die Einrichtung von Trix:
bin/rails generate b4um:trix Product description
Falls dabei eine neue Action-Text-Migration angelegt wurde, führen wir anschließend die Migration aus:
bin/rails db:migrate
Unser Product besitzt jetzt das Rich-Text-Feld description.
Über das normale Product-Formular können wir zunächst einen formatierten Text anlegen. Trix ermöglicht dabei beispielsweise Überschriften, Fettschrift, Listen und weitere Formatierungen.
Trix direkt auf der Show-Seite bearbeiten
Jetzt kommt der eigentliche In-Place-Schritt.
Wir führen für dasselbe Feld den In-Place-Generator aus:
Der Generator erkennt automatisch, dass description ein Action-Text-Feld ist:
in_place Product#description (rich_text)
Wir müssen den Feldtyp also nicht zusätzlich angeben.
Ein Klick auf die Bearbeitungsfunktion öffnet jetzt den vollständigen Trix-Editor direkt innerhalb der Product-Show-Seite.
Formatierungen des vorhandenen Textes bleiben dabei erhalten.
Trix-In-Place-Editor geöffnet
Rich Text nach dem Speichern
Nach dem Speichern verschwindet der Editor wieder und die formatierte Beschreibung wird direkt auf der Show-Seite dargestellt.
Unsere Beispielbeschreibung enthielt unter anderem:
MacBook Air M4
mit leistungsstarkem Apple Chip und hochwertigem Display
Die Formatierung stammt weiterhin aus Action Text. In-Place Editing verändert also nicht die Funktionsweise von Trix, sondern ergänzt die Möglichkeit, den Inhalt direkt dort zu bearbeiten, wo er angezeigt wird.
gespeicherte Description auf der Show-Seite
Ein einzelnes Bild hinzufügen
Als Nächstes erhält unser Product ein Bild.
Dafür verwenden wir den Attachment-Generator:
bin/rails generate b4um:attachment Product image
Der Generator richtet das Active-Storage-Attachment am Modell ein und ergänzt die benötigten Stellen in Formular, Controller und Show-Ansicht.
Anschließend aktivieren wir In-Place Editing für dieses Attachment:
bin/rails generate b4um:in_place Product image
Auch hier erkennt der Generator den Typ automatisch:
in_place Product#image (attachment)
Damit kann das Bild direkt auf der Show-Seite hinzugefügt und später wieder ausgetauscht werden.
Bild direkt bearbeiten
Ist bereits ein Bild vorhanden, zeigt die Product-Seite eine Vorschau an.
Über die In-Place-Bearbeitung kann das Bild ersetzt oder entfernt werden. Ist noch kein Bild vorhanden, steht stattdessen die Möglichkeit zum Hinzufügen eines Bildes zur Verfügung.
Das Hochladen geschieht direkt aus dem In-Place-Editor heraus.
Product-Seite mit dem einzelnen großen Bild
Bilder in der Lightbox öffnen
Das angezeigte Bild ist gleichzeitig mit der b4um Lightbox verbunden.
Ein Klick auf das Bild öffnet die vergrößerte Ansicht. Dabei wird auch der Dateiname beziehungsweise die Bildbeschriftung angezeigt.
Für die Lightbox ist keine zusätzliche Einrichtung notwendig – sie wird vom Generator in die erzeugte Darstellung integriert.
Einzelbild in geöffneter Lightbox
Eine Bildergalerie hinzufügen
Für mehrere Bilder verwenden wir ein weiteres Active-Storage-Attachment – diesmal mit --multiple:
Dadurch erhält unser Product eine Galerie, die mehrere Dateien aufnehmen kann.
Anschließend machen wir auch dieses Feld direkt bearbeitbar:
bin/rails generate b4um:in_place Product gallery
Der In-Place-Generator erkennt die Mehrfachbeziehung:
in_place Product#gallery (attachments)
Damit unterscheidet der Generator automatisch zwischen einem einzelnen Attachment und einer Galerie.
Mehrere Bilder direkt auf der Show-Seite
Nach dem Upload erscheinen die Galeriebilder als kompakte Vorschaubilder nebeneinander.
Neue Bilder können direkt hinzugefügt werden. Vorhandene Bilder lassen sich ebenfalls direkt über den In-Place-Editor entfernen.
Die komplette Galerie muss dafür nicht über die normale Edit-Seite verwaltet werden.
Product-Show-Seite mit den drei Galerie-Thumbnails nebeneinander
Galerie in der Lightbox
Auch die Galerie ist automatisch mit der Lightbox verbunden.
Wird eines der Vorschaubilder geöffnet, kann innerhalb der Galerie zwischen den Bildern navigiert werden.
Neben den Navigationselementen stehen auch die Vorschaubilder der Galerie zur Verfügung. Auf Geräten mit entsprechender Eingabe kann außerdem per Drag beziehungsweise Swipe zwischen den Bildern gewechselt werden.
Galerie-Lightbox mit 1 von 3
Bilder hinzufügen und entfernen
Öffnen wir die In-Place-Bearbeitung der Galerie, können vorhandene Bilder entfernt und weitere Bilder hinzugefügt werden.
Sind noch keine Bilder vorhanden oder wurden alle entfernt, erscheint eine deutlich erkennbare Fläche zum Hinzufügen:
+ Add image
Damit kann auch eine zunächst leere Galerie vollständig über die Show-Seite aufgebaut werden.
leerer Galerie-Editor mit gestricheltem + Add image-Bereich
Was der Generator automatisch erkennt
Für die drei erweiterten Feldtypen mussten wir dem In-Place-Generator keinen Typ mitteilen.
Der Generator verwendet dafür die Informationen aus dem Rails-Modell und erzeugt abhängig davon die passende Darstellung und den passenden Editor.
Das ist gerade bei Action Text und Active Storage praktisch, weil für diese Felder keine zusätzliche Typkonfiguration notwendig ist.
Das Ergebnis
Unser Product kann jetzt wesentlich mehr als einfache Datenbankwerte direkt zu bearbeiten.
Die Beschreibung verwendet Action Text und Trix, das einzelne Bild kann direkt hochgeladen, ersetzt und entferntwerden und die Galerie verwaltet mehrere Bilder direkt auf der Show-Seite.
Bild und Galerie sind zusätzlich mit der Lightbox verbunden. Dadurch bleiben Bearbeitung und Präsentation voneinander getrennt: Im normalen Zustand sehen Besucher die fertigen Inhalte, während die Bearbeitungsfunktionen nur bei Bedarf geöffnet werden.
Wie geht es weiter?
Bis jetzt kann jeder Benutzer, der Zugriff auf die entsprechenden Aktionen besitzt, die In-Place-Funktionen verwenden.
In einer öffentlichen Anwendung möchten wir die Inhalte jedoch beispielsweise für alle Besucher sichtbar machen, die Bearbeitung aber nur angemeldeten Benutzern erlauben.
Genau das machen wir im nächsten Teil.
Nächstes Tutorial:
In-Place Editing mit Login schützen
Dort verwenden wir b4um:authentication, schützen Products und zeigen anhand unserer beiden Vergleichsbilder sehr schön: ausgeloggt nur ansehen – eingeloggt direkt bearbeiten.
Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren,
Funktionen für soziale Medien anbieten zu können und die Zugriffe auf
unsere Website zu analysieren.
Sie akzeptieren unsere Cookies, wenn Sie fortfahren diese Webseite zu
nutzen.
Datenschutzerklärung.
