CarrierWave Integration

Wenn Sie das dynamische Hochladen von Bildern in Ihrer Ruby on Rails-Anwendung unterstützen, sind die Bilder wahrscheinlich an eine bestimmte Modellentität angehängt. Rails verwendet standardmäßig ActiveRecord für Modellentitäten, während Mongoid-Dokumente für ein MongoDB-basiertes Modell verwendet werden. Beispiele können das Beibehalten des Bildes als ‚picture‘-Attribut einer Post-Entität oder als ‚profile_picture‘-Attribut einer Benutzerentität sein.

Das CarrierWave-Juwel kann nützlich sein, um Bild-Uploads in Ihr Modell zu integrieren. Standardmäßig speichert CarrierWave Bilder auf der lokalen Festplatte, verfügt jedoch auch über zusätzliche Plugins zum Speichern und Bearbeiten von Bildern.

Das Cloudinary-Juwel bietet ein Plugin für CarrierWave. Mit diesem Plugin können Sie die Vorteile von CarrierWave zum einfachen Hochladen von Bildern aus HTML-Formularen in Ihr Modell nutzen und gleichzeitig die großen Vorteile von Cloudinary nutzen: Hochgeladene Bilder werden in der Cloud gespeichert, in der Cloud transformiert und bearbeitet und automatisch über ein CDN bereitgestellt.

CarrierWave-Installation und -Einrichtung

Um das optionale Integrationsmodul zum Hochladen von Bildern mit ActiveRecord oder Mongoid mit CarrierWave zu verwenden, installieren Sie das CarrierWave-Juwel:

gem install carrierwave

Schienen 3.x Gemfile:

gem 'carrierwave'gem 'cloudinary'

Schienen 2.x Umgebung.rb

config.gem 'carrierwave', :version => '~> 0.4.10'config.gem 'cloudinary'

Upload-Beispiele

Nachfolgend finden Sie ein kurzes Beispiel für die Verwendung von Cloudinary mit CarrierWave in Ihrem Rails-Projekt. In diesem Beispiel verwenden wir die Entität Post Model, um das Anhängen eines Bildes an jeden Beitrag zu unterstützen. Angehängte Bilder werden vom Attribut ‚picture‘ (Spalte) der Post-Entität verwaltet.

Definieren Sie zunächst eine CarrierWave-Uploader-Klasse und weisen Sie sie an, das Cloudinary-Plugin zu verwenden. Einzelheiten finden Sie in der CarrierWave-Dokumentation.

In diesem Beispiel konvertieren wir das hochgeladene Bild in ein PNG, bevor wir es in der Cloud speichern. Wir weisen ihm auch das post_picture -Tag zu. Wir definieren zwei zusätzliche Transformationen, die für die Anzeige des Bildes auf unserer Website erforderlich sind: ‚Standard‘ und ‚Miniaturansicht‘. Für jedes hochgeladene Bild wird eine zufällig generierte eindeutige öffentliche ID generiert und dauerhaft im Modell gespeichert.

Im folgenden Beispiel definieren wir explizit eine public_id basierend auf dem Inhalt des Attributs ’short_name‘ der Entität ‚Post‘.

Das ‚picture‘-Attribut von Post ist einfach eine Zeichenfolge (ein DB-Migrationsskript wird natürlich benötigt). Wir mounten es in die Klasse ‚PictureUploader‘, die wir gerade definiert haben:

class Post < ActiveRecord::Base ... mount_uploader :picture, PictureUploader ...end

In unserem HTML-Formular für die Nachbearbeitung fügen wir ein Dateifeld zum Hochladen des Bildes und ein verstecktes Cache-Feld hinzu, um das Neuladen von Seiten und Validierungsfehler zu unterstützen, ohne das hochgeladene Bild zu verlieren. Das folgende Beispiel ist in ‚HAML‘ (Sie können natürlich genau das gleiche mit ‚ERB‘ tun‘):

= form_for(:post) do |post_form| = post_form.hidden_field(:picture_cache) = post_form.file_field(:picture)

In unserem Controller speichern oder aktualisieren wir die Attribute des Beitrags auf standardmäßige Weise. Beispielsweise:

post.update_attributes(params)

Zu diesem Zeitpunkt wird das vom Benutzer auf Ihren Server hochgeladene Bild in Cloudinary hochgeladen, das auch die angegebene öffentliche ID und das angegebene Tag zugewiesen und in PNG konvertiert. Die öffentliche ID wird zusammen mit der Version des hochgeladenen Bildes im Attribut ‚picture‘ unserer Post-Entität gespeichert. Beachten Sie, dass die Transformationen standardmäßig zu diesem Zeitpunkt nicht generiert werden; Sie werden nur generiert, wenn ein Endbenutzer zum ersten Mal darauf zugreift. Dies ist wahr, es sei denn, Sie geben ‚process:eager => true‘ oder einfach ‚eager‘ für jede Transformation an.

Jetzt können Sie Standard image_tag -Aufrufe zum Anzeigen der hochgeladenen Bilder und ihrer abgeleiteten Transformationen verwenden, und das Cloudinary-Juwel generiert automatisch die richtige vollständige URL für den Zugriff auf Ihre Ressourcen:

image_tag(post.picture_url, :alt => post.short_name)image_tag(post.picture_url(:thumbnail), :width => 50, :height => 50)

Benutzerdefinierte und dynamische Transformationen

Das Plugin von Cloudinary für CarrierWave unterstützt alle standardmäßigen Carrierwave-Größenänderungs- und Zuschneideoptionen. Darüber hinaus können Sie jede von Cloudinary unterstützte benutzerdefinierte Transformation mit der Methode cloudinary_transformation anwenden. Das Aufrufen von cloudinary_transformation kann auch in Kombination mit den Standardmethoden CarrierWave resize und crop erfolgen. Die folgende Uploader-Klasse zeigt ein häufiges Beispiel für die Verwendung benutzerdefinierter Transformationen:

Sie können dies weiterführen und verkettete Transformationen anwenden, um komplexere Ergebnisse zu erzielen. Diese Transformationen können beim Hochladen als eingehende Transformation oder als Teil der verschiedenen Versionen angewendet werden, die beim Hochladen entweder träge oder eifrig generiert werden. Die folgende Uploader-Klasse enthält solche verketteten Transformationen, die mit dem Parameter transformation der Methode cloudinary_transformation angewendet werden.

Einige Websites haben ein Grafikdesign, das sie zwingt, dieselben Bilder in vielen verschiedenen Dimensionen anzuzeigen. Das formelle Definieren mehrerer Uploader-Versionen kann mühsam sein. Sie können weiterhin CarrierWave verwenden und die dynamischen Transformationen von Cloudinary nutzen, indem Sie beim Erstellen Ihrer Ansicht die gewünschten Transformationen anwenden. Jede Version kann dynamisch aus Ihrer Ansicht generiert werden, ohne von CarrierWave-Versionen abhängig zu sein. Verwenden Sie dazu das Attribut full_public_id mit cl_image_tag, um cloudbasierte Transformations-URLs für die hochgeladenen Bilder zu erstellen, die an Ihr Modell angehängt sind.

cl_image_tag(post.picture.full_public_id, :format => "jpg", :width => 100, :height => 200, :crop => :crop, :x => 20, :y => 30, :radius => 10)

Benutzerdefiniertes koordinatenbasiertes Zuschneiden

Wenn Sie Ihren Benutzern erlauben, den Zuschneidebereich manuell auszuwählen, empfehlen wir, die x- und y-Koordinaten dauerhaft im Modell beizubehalten, um in Zukunft ein anderes Zuschneiden des Originalbilds zu ermöglichen. Die folgende Uploader-Klasse ruft die benutzerdefinierten Koordinaten aus Attributen des model -Objekts ab. Die custom_crop -Methode in diesem Beispiel gibt einen Hash zusätzlicher Cloudinary-Transformationsparameter zurück, die angewendet werden sollen.

Wenn Sie nur die beschnittene Version des Bildes speichern möchten, können Sie eine eingehende Transformation verwenden. Auf diese Weise wird das Originalbild nicht in der Cloud gespeichert, sondern nur die zugeschnittene Version. Sie können dann weitere Transformationen verwenden, um die Größe des zugeschnittenen Bildes zu ändern. Das folgende Beispiel ruft process :custom_crop in der Klasse selbst auf (anstatt in einer ‚Version‘), während die benutzerdefinierten Koordinaten als vorübergehende Attribute im Modell beibehalten werden (definiert mit attr, anstatt sie persistent zu speichern).