El uso de recortes de imagen (
cropsen inglés) es unaen Drupal. Deja utilizar un recorte de una imagen, esto es, una
selecciónde una
área con forma rectangulardentro de la imagen. Normalmente son los propios editores quienes pueden seleccionar la parte de la imagen original a utilizar, de manera que sea un humano, y no una máquina, quien decida cuál es la parte interesante de la imagen. De esta forma, es posible subir una imagen una sola vez y usar derivados de ella de forma automática (o semi-automática, en tanto que solo se debe elegir la parte a usar de la imagen) manteniendo la parte interesante de la imagen siempre y en todo momento visible.

^{Seleccionado parte de la imagen, o sea, haciendo un
cropmanual.}

Los
cropso recortes no generan una nueva imagen por sí mismos y ni alteran de ninguna manera la imagen original. Drupal los acostumbra a llamar
manual crops, por ser recortes efectuados manualmente por un usuario.

Por otro lado, Drupal Trademark permite definir
estilos de imagen, que se pueden aplicar a las imágenes mostradas en el sitio web. Los estilos de imagen comúnmente proporcionan
miniaturasy
recortesde imágenes, pero también se pueden agregar otros
efectoscomo pasar a blanco y negro, viñetear o girar cara un color. Para ello, se crea un estilo de imagen con los efectos deseados, y después se aplica dicho estilo a las imágenes que se quiera. Por servirnos de un ejemplo, se puede configurar Drupal Trademark a fin de que use un estilo de imagen para las imágenes de un campo determinado de un nodo. Así, subamos como subamos la imagen, Drupal Trademark se encarga de formatearla según se haya configurado. Es importante tener en consideración que Drupal Trademark genera un nuevo fichero desde la imagen original, dejando la original sin modificar. Esta nueva imagen se considera regenerable, esto es, puede ser borrada y Drupal Trademark automáticamente la volverá a crear si la necesita.

^{Ejemplo de un estilo de imagen que redimensiona a 50x50.}

Ambas funcionalidades
se combinan, de forma que se pueden delimitar estilos de imágenes que utilicen los recortes del usuario como una parte de la transformación de la imagen. Por ejemplo, si tenemos un género de contenido con una imagen, y sabemos que la foto siempre y en toda circunstancia se mostrará cuadrada, lo normal es utilizar un estilo de imagen que use un recorte de imagen cuadrado para cuando se muestre la imagen.

Cómo es frecuente en Drupal Trademark, esta funcionalidad es muy flexible, mas una gran flexibilidad también acarrea una gran posibilidad de utilizarla de forma poco eficaz o bien difícil de mantener. Si nos descuidamos, podemos terminar debiendo sostener una lista larguísima de recortes (
crops) y estilos de imagen, lo que hará más ardua la tarea de edición.

Crops basados en la visualización, una mala idea

Una de las prácticas típicas consiste en crear recortes
recortes
directamente
basadosen la
visualización. O sea, crear un
croppor cada estilo de imagen para asegurar que la imagen no se deforma o bien se recorta de forma automática mostrando una parte poco interesante de la imagen original.

Por ejemplo, supongamos que tenemos una web de una tienda. Podríamos definir los próximos estilos de imagen:

• 
  product_full: para la paǵina de visualización de un producto, se usará para las imágenes del producto mostradas en carrusel, 800x600 píxeles.


• 
  product_thumbnail: también en la paǵina de visualización de un producto, para las miniaturas de las imágenes del producto en el carrusel, 200x180 píxeles.


• 
  product_teaser: para las páginas de listados de productos, búsquedas, etcétera 400x400 píxeles.


• 
  product_cart: para enseñar el producto en el carro. 180x180 píxeles.

Si proseguimos esta estrategia, se crearían
cropspor cada estilo de imagen con el tamaño de cada estilo. Esto nos llevaría a los próximos problemas:

• El número de
  cropscrece a medida que aparecen nuevos estilos de imagen. Si queremos un nuevo estilo necesitamos un nuevo estilo y un nuevo
  crop.


• El editor puede verse obligado a realizar recortes prácticamente iguales (por ejemplo,
  product_thumbnaily
  product_cart, de 200x180 y 180x180). Esto resulta aburrido y reduce la productividad del editor.


• Complica la aplicación en el
  backendya que para atenuar los problemas que pueden surgir se debe prever en qué estilos de imagen se marcha a usar cada imagen y configurarlo a nivel de campo basado en el contenido. ¿Qué pasa cuando a mitad de proyecto deseamos añadir un nuevo estilo de imagen? ¡Tenemos que recortar todo el contenido existente para este nuevo
  crop!


• La simplificación precedente no es posible cuando no utilizamos las imágenes de manera directa asociadas a un campo si no que deseamos utilizar una librería tipo Media, en tanto que entonces los recortes pertenecen a la imagen que está totalmente disociada del contenido donde se usa (como debería de ser).

Un caso práctico con este ejemplo: pongamos que se quiere añadir una funcionalidad de producto destacado, mostrando su imagen a digamos 600x600 píxeles. Dado este escenario necesitamos un estilo de imagen nuevo,
product_featured. Este estilo tendría las
mismas proporcionesque el producto en listados, pero con unas
dimensiones superiores(600x600 en lugar de 400x400), por lo que sería preciso dar de alta un
nuevo recorte(y recortar los contenidos nuevamente).

Separar el recorte de los estilos dónde se usa, una buena idea

El inconveniente esencial de la aproximación anterior es que se asocia cada
cropcon el estilo de imagen donde se usa dicho recorte. De esa relación directa es de donde surgen todos los inconvenientes. La solución es separarlos. ¿Cómo? Muy fácil,
usando
cropsgenéricos basados en el ratio y no en las dimensiones. Una imagen original puede tener cualquier ratio (puede ser más bien cuadrada, o bien apaisada, vertical, etc., pero cuando deseamos mostrarla en un hueco con un ratio determinado utilizamos un recorte para señalar qué parte de la imagen es la interesante para ese ratio específico. Pero esto no guarda relación con su tamaño, solo con el ratio (la relación entre alto y ancho).

Es decir, por un lado tenemos los
recortesde imágenes basados en ratios de alto por ancho (cuanto más estándares mejor, 16:9, 1:1, 2:1, etc.. Para producir hay que obviar las dimensiones finales de donde quiera que se pretenda utilizar, solo hay que tomar en consideración el
ratio. De esta forma si mantenemos el número de ratios posibles al mínimo, el número de recortes que tendrá que elegir un editor será menor y más fácilmente reutilizable en otras áreas de la web. ¿Por qué no emplear exactamente el mismo recorte para el producto en el carrito y para las miniaturas si las dos se aproximan a 1:1? Aquí es esencial
cuestionar los diseños que recibamosy no complicar el
backendcon infinitos
presetscon variaciones leves de pocos píxeles. ¡Utilicemos ratios de imagen!

Por otro están los
estilosde imágenes que sí se generan pensando de manera directa y completa en la visualización. Su objetivo no es la selección del área sino optimizar la imagen al formato que se va a visualizar, ahorrando ancho de banda y mejorando en consecuencia la sensación del usuario (debido a una mejor velocidad de descarga y menor consumo de datos), así como su adaptación a dispositivos con doble densidad de pantalla. Estos estilos tendrán en cuenta el
ratiode visualización (16:9, 3:2, 1:1)y las
dimensiones finales. Para esto, al configurar el estilo de imagen, se incluye por un lado el
cropo recorte utilizado, que marcará el ratio de visualización, y por otro unas dimensiones finales (así sea indicando las dos, que deberán ser coherentes con el ratio, o bien marcando solo una de las dimensiones y dejando que la otra se calcule automáticamente en función del ratio).

¿Por qué es una estrategia flexible y escalable?

1. Permite el empleo de un
   mismo recorte en diferentes estilosde imagen (
   teaser, contenido completo, miniatura, etc..


2. 
   No condiciona el recorte según dónde se usa.
   


3. Permite el
   ajustede las
   dimensiones finalesdel estilo sin rehacer el recorte, lo que implica un reajuste manual (siempre que sostengan exactamente el mismo ratio).


4. 
   Evita la pérdida de recortes en contenido existentetras el ajuste o bien refactorización del diseño (siempre que mantengan exactamente el mismo ratio).


5. 
   Fuerzael uso de imágenes basadas en
   ratios reutilizables, algo que evita una dificultad muchas veces superflua.


6. Los
   recortesquedan
   asociadosa la entidad
   Media(no al contenido como versiones anteriores de Drupal Trademark) con lo que al reutilizarla, también se reutilizan los recortes ya efectuados, evitando tener que regresar a realizar otro recorte para el nuevo uso.


7. Se
   evitatener un
   listado infinito de recortes.


8. Si en un evolutivo se decide que el listado de productos (estilo
   product_teaser) ya no usa el ratio 1:1 si no el 3:2, tan sólo necesitamos actualizar el preset puesto que los recortes ya existirán y no implicará acción alguna por la parte de los editores (siempre y cuando ese ratio estuviera dado de alta anteriormente).

Un sitio apropiadamente estructurado en general no debería de usar más de tres-5 ratios diferentes. Ejemplos:

• 1:1 (
  cuadrado)


• 3:2 (
  foto)


• 16:9 (
  video)


• 
  Otros: Cabecera panorámica, verticales, etc.
  

Es
importantereforzar que un recorte de una imagen es el
mejor encuadrepara un ratio determinado (
cuadrado 1:1, vídeo 16:9, fotografía 3:2, etc). Caso de que se necesite para una misma foto usar un recorte diferente siempre y en toda circunstancia es posible subir la foto nuevamente a la librería de imágenes con un nombre diferente que claramente indique que esa fotografía tiene otro encuadre.

Media Library está pensado para reutilizar, reutilicemos los recursos: imagen, título, propiedades y
recortes.

Tamaño de recorte mínimo

Podemos tener un inconveniente con esta estrategia. Al no fijar mínimo en el recorte, los plataforma ecommerce magento pueden
seleccionarun
áreademasiado
pequeñadentro de la imagen. agencia de marketing nutricional ía que la imagen resultante en la
visualizaciónaparezca
aumentaday pixelada. Esto se puede solucionar fácilmente de las siguientes maneras:

1. Fijando unas
   dimensiones
   mínimasen el recorte (
   soft limiten la configuración del efecto del recorte para sencillamente dar un aviso si se selecciona una área de menor tamaño, o bien
   hard limitsi queremos impedir que se elige un área demasiado pequeña).
   
   


2. Estableciendo la
   resolución mínima de imagenen la configuración del
   campode la entidad media.


3. Añadiendo una
   descripciónen los campos de tipo referencia a media o bien en el campo imagen en la entidad media con las
   resolucionesde los
   recortes
   recomendadas.

Al igual que otros campos de la página web, los editores tienen la capacidad de previsualizar el resultado de un nodo antes de publicarlo, de forma que en caso de que utilicen imágenes de baja resolución pueden darse cuenta y usar un recurso de mejor resolución.

¿Cómo incorporamos la solución de recortes basados en ratio?

Lo primero es tener instalados los módulos que vamos a necesitar:

Usaremos el módulo Media para las imágenes, así como Entity Browser, Media Entity Browser y Inline Entity Form. Esto nos permite tener una biblioteca de imágenes, mas sobre todo asociar los recortes a entidades de tipo Media (que serán en este caso imágenes), de forma que toda vez que se use una imagen de la biblioteca tendrá los mismos recortes asociados: basta con elegir una sola vez el recorte por cada imagen.

Para que los editores puedan elegir áreas para los recortes usaremos Image Widget Crop (así como Crop API, claro). Por último, los módulos Breakpoint y Adaptable Image nos servirán para detallar diferentes estilos de imagen en función de la densidad de pantalla del usuario.

Siguiendo con el ejemplo anterior de la tienda, supongamos que queremos usar esta estrategia para imágenes con ratio 1:1. Hay dos imágenes que se visualizan con este ratio: el producto en el carro, y el
teaserdel producto.

Lo primero sería crear un recorte de ratio 1:1. Para esto vamos a
/admin/config/media/cropy añadimos un nuevo
cropcon el nombre «1:1» y el campo «Aspect Ratio» a 1:1.

A continuación, desde
/admin/config/media/image-styles,crearíamos dos estilos de imagen, uno para cada visualización. Primero el producto en el carro, con el estilo
product_cart. Basta con añadir como efectos el recorte manual que hemos creado previamente y un escalado para adaptarlo al tamaño preciso de visualización:

Y después añadimos el estilo de imagen para el producto en cuando se visualiza en
teasers. El estilo de imagen es igual pero en este caso se escala a otras dimensiones.

En en el caso de que se quieran optimizar los estilos para pantallas de doble densidad, se tendría que dar de alta otro estilo por cada visualización alterando el escalado al doble del anterior (pero lógicamente el recorte seguiría siendo el mismo). Por ejemplo, el producto en el carro pasaría de un escalado a 180x180 a un escalado de 360x360. Además, en el formateador se deberá hacer uso del proporcionado por el módulo Breakpoint «Imagen adaptable». El estilo de imagen acomodable se daría de alta desde
/admin/config/media/responsive-image-style(esto lo provee el módulo Responsive Image).

Por último, notar que cuando se añade el efecto de escalado y recortado podemos indicar como es la zona por defecto a recortar. En caso de que no se realice recorte manual, al aplicar el estilo de imagen Drupal Trademark usa esta información para hacer el recorte automático.

^{Configuración del efecto de escalado y recorte de un estilo de imagen, eligiendo la parte superior como la parte a preservar durante el recorte automático.}

Esto es singularmente útil para imágenes con personas en tanto que evitaremos cortar las cabezas si dejamos el recorte a Drupal Trademark de forma automática.

Conclusión

Nuestra recomendación para los recortes manuales y los estilos de imagen se puede resumir en:

• Trata de estandarizar los tamaños de visualización de las imágenes a un conjunto reducido de ratios.


• Configura recortes manuales para cada ratio utilizado sin asociar de forma directa los recortes con estilos de imagen. O sea, aparta los recortes que utilices de las visualizaciones del lugar.


• Configura los estilos de imagen para usar los ratios que has creado, utilizando el efecto de
  manual cropy el escalado y recortado.