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.
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:
class Day < ActiveRecord::Base
has_attached_file :image, styles: { medium: "600x600>", thumb: "200x200#" } #neu
validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/ #neu
belongs_to :user
end
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.
<%= form_for @day, html: {multipart: true} do |f| %>
# [...]
<div class="field">
<%= f.label :image %><br>
<%= f.file_field :image %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
6. Controller erweitern
Der neue image Parameter muss noch im Controller erlaubt werden, sonst filtert dieser das Bild einfach raus:
# [...] def day_params params.require(:day).permit(:date, :description, :image, :rating) end
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:
<%= image_tag( day.image.url(:thumb), class: "day-img") %>
Die Bilder machen alles gleich viel besser 🙂 Fertig!
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*