Intégration CarrierWave

Si vous prenez en charge le téléchargement dynamique d’images dans votre application Ruby on Rails, les images sont probablement attachées à une certaine entité modèle. Rails utilise ActiveRecord pour les entités de modèle par défaut, tandis que les documents Mongoid sont utilisés pour un modèle basé sur MongoDB. Par exemple, conserver l’image en tant qu’attribut  » image  » d’une entité Post ou en tant qu’attribut  » profile_picture  » d’une entité utilisateur.

La gemme CarrierWave peut être utile pour intégrer les téléchargements d’images à votre modèle. Par défaut, CarrierWave stocke les images sur le disque dur local, mais il dispose également de plugins supplémentaires disponibles pour le stockage et la manipulation d’images.

La gemme Cloudinary fournit un plugin pour CarrierWave. L’utilisation de ce plugin vous permet de profiter des avantages de CarrierWave pour télécharger facilement des images à partir de formulaires HTML sur votre modèle, tout en profitant des grands avantages de Cloudinary: les images téléchargées sont stockées dans le cloud, transformées et manipulées dans le cloud, et livrées automatiquement via un CDN.

Installation et configuration de CarrierWave

Pour utiliser le module d’intégration optionnel pour le téléchargement d’images avec ActiveRecord ou Mongoid à l’aide de CarrierWave, installez la gemme CarrierWave:

gem install carrierwave

Rails 3.x Fichier Gemme:

gem 'carrierwave'gem 'cloudinary'

Rails 2.x environnement.rb

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

Exemples de téléchargement

Voici un court exemple qui démontre l’utilisation de Cloudinary avec CarrierWave dans votre projet Rails. Dans cet exemple, nous utilisons l’entité modèle Post pour prendre en charge l’attachement d’une image à chaque publication. Les images jointes sont gérées par l’attribut ‘picture’ (colonne) de l’entité Post.

Pour commencer, définissez d’abord une classe d’uploader CarrierWave et dites-lui d’utiliser le plugin Cloudinary. Pour plus de détails, consultez la documentation de CarrierWave.

Dans cet exemple, nous allons convertir l’image téléchargée en PNG avant de la stocker dans le cloud. Nous lui attribuerons également la balise post_picture. Nous définissons deux transformations supplémentaires nécessaires à l’affichage de l’image sur notre site: ‘standard’ et ‘thumbnail’. Un identifiant public unique généré aléatoirement est généré pour chaque image téléchargée et stocké de manière persistante dans le modèle.

Dans l’exemple suivant, nous définissons explicitement un public_id en fonction du contenu de l’attribut ‘short_name’ de l’entité ‘Post’.

L’attribut ‘picture’ de Post est simplement une chaîne (un script de migration de base de données est nécessaire bien sûr). Nous le montons dans la classe ‘PictureUploader’ que nous venons de définir:

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

Dans notre formulaire HTML pour l’édition Post, nous ajoutons un champ de fichier pour le téléchargement de l’image et également un champ « cache » caché pour prendre en charge le rechargement de page et les erreurs de validation sans perdre l’image téléchargée. L’exemple ci-dessous est dans ‘HAML’ (vous pouvez bien sûr faire exactement la même chose en utilisant ‘ERB’):

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

Dans notre contrôleur, nous enregistrons ou mettons à jour les attributs de la publication de manière standard. Exemple:

post.update_attributes(params)

À ce stade, l’image téléchargée par l’utilisateur sur votre serveur est téléchargée sur Cloudinary, qui a également attribué l’identifiant et la balise publics spécifiés et les convertit en PNG. L’identifiant public ainsi que la version de l’image téléchargée sont stockés dans l’attribut « image » de notre entité Post. Notez que par défaut, les transformations ne sont pas générées à ce stade ; elles ne sont générées que lorsqu’un utilisateur final y accède pour la première fois. Cela est vrai sauf si vous spécifiez ‘process:eager=> true’ ou simplement ‘eager’ pour chaque transformation.

Maintenant, vous pouvez utiliser les appels standard image_tag pour afficher les images téléchargées et leurs transformations dérivées et la gemme Cloudinary génère automatiquement l’URL complète correcte pour accéder à vos ressources:

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

Transformations personnalisées et dynamiques

Le plugin de Cloudinary pour CarrierWave prend en charge toutes les options de redimensionnement et de recadrage CarrierWave standard. De plus, vous pouvez appliquer toute transformation personnalisée prise en charge par Cloudinary à l’aide de la méthode cloudinary_transformation. L’appel cloudinary_transformation peut également être effectué en combinaison avec les méthodes standard de redimensionnement et de recadrage CarrierWave. La classe uploader suivante montre un exemple courant d’utilisation de transformations personnalisées:

Vous pouvez aller plus loin et appliquer des transformations enchaînées pour obtenir des résultats plus complexes. Ces transformations peuvent être appliquées en tant que transformation entrante lors du téléchargement ou dans le cadre des différentes versions générées paresseusement ou avec impatience lors du téléchargement. La classe uploader suivante inclut de telles transformations enchaînées appliquées à l’aide du paramètre transformation de la méthode cloudinary_transformation.

Certains sites Web ont un design graphique qui les oblige à afficher les mêmes images dans de nombreuses dimensions différentes. La définition formelle de plusieurs versions de téléchargement peut être un problème. Vous pouvez toujours utiliser CarrierWave et tirer parti des transformations dynamiques de Cloudinary en appliquant les transformations souhaitées lors de la création de votre vue. N’importe quelle version peut être générée dynamiquement à partir de votre vue sans dépendre des versions de CarrierWave. Pour ce faire, utilisez l’attribut full_public_id avec cl_image_tag pour créer des URL de transformation basées sur le cloud pour les images téléchargées attachées à votre modèle.

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

Recadrage personnalisé basé sur les coordonnées

Si vous autorisez vos utilisateurs à sélectionner manuellement la zone de recadrage, nous vous recommandons de conserver les coordonnées x, y de manière persistante dans le modèle pour permettre à l’avenir un recadrage différent sur l’image d’origine. La classe uploader suivante récupère les coordonnées personnalisées à partir des attributs de l’objet model. La méthode custom_crop dans cet exemple renvoie un hachage de paramètres de transformation Cloudinary supplémentaires à appliquer.

Si vous souhaitez stocker uniquement la version recadrée de l’image, vous pouvez utiliser une transformation entrante. De cette façon, l’image d’origine n’est pas stockée dans le cloud; seule la version recadrée. Vous pouvez ensuite utiliser d’autres transformations pour redimensionner l’image recadrée. L’exemple suivant appelle process :custom_crop dans la classe elle-même (au lieu de dans une « version ») tandis que les coordonnées personnalisées sont conservées en tant qu’attributs transitoires sur le modèle (définis avec attr au lieu de les stocker de manière persistante).