¿Qué es Cloudinary?

Quizá te estés preguntando: «Otro proveedor de almacenamiento… ¿para qué necesito otro?». Pues bien, Cloudinary no es un proveedor de almacenamiento cualquiera. Es cierto que puede almacenar todos tus archivos en la «nube», igual que Amazon S3 y el proveedor Azure File Storage. Pero lo que hace que Cloudinary sea especial es lo que puede hacer para transformar tus archivos en el momento de cargarlos. ¿Te interesa…? ¡Pues sigue leyendo!

Cloudinary destaca especialmente en el ámbito de las imágenes. Una vez que subes una imagen a Cloudinary, puedes recuperarla aplicando cientos de filtros y transformaciones diferentes. Por ejemplo, permite:

• Cambia el tamaño de tu imagen
• Aplicar filtros de color
• Comprime tus imágenes (a menos que seas muy meticuloso, la mayoría de los archivos que subas a tu página web se pueden comprimir hasta un 60 % sin perder calidad)
• Desenfoca la imagen
• Crear miniaturas
• Girar / Voltear
• Superposiciones de texto
• Y muchos, muchos más...

Pero las palabras no valen nada. Echa un vistazo a su página de demostración para obtener más detalles: https://demo.cloudinary.com/?mode=default

También puedes crear una cuenta gratuita, lo que te permite almacenar 75 000 archivos y aplicar 7 500 transformaciones al mes.

¡Pero eso no es todo! Además de las imágenes, Cloudinary también puede hacer cosas muy interesantes con los archivos. Por ejemplo, puede crear miniaturas de imágenes a partir de archivos PDF.

Para que toda esta magia resulte un poco más fácil, incluso hemos incluido un conjunto de filtros de Lava que te ayudarán a simplificar las transformaciones. ¡Más sobre esto más adelante!

Instalación y configuración

Configuración de la cuenta de Cloudinary

Las organizaciones sin ánimo de lucro que cumplan los requisitos pueden beneficiarse de un descuento significativo en todos los planes de Cloudinary. Para más información, consulta https://cloudinary.com/solutions/industries/cloudinary-for-nonprofits. Para los clientes actuales de Cloudinary, la mejor forma de beneficiarse del descuento es ponerse en contacto con el servicio de asistencia de Cloudinary a través de https://support.cloudinary.com/hc/en-us/requests/new y dejar en blanco el campo «Cloud Name».

Configuración del proveedor de almacenamiento

Una vez instalado este paquete, verás un nuevo proveedor de almacenamiento en «Herramientas de administración > Configuración del sistema > Proveedores de almacenamiento de archivos» llamado «Cloudinary Blob Storage». Este nuevo proveedor está inactivo, ya que requiere una configuración adicional.

Para configurar este proveedor, necesitarás tres datos de tu cuenta de Cloudinary: el nombre de la nube, la clave API y el secreto API. Los encontrarás en «Configuración > Seguridad» en tu cuenta de Cloudinary. Una vez que los hayas encontrado, introdúcelos en la configuración del proveedor «Cloudinary Blob Storage».

Configuración del tipo de archivo binario

Ahora que ya tienes configurado tu proveedor de almacenamiento, puedes configurar los tipos de archivo para que lo utilicen. Para configurar un nuevo tipo de archivo, ve a «Herramientas de administración > Configuración general > Tipos de archivo». Al añadir el nuevo tipo de archivo, deberás tener en cuenta tres nuevos ajustes.

1. Tipo de almacenamiento: Selecciona «Cloudinary Storage».
2. Nombre de la carpeta: El nombre de la carpeta que deseas utilizar.
3. Transformación con nombre para la subida: la transformación con nombre que se aplicará a todos los archivos subidos. Déjalo en blanco para guardar el archivo original sin modificaciones. Las transformaciones con nombre se pueden definir en el panel de administración de Cloudinary.

Una vez que hayas configurado los tipos de archivo, ya estarás listo para configurar tus atributos y utilizarlos igual que lo harías con cualquier otro proveedor de almacenamiento.

Configuración de la cuenta de Cloudinary

Poder guardar tus archivos en carpetas según su tipo te hace sentir como un gurú de la organización. Por desgracia, de forma predeterminada tendrás que crear las carpetas en Cloudinary manualmente antes de poder subir los archivos, a menos que actives la opción «Crear carpetas automáticamente» en tu cuenta. Puedes hacerlo en «Configuración > Subida». Una vez activada, las carpetas que configures en Rock se crearán automáticamente en Cloudinary (¿a que mola? Nos preguntamos por qué no es la opción predeterminada).

Uso de Cloudinary

Aplicación de transformaciones de Cloudinary

Ya estás listo para subir imágenes y documentos y aplicarles transformaciones. Las transformaciones se aplican utilizando pequeños comandos en la URL para recuperar las imágenes. Aunque proporcionamos algunos filtros de Lava para simplificar el proceso, tendrás que introducir los códigos de transformación. La mejor forma de hacerlo es utilizar el explorador de transformaciones de tu cuenta de Cloudinary. Solo tienes que hacer clic en «Editar» en una imagen de la «Biblioteca multimedia» y seleccionar las transformaciones que desees aplicar.

A medida que apliques transformaciones, la URL se actualizará para incluir el código de transformación. El código de transformación se puede utilizar en Lava.

Bien, ahora que ya tienes el código de transformación, veamos cómo podemos utilizarlo en Lava. Para ello, veamos una plantilla básica de Lava para visualizar imágenes de un canal de contenido.

En primer lugar, veamos el formato típico de Lava para las imágenes de los anuncios del canal de contenido «Web Ad».

{% for item in Items %}
    {{ item | Attribute: 'Image' }}
{% endfor %}

Probablemente te hayas dado cuenta de que el valor formateado de un atributo «Image» es una etiqueta HTML de imagen. Eso no nos sirve, ya que necesitamos modificar un poco la URL de la imagen. Así que, en su lugar, utilizarás lo siguiente:

{% for item in Items %}
    <img src="{{ item | Attribute: 'Image','Object' | CloudinaryTransform: 'c_scale,h_200,q_100,r_15' }}" />
{% endfor %}

Fíjate en que aquí obtenemos el valor del objeto del atributo «Image» y lo pasamos al filtro Lava «CloudinaryTransform» junto con el código de transformación. Algunos detalles sobre este filtro Lava:

• Puedes proporcionar el objeto `BinaryFile` completo (como hemos hecho anteriormente) o simplemente la propiedad `Path` del objeto `BinaryFile`. Cualquiera de las dos opciones te servirá.
• Puede que en alguna ocasión tengas que recorrer una colección de elementos de canal en la que algunas de las imágenes no se hayan subido a Cloudinary. ¡No te preocupes! El filtro «CloudinaryTransform» funcionará correctamente con archivos subidos a través de otros proveedores de almacenamiento, pero las transformaciones no se aplicarán.

Visualización de miniaturas de documentos

El proveedor de almacenamiento Cloudinary también puede ayudarte a crear miniaturas a partir de documentos (nota: lee la documentación de Cloudinary sobre los formatos de archivo compatibles sin costes adicionales; solo se admiten archivos PDF).

Supongamos que has subido un archivo PDF y ahora quieres mostrar una miniatura del mismo. Es tan fácil como:

{% assign document = item | Attribute: 'Document','Object' %}
<img src="{{ document | CloudinaryDocumentConvert: 'jpg' }}" />

Resultados

(A diferencia del filtro «Lava» de transformación de imágenes, CloudinaryDocumentConvert sí requiere el objeto BinaryFile completo)

Vale, eso está bien, pero la imagen es bastante grande. No hay problema… puedes introducir códigos de transformación en la conversión de esta forma:

{% assign document = item | Attribute: 'Document','Object' %}
<img src="{{ document | CloudinaryDocumentConvert:'jpg','w_200' }}" />

Resultados

¡Genial! ¡Ahora sí que estamos en marcha! Pero imagina que quieres miniaturas de todas las páginas del PDF. No te preocupes, lo tenemos solucionado. Cuando se sube el archivo PDF, Cloudinary devuelve el número de páginas que tiene. Nosotros lo guardamos por ti para que puedas hacer algo como esto:

{% assign document = item | Attribute: 'Document','Object' %}
{% assign pageCount = document | CloudinaryDocumentPageCount %}
{% for i in (1..pageCount) %}
    <a href="{{ document.Path }}">
         <img src="{{ document | CloudinaryDocumentConvert:'jpg','w_200', i}}" style="border: 1px solid
             #ddd; margin-right: 6px;" />
     </a>
{% endfor %}

Resultados

Notas que debes tener en cuenta

Aquí tienes un par de cosas que debes saber:

• Como hemos mencionado anteriormente, al subir un PDF, Cloudinary muestra el número de páginas. Esto no ocurre con otros tipos de documentos.
• Cuando Cloudinary recibe tu solicitud de transformación, procesa tu imagen en tiempo real y, a continuación, almacena el resultado en caché en un archivo, de modo que la próxima vez que la solicites con los mismos parámetros, se te devolverá la imagen almacenada en caché.