¿Cómo manipular imágenes con el filtro "img_url"?

Te explicamos cómo usar el filtro img_url y examinamos los parámetros que se agregaron recientemente y que te permiten manipular imágenes dentro de Shopify de formas nuevas y emocionantes.

A medida que Liquid va evolucionando, hay más opciones disponibles que permitirán a los desarrolladores desbloquear un nuevo potencial para tus temas personalizados. Los filtros de Liquid son métodos sencillos pero potentes para producir objetos y recursos en una tienda Shopify.

En esta publicación, veremos cómo usar el filtro img_url  (en inglés) y examinaremos los parámetros que se agregaron recientemente y que te permiten manipular imágenes dentro de Shopify de formas nuevas y emocionantes.

Comencemos mirando la función del filtro img_url. En su forma básica, devolverá la URL de una imagen. Para hacer esto, debes pasar a un parámetro de tamaño obligatorio. También es un filtro bastante versátil, ya que se puede usar con los siguientes objetos que tienen imágenes asociadas a ellos:

• producto
• variante
• línea de artículo
• colección
• artículo
• imagen

En esta publicación, nos centraremos en usar el objeto del producto, con el filtro img_url. Aquí hay un ejemplo sencillo:

{{ product.featured_image | img_url: '100x100' }}

En el ejemplo anterior, el filtro img_url tiene un parámetro de  100x100. Como veremos ahora, puedes especificar las dimensiones exactas en píxeles para el ancho y alto de cualquier imagen.

También puedes encadenar el filtro img_url con el filtro img_tag para generar el elemento completo <img>:

{{ product.featured_image | img_url: '100x100' | img_tag }}

Nuevos parámetros

Hasta ahora, hemos analizado la función básica del filtro img_url. Hasta hace poco, no había mucho más que pudieras hacer con él. Sin embargo, todo esto cambió en julio de 2016 cuando se agregó un nuevo conjunto de parámetros que permitieron cambiar el tamaño y recortar imágenes desde tus archivos de plantilla.

Antes de continuar, vale la pena señalar que las siguientes técnicas se pueden usar con una gama de filtros además de img_url. A saber:

• product_img_url
• collection_img_url
• article_img_url

Usaremos img_url en los ejemplos siguientes, pero queremos resaltar que las técnicas también funcionan con otros tres filtros.

También te puede interesar: URL canónicas ¿Qué son y por qué son importantes?

1. Tamaño

Comencemos por cómo podemos cambiar el tamaño de una imagen. Para hacer esto, asignamos un valor numérico, con un tamaño específico en píxeles, a img_url. He aquí un ejemplo:

{{ product.featured_image | img_url: '450x450' }}

Ver imagen generada

De esta manera, puedes especificar las dimensiones exactas en píxeles para el ancho y alto de cualquier imagen, hasta un máximo de 4472 x 4472. Si no incluyes un tamaño de imagen, el filtro devuelve una imagen pequeña (100 x 100).

En lugar de usar un tamaño de imagen numérico, algunos temas antiguos usan un tamaño con un nombre como parámetro para img_url. Es por eso que, en temas más antiguos, es posible que veas un nombre, como grande en vez de un rango de píxeles específico. Estos parámetros de tamaño con nombre han quedado obsoletos (en inglés) en favor del formato más personalizable con el que se puede usar un número de píxeles exacto.

Aquellos con "nombres" que mencionamos anteriormente, por supuesto, seguirán funcionando como de costumbre. Sin embargo, el uso de la sintaxis numérica ahora te permite controlar las dimensiones de la imagen en un clic.

La relación de aspecto original de la imagen se conservará, a menos que recortes la imagen. No importa el tamaño que especifiques, una imagen nunca puede cambiar su tamaño para que sea más grande que sus dimensiones originales. En este caso, la imagen no será mayor que 450 x 450 píxeles. Si subes una imagen cuadrada, se redimensionará perfectamente.

Sin embargo, si tu imagen original es más larga en un lado que del otro, Shopify cambiará el tamaño proporcionalmente para que el lado más largo tenga 450 píxeles. En otras palabras, todo el cambio de tamaño es proporcional a menos que  recortes la imagen.

Si lo deseas, también puedes especificar solo un ancho o solo un alto, y Shopify calculará la otra dimensión en función del tamaño de la imagen original, manteniendo la relación de aspecto de la imagen original. Aquí hay un ejemplo cuando se especifica solo un ancho:

{{ product.featured_image | img_url: '450x' }}

Ver imagen generada

Del mismo modo, si se especifica solo el alto se vería así:

{{ product | img_url: 'x450' }}

Ver imagen generada

Al especificar solo un valor único, Shopify calculará la otra dimensión en función del tamaño de la imagen original, manteniendo intacta la relación de aspecto de la imagen original.

Volviendo a nuestro ejemplo original, puedes pensar que se obtendría como resultado una versión de 450 x 450 de tu imagen. No obstante, esto no siempre es así. Esta solicitud daría como resultado un cuadrado perfecto, solo si se cumplen las dos condiciones siguientes:

1. La imagen original tiene 450 px o más en ambos ejes.
2. Ambos lados tienen la misma longitud.

Si ambas condiciones son verdaderas, se generará una imagen cuadrada de  450x450. De lo contrario, Shopify la redimensionará utilizando la misma lógica que si hubieras especificado solo alto o ancho. El lado más largo gana en esta situación y se ajusta de manera proporcional.

2. Recorte

Afortunadamente, para crear cuadrados perfectos no tendrás que cargar imágenes cuadradas. Todo lo que se requiere es la adición de otro nuevo parámetro llamado crop (recortar). Especifica un parámetro crop (de recorte) para garantizar que las dimensiones de la imagen resultante coincidan con las dimensiones solicitadas. Si la imagen completa no se ajusta a las dimensiones solicitadas, el parámetro de recorte especifica qué parte de la imagen se mostrará.

Las opciones válidas incluyen:

• superior
• centro
• inferior
• izquierda
• derecha

Aquí hay un ejemplo que se basa en el que mostramos anteriormente:

{{ product.featured_image | img_url: '450x450', crop: 'center' }}

Ver imagen generada

3. Escala

Además de las dimensiones, también podemos solicitar una densidad de píxeles determinada utilizando el parámetro de escala.

Las dos opciones válidas son:

• 2
• 3

Simplemente puedes agregar esto como otro argumento al filtro img_url de la siguiente manera:

{ product.featured_image | img_url: '450x450', crop: 'center', scale: 2 }}

Ver imagen generada

Esto daría como resultado una imagen redimensionada de 900 x 900 píxeles. Nuevamente, se ampliará solo si la imagen original es lo suficientemente grande. Si no es el caso, se obtendrá una imagen con el tamaño más cercano.

4. Formato

El parámetro final que puedes agregar es el formato. Las opciones válidas son:

• jpg
• pjpg

Aquí hay un ejemplo que incorpora el formato:

{{ product.featured_image | img_url: '450x450', crop: 'center', scale: 2, format: 'pjpg' }}

Ver imagen generada

Esto daría como resultado que la imagen se procese como un JPG progresivo; estas se cargan como una imagen de tamaño completo con una calidad de aumento creciente, en lugar de una carga de arriba a abajo. Es una excelente opción según tus necesidades.

Shopify puede hacer las siguientes conversiones de formato:

• PNG a JPG
• PNG a PJPG
• JPG a PJPG

No es práctico convertir un formato de imagen con pérdida como JPG a uno sin pérdida como PNG, por lo que esas conversiones no son posibles.

También te puede interesar: Uso de imágenes adaptativas para disminuir los tiempos de carga de la página (en inglés).

Almacenamiento en caché

Finalmente, vale la pena señalar que una vez que se haya creado la imagen solicitada, se almacenará en caché y estará disponible en Shopify CDN (Content Delivery Network). Por lo tanto, no debes preocuparte por la imagen que se cree cada vez que se muestre tu plantilla.

Desbloquea imágenes adaptativas

Gracias a estos nuevos parámetros, ahora es posible implementar técnicas de imagen adaptativa (en inglés) en tus plantillas. Si deseas comenzar a usar los atributos srcset y sizes, o el elemento <picture>, puedes comenzar a ofrecer la imagen más adecuada según el tamaño de la pantalla, la resolución y el ancho de banda.

Publicado por Pablo Golán, editor en jefe del blog de Shopify en español y responsable de marketing de contenidos y localización para España y Latinoamérica. Texto original de Liam Griffin. Traducción a cargo de Elizabeth Pestana.