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 filtroimg_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 filtroimg_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 filtroimg_url. Aquí hay un ejemplo sencillo:
{{ product.featured_image | img_url: '100x100' }}En el ejemplo anterior, el filtroimg_urltiene un parámetro de100x100. Como veremos ahora, puedes especificar las dimensiones exactas en píxeles para el ancho y alto de cualquier imagen.
También puedes encadenar el filtroimg_urlcon el filtroimg_tagpara generar el elemento completo:
{{ product.featured_image | img_url: '100x100' | img_tag }}Nuevos parámetros
Hasta ahora, hemos analizado la función básica del filtroimg_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 deimg_url. A saber:
product_img_urlcollection_img_urlarticle_img_url
Usaremosimg_urlen 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, aimg_url. He aquí un ejemplo:
{{ product.featured_image | img_url: '450x450' }}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, comograndeen vez de un rango de píxeles específico. Estos parámetros de tamaño con nombrehan 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 querecortesla 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' }}Del mismo modo, si se especifica solo el alto se vería así:
{{ product | img_url: 'x450' }}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 de450 x 450de 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:
- La imagen original tiene450 pxo más en ambos ejes.
- Ambos lados tienen la misma longitud.
Si ambas condiciones son verdaderas, se generará una imagen cuadrada de450x450. 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.
¿Todavía no eres un Shopify Partner?
Con oportunidades de ingresos e infinidad de recursos de los que puedes aprender, convertirte en un Shopify Partner es tu oportunidad de trabajar con los clientes para crear soluciones comerciales y aumentar tu experiencia. Únete a una comunidad de emprendedores y comienza hoy a construir tu negocio.
Registrarme2. 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 llamadocrop(recortar). Especifica un parámetrocrop(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' }}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 filtroimg_urlde la siguiente manera:
{ product.featured_image | img_url: '450x450', crop: 'center', scale: 2 }}Esto daría como resultado una imagen redimensionada de900 x 900pí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 parametro最后,你能去中es El格式o. 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' }}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 deimagen adaptativa(en inglés) en tus plantillas. Si deseas comenzar a usar los atributossrcsetysizes, o el elemento
Utiliza tus conocimientos para ayudar a emprendedores de todo el mundo.
El Programa de Shopify Partner conecta a gente talentosa como tú con más de 1 millón de emprendedores en todo el mundo. Genera ingresos ayudándolos a diseñar tiendas virtuales, tomando fotografías de productos o desarrollando una app.
Obtén más información sobre el Programa de Shopify Partner¿ Tienes una idea de negocio?
Comienza a usar Shopify gratis, sin necesidad de ingresar los datos de tu tarjeta de crédito
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 deLiam Griffin. Traducción a cargo de Elizabeth Pestana.