Bilder mit Active Storage – attachment und attachments mit dem b4um Generator
Der b4um Generator unterstützt Active Storage direkt und unterscheidet dabei zwischen zwei Varianten:
image:attachment
für ein einzelnes Bild und:
images:attachments
für mehrere Bilder.
Dabei erzeugt der b4um Generator nicht nur die Active-Storage-Verknüpfung im Model. Für Bilder stehen zusätzlich unter anderem Vorschau, Lightbox und bei mehreren Bildern Funktionen zum Hinzufügen und Entfernen einzelner Bilder zur Verfügung.
In diesem Tutorial testen wir beide Varianten.
1. Voraussetzung: Active Storage
Bild-Uploads benötigen Active Storage.
Active Storage kann bereits während der Installation des b4um Generators eingerichtet werden:
bin/rails generate b4um:install
Während der Installation fragt der Generator, ob Active Storage verwendet werden soll.
Wird Active Storage ausgewählt und ist es noch nicht eingerichtet, übernimmt der Installer die notwendige Installation.
Ob Active Storage bereits vorhanden ist, lässt sich beispielsweise überprüfen mit:
ls db/migrate/*active_storage*
Ist eine entsprechende Migration vorhanden, kann Active Storage verwendet werden.
Beispiel:
db/migrate/xxxxxxxxx_create_active_storage_tables.active_storage.rb
Damit können wir direkt mit unserem ersten Beispiel beginnen.
2. Article mit einem Bild erzeugen
Zuerst erstellen wir einen einfachen Artikel.
Er erhält:
- einen Titel,
- eine Beschreibung,
- ein Bild.
Der Generator-Befehl lautet:
bin/rails generate b4um:scaffold Article title:string description:text image:attachment
Entscheidend ist dabei:
image:attachment
Die Einzahl attachment bedeutet, dass genau ein Active-Storage-Attachment für dieses Feld verwendet wird.
Der b4um Generator erstellt das vollständige Scaffold und passt die benötigten Views für das Bildfeld an.
Anschließend führen wir die Migration aus:
bin/rails db:migrate
3. Das erzeugte Model
Werfen wir einen Blick auf:
app/models/article.rb
Dort finden wir:
class Article < ApplicationRecord has_one_attached :image end
Aus:
image:attachment
hat der Generator also automatisch:
has_one_attached :image
erzeugt.
Damit kann jeder Artikel ein Bild besitzen.
4. Einen Artikel mit Bild erstellen
Wir öffnen:
/articles/new
und tragen beispielsweise folgende Daten ein.
Title
Mein erster Artikel
Description
Dieser Artikel testet den Bild-Upload mit dem b4um Generator.
Anschließend wählen wir über das Feld Image eine Bilddatei aus.
Das Bild wird noch vor dem Speichern als kleine Vorschau angezeigt.
Damit kann der Benutzer sofort überprüfen, ob er das richtige Bild ausgewählt hat.
Jetzt speichern wir den Artikel mit:
Create Article
5. Das gespeicherte Bild
Nach dem Speichern gelangen wir auf die Show-Seite des Artikels.
Neben Titel und Beschreibung wird dort auch das gespeicherte Bild angezeigt.
Das Bild gehört jetzt über:
has_one_attached :image
zum Artikel.
Die Bilddatei selbst wird dabei von Active Storage verwaltet.
6. Die integrierte Lightbox
Der b4um Generator stellt für Bilder zusätzlich eine Lightbox bereit.
Dazu klicken wir einfach auf das angezeigte Bild.
Das Bild wird anschließend vergrößert über der eigentlichen Seite dargestellt.
Die Lightbox kann wieder geschlossen werden, ohne die aktuelle Seite zu verlassen.
Damit ist die erste Variante vollständig:
image:attachment
↓
has_one_attached :image
↓
Bild auswählen
↓
Vorschau
↓
Speichern
↓
Bild anzeigen
↓
LightboxNachdem wir ein einzelnes Bild verwendet haben, erweitern wir das Beispiel auf mehrere Bilder.
Dafür erstellen wir eine Galerie.
7. Gallery mit mehreren Bildern erzeugen
Unsere Galerie erhält:
- einen Titel,
- eine Beschreibung,
- mehrere Bilder.
Wir führen aus:
bin/rails generate b4um:scaffold Gallery title:string description:text images:attachments
Diesmal verwenden wir:
images:attachments
Der Unterschied zum ersten Beispiel ist das pluralisierte:
attachments
Dadurch kann ein Datensatz mehrere Dateien besitzen.
Anschließend führen wir wieder die Migration aus:
bin/rails db:migrate
8. Das Gallery-Model
In:
app/models/gallery.rb
finden wir:
class Gallery < ApplicationRecord has_many_attached :images end
Aus:
images:attachments
wurde also:
has_many_attached :images
Während unser Article ein einzelnes Bild besitzt, kann eine Gallery jetzt mehrere Bilder enthalten.
9. Mehrere Bilder gleichzeitig auswählen
Wir öffnen:
/galleries/new
Als Beispieldaten verwenden wir:
Title
Meine erste Gallery
Description
Die Gallery zeigt mehrere Bilder mit dem b4um Generator
Anschließend klicken wir auf Dateien auswählen und wählen mehrere Bilder gleichzeitig aus.
In unserem Beispiel verwenden wir drei Bilder.
Der b4um Generator zeigt alle ausgewählten Bilder direkt als Vorschau an.
Im Dateifeld sehen wir außerdem:
3 Dateien
Darunter erscheinen die drei Vorschaubilder.
Jetzt klicken wir auf:
Create Gallery
10. Die gespeicherte Galerie
Nach dem Speichern gelangen wir zur Show-Seite.
Alle drei Bilder sind jetzt mit unserer Galerie verbunden.
Die Verbindung übernimmt:
has_many_attached :images
Wir benötigen dafür keine eigenen Bildtabellen oder zusätzlichen Beziehungen in unserem Gallery-Model.
11. Lightbox für mehrere Bilder
Auch mehrere Attachments verwenden die integrierte Lightbox.
Wir klicken auf eines der Bilder.
Jetzt öffnet sich die vergrößerte Ansicht.
Bei mehreren Bildern stehen zusätzlich Navigationsmöglichkeiten zur Verfügung.
Oben links sehen wir beispielsweise:
2 von 3
Mit den Pfeilen links und rechts können wir durch die Galerie navigieren.
Die Lightbox unterstützt unter anderem:
- vorheriges Bild,
- nächstes Bild,
- Tastaturnavigation,
- Mausbedienung,
- Touch- und Swipe-Gesten,
- Bildzähler,
- Dateiname,
- Schließen der Lightbox.
Dafür ist keine zusätzliche Lightbox-Bibliothek erforderlich.
12. Vorhandene Bilder bearbeiten
Mehrere Attachments werden besonders interessant, wenn eine bestehende Galerie bearbeitet wird.
Wir öffnen:
/galleries/1/edit
Die bereits gespeicherten Bilder erscheinen wieder im Formular.
Sie werden nicht automatisch entfernt, nur weil wir die Galerie bearbeiten.
13. Ein einzelnes Bild zum Entfernen markieren
Wir möchten nun beispielsweise das mittlere Bild aus unserer Galerie entfernen.
Dazu klicken wir auf das entsprechende Vorschaubild.
Das Bild wird ausgegraut und erhält die Markierung:
Will be removed
Wichtig ist:
Das Bild wird durch das Anklicken noch nicht sofort gelöscht.
Es wird zunächst nur für das Entfernen beim nächsten Update vorgemerkt.
Dadurch kann die Auswahl vor dem Speichern noch geändert werden.
14. Gleichzeitig ein neues Bild hinzufügen
Während ein vorhandenes Bild zum Entfernen markiert ist, können wir gleichzeitig ein neues Bild auswählen.
Wir klicken dazu wieder auf:
Dateien auswählen
und wählen ein weiteres Bild aus.
Das neue Bild erscheint ebenfalls direkt in der Vorschau.
Damit haben wir jetzt innerhalb eines einzigen Formulars:
Bild 1 → behalten Bild 2 → entfernen Bild 3 → behalten Bild 4 → neu hinzufügen
Jetzt klicken wir auf:
Update Gallery
15. Das Ergebnis des Updates
Nach dem Update gelangen wir wieder zur Gallery-Show-Seite.
Jetzt können wir das Ergebnis kontrollieren.
Das zum Entfernen markierte Bergsee-Bild ist verschwunden.
Die beiden anderen ursprünglichen Bilder sind weiterhin vorhanden.
Zusätzlich wurde das neu ausgewählte Bild gespeichert.
Damit wurde ein wichtiger Unterschied zu einem einfachen Datei-Upload getestet.
Der b4um Generator kann beim Bearbeiten einer has_many_attached-Beziehung gleichzeitig:
- vorhandene Bilder behalten,
- einzelne vorhandene Bilder entfernen,
- neue Bilder hinzufügen.
Der Ablauf lässt sich vereinfacht so darstellen:
Vorhandene Bilder
↓
im Formular anzeigen
↓
┌─────────────────────┐
│ │
↓ ↓
behalten entfernen
+
neue auswählen
↓
Update Gallery
↓
Active StorageDamit müssen beim Hinzufügen eines neuen Bildes nicht sämtliche bisherigen Bilder erneut hochgeladen werden.
Jetzt haben wir beide Varianten ausprobiert.
Ein einzelnes Attachment
Generator:
bin/rails generate b4um:scaffold Article title:string description:text image:attachment
Model:
has_one_attached :image
Geeignet beispielsweise für:
- Artikelbild
- Titelbild
- Profilbild
- Produktbild
Mehrere Attachments
Generator:
bin/rails generate b4um:scaffold Gallery title:string description:text images:attachments
Model:
has_many_attached :images
Geeignet beispielsweise für:
- Bildergalerien
- mehrere Produktbilder
- Reisebilder
- Portfolios
- Dokumentationen
18. Die Schreibweise ist entscheidend
Für ein einzelnes Bild verwenden wir:
image:attachment
Daraus wird:
has_one_attached :image
Für mehrere Bilder verwenden wir:
images:attachments
Daraus wird:
has_many_attached :images
Kurz gesagt:
image:attachment
↓
ein Bild
↓
has_one_attached
images:attachments
↓
mehrere Bilder
↓
has_many_attached
19. Welche Funktionen stellt b4um bereit?
Zusammen mit Active Storage übernimmt der b4um Generator die Integration der Bilder in die erzeugten Ressourcen.
Bei Bildern stehen unter anderem folgende Funktionen zur Verfügung:
- Active-Storage-Integration
- Vorschau vor dem Speichern
- Anzeige vorhandener Bilder beim Bearbeiten
- Lightbox
- Tastaturbedienung der Lightbox
- Touch- und Swipe-Unterstützung
Bei mehreren Bildern kommen zusätzlich Funktionen hinzu:
- mehrere Dateien gleichzeitig auswählen
- mehrere Vorschauen anzeigen
- Navigation zwischen Bildern in der Lightbox
- Bildzähler
- vorhandene Bilder behalten
- einzelne vorhandene Bilder zum Entfernen markieren
- neue Bilder zu einer bestehenden Sammlung hinzufügen
20. Fazit
Mit dem b4um Generator lassen sich Active-Storage-Bilder direkt beim Erzeugen eines Scaffolds integrieren.
Für ein einzelnes Bild genügt:
bin/rails generate b4um:scaffold Article title:string description:text image:attachment
Der Generator erzeugt daraus:
has_one_attached :image
Für mehrere Bilder verwenden wir:
bin/rails generate b4um:scaffold Gallery title:string description:text images:attachments
Daraus entsteht:
has_many_attached :images
Damit endet die Unterstützung aber nicht beim eigentlichen Active-Storage-Model.
Der b4um Generator ergänzt die erzeugten Ansichten um Bildvorschauen und eine Lightbox. Bei mehreren Bildern können vorhandene Attachments außerdem erhalten oder einzeln entfernt werden, während gleichzeitig neue Bilder hinzugefügt werden.
So lassen sich sowohl einfache Artikelbilder als auch vollständige Bildergalerien direkt mit dem Scaffold-Generator aufbauen.
Die beiden wichtigsten Schreibweisen dafür sind:
image:attachment images:attachments
Damit haben wir beide Varianten – ein einzelnes Bild und mehrere Bilder – vollständig getestet.