Integración de CarrierWave
Si admite la carga dinámica de imágenes en su aplicación Ruby on Rails, las imágenes probablemente se adjunten a una entidad de modelo determinada. Rails utiliza ActiveRecord para entidades de modelo de forma predeterminada, mientras que los documentos Mongoid se utilizan para un modelo basado en MongoDB. Los ejemplos podrían incluir mantener la imagen como el atributo ‘ picture ‘de una entidad Post o como el atributo’ profile_picture ‘ de una entidad de usuario.
La gema CarrierWave puede ser útil para integrar cargas de imágenes con su modelo. De forma predeterminada, CarrierWave almacena imágenes en el disco duro local, pero también tiene complementos adicionales disponibles para almacenar y manipular imágenes.
La gema Cloudinary proporciona un complemento para CarrierWave. El uso de este complemento le permite disfrutar de los beneficios de CarrierWave para cargar fácilmente imágenes desde formularios HTML a su modelo, mientras disfruta de los grandes beneficios de Cloudinary: las imágenes cargadas se almacenan en la nube, se transforman y manipulan en la nube y se entregan automáticamente a través de una CDN.
Instalación y configuración de CarrierWave
Para utilizar el módulo de integración opcional para cargar imágenes con ActiveRecord o Mongoid usando CarrierWave, instale la gema CarrierWave:
gem install carrierwave
Carriles 3.x Gemfile:
gem 'carrierwave'gem 'cloudinary'
Rails 2.x entorno.rb
config.gem 'carrierwave', :version => '~> 0.4.10'config.gem 'cloudinary'
Nota
El CarrierWave joya debe ser cargado antes de la Cloudinary joya.
Ejemplos de carga
A continuación se muestra un breve ejemplo que muestra el uso de Cloudinary con CarrierWave en su proyecto Rails. En este ejemplo, usamos la entidad modelo Post para admitir la adición de una imagen a cada publicación. Las imágenes adjuntas son administradas por el atributo’ picture ‘ (columna) de la entidad Post.
Para comenzar, primero defina una clase de carga CarrierWave y dígale que use el complemento Cloudinary. Para obtener más información, consulte la documentación de CarrierWave.
En este ejemplo, convertiremos la imagen subida a un PNG antes de almacenarla en la nube. También le asignaremos la etiqueta post_picture. Definimos dos transformaciones adicionales necesarias para mostrar la imagen en nuestro sitio: ‘estándar’ y ‘miniatura’. Se genera un ID público único generado aleatoriamente para cada imagen cargada y almacenado persistentemente en el modelo.
En el siguiente ejemplo, definimos explícitamente un public_id basado en el contenido del atributo’ short_name ‘de la entidad’ Post’.
El atributo’ picture ‘ de Post es simplemente una cadena (por supuesto, se necesita un script de migración de base de datos). Lo montamos en la clase ‘PictureUploader’ que acabamos de definir:
class Post < ActiveRecord::Base ... mount_uploader :picture, PictureUploader ...end
En nuestro formulario HTML para la edición posterior, agregamos un campo de archivo para cargar la imagen y también un campo oculto de ‘caché’ para admitir errores de recarga y validación de páginas sin perder la imagen cargada. El siguiente ejemplo está en «HAML’ (por supuesto, puede hacer exactamente lo mismo con ‘ERB’):
= form_for(:post) do |post_form| = post_form.hidden_field(:picture_cache) = post_form.file_field(:picture)
En nuestro controlador, podemos guardar o actualizar los atributos de los post en el modo estándar. Por ejemplo:
post.update_attributes(params)
Nota
Si está cargando imágenes desde el navegador directamente a Cloudinary, se envía un identificador firmado al controlador en lugar de los datos de imagen reales. El complemento CarrierWave de Cloudinary maneja sin problemas los identificadores directos, verifica la firma y actualiza el modelo con una referencia a la imagen cargada.
En este punto, la imagen cargada por el usuario en su servidor se carga en Cloudinary, que también asigna el ID público y la etiqueta especificados y la convierte a PNG. El ID público junto con la versión de la imagen cargada se almacenan en el atributo ‘picture’ de nuestra entidad Post. Tenga en cuenta que, de forma predeterminada, las transformaciones no se generan en este punto; solo se generan cuando un usuario final accede a ellas por primera vez. Esto es cierto a menos que especifique ‘proceso: eager = > true ‘o simplemente’ eager ‘ para cada transformación.
Ahora puede usar llamadas estándar image_tag para mostrar las imágenes cargadas y sus transformaciones derivadas, y la gema Cloudinary genera automáticamente la URL completa correcta para acceder a sus recursos:
image_tag(post.picture_url, :alt => post.short_name)image_tag(post.picture_url(:thumbnail), :width => 50, :height => 50)
Transformaciones personalizadas y dinámicas
El complemento de Cloudinary para CarrierWave admite todas las opciones estándar de cambio de tamaño y recorte de CarrierWave. Además, puede aplicar cualquier transformación personalizada compatible con Cloudinary mediante el método cloudinary_transformation. Llamar a cloudinary_transformation también se puede hacer en combinación con los métodos estándar de redimensionamiento y recorte de ondas portadoras. La siguiente clase uploader muestra un ejemplo común de uso de transformaciones personalizadas:
Puede llevar esto más lejos y aplicar transformaciones en cadena para lograr resultados más complejos. Estas transformaciones se pueden aplicar como una transformación entrante durante la carga o como parte de las diferentes versiones que se generan perezosamente o con entusiasmo durante la carga. La siguiente clase uploader incluye dichas transformaciones en cadena aplicadas mediante el parámetro transformation del método cloudinary_transformation.
Algunos sitios web tienen un diseño gráfico que los obliga a mostrar las mismas imágenes en muchas dimensiones diferentes. Definir formalmente varias versiones de carga puede ser una molestia. Aún puede usar CarrierWave y aprovechar las transformaciones dinámicas de Cloudinary aplicando las transformaciones deseadas mientras crea su vista. Cualquier versión se puede generar dinámicamente desde su vista sin depender de las versiones de onda portadora. Para lograr esto, use el atributo full_public_id con cl_image_tag para crear direcciones URL de transformación basadas en la nube para las imágenes cargadas adjuntas a su modelo.
cl_image_tag(post.picture.full_public_id, :format => "jpg", :width => 100, :height => 200, :crop => :crop, :x => 20, :y => 30, :radius => 10)
Recorte personalizado basado en coordenadas
Si permite que los usuarios seleccionen manualmente el área de recorte, le recomendamos que mantenga las coordenadas x,y de forma persistente en el modelo para permitir diferentes recortes en la imagen original en el futuro. La siguiente clase uploader obtiene las coordenadas personalizadas de los atributos del objeto model. El método custom_crop en este ejemplo devuelve un Hash de parámetros de transformación Cloudinary adicionales para aplicar.
Si desea almacenar solo la versión recortada de la imagen, puede usar una transformación entrante. De esta manera, la imagen original no se almacena en la nube; solo la versión recortada. A continuación, puede utilizar transformaciones adicionales para cambiar el tamaño de la imagen recortada. El siguiente ejemplo llama a process :custom_crop en la clase misma (en lugar de en una ‘versión’) mientras que las coordenadas personalizadas se mantienen como atributos transitorios en el modelo (definidos con attr en lugar de almacenarlos de forma persistente).