picojournal17

PicoJournal – Bilder zu Posts hinzufügen mit Paperclip

Heute zeige ich, wie man mit Hilfe des Paperclip gems Bilder zu seinen Posts hinzufügen kann. Ein essentielles Feature für PicoJournal. Durch dieses fantastische gem war die Sache leichter als anfangs von mir angenommen! Ich zeige wie man Imagemagick und Paperclip installiert, das gewünschte Model und die Datenbank erweitert und schließlich die hochgeladenen Bilder anzeigt.

pfeildings

Ich versuche diesen Posts heute mal weniger erzählerisch und mehr praktisch zu gestalten. Deswegen nun alle nötigen Schritte aufgelistet.

1. Imagemagick muss installiert sein

Um herauszufinden ob Imagemagick bereits installiert ist, tippe which convert in die Konsole. Wenn ein Pfad zurückkommt, ist es installiert. Ansonsten installiere es mit sudo apt-get install imagemagick (ubuntu) oder brew install imagemagick (mac) oder per Datei.

2. Paperclip installieren

Füge im Gemfile das hinzu: gem „paperclip“, „~> 5.0.0“ (Lieber mal aktuelle Version hier abgleichen)

Dann bundle install und Server neu starten.

3. Das Model erweitern

In meinem Fall heißt das zu erweiternde Model day. Ich öffne also die Datei model/day.rb und erweitere diese um zwei Zeilen:

Die erste Zeile sagt, dass day eine angehängte Datei namens image hat. Dahinter lassen sich verschiedene Größen spezifizieren. 600×600> bedeutet, dass die medium Bilder mindestens diese Maße haben sollen. Mit der Raute bei 200×200# wird die thumb Größe exakt auf 200×200 gesetzt. Es lassen sich auch noch mehr Größen hinzufügen.

Die zweite Zeile validiert den Upload, damit nur Bilder hier landen und kann einfach so kopiert werden.

4. Datenbank Migration

Die neuen Bilder müssen in der Datenbank gespeichert werden und dafür muss diese angepasst werden. Tippt folgendes in die Konsole:

rails generate paperclip day image (day und image durch deine Modelnamen ersetzen)

rake db:migrate

5. Formular erweitern

Öffnet das Formular, bei welchem das Bild hinzugefügt werden soll (bei mir views/days/_form.erb). Zuerst wird die erste Zeile etwas geändert, damit das Formular auch mit Dateiuploads klarkommt. Danach erweitere ich das Formular einfach mit einem file_field.

6. Controller erweitern

Der neue image Parameter muss noch im Controller erlaubt werden, sonst filtert dieser das Bild einfach raus:

7. View erweitern und Bild anzeigen

Nun kann man ein Bild hochladen und es wird gespeichert! Jetzt muss es nur noch angezeigt werden. Folgende Zeile rendert das Bild an gewünschter Stelle:

 

bilderPicoJournal

Link zur Live Version

Die Bilder machen alles gleich viel besser 🙂 Fertig!

pfeildings

Zwei Dinge, die bei den Bildern noch wünschenswert wären, ist den User selbst die quadratische Auwahl treffen zu lassen, denn momentan macht Paperclip das automatisch. Dazu kommt, dass beim Klick eines Bildes dieses in einer größeren Variante auftauchen soll und in dieser Ansicht die Bilder auch durchgeswiped werden können. Doch das sind Aufgaben für ein anderes Mal. Für jetzt reicht mir diese Basisfunktionalität. Bis nächste Woche!

*macht  sich Fischbrötchen*