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

Cómo manipular imágenes con el filtro img_url

A medida que Liquid va evolucionando, hay más opciones disponibles que permitirán A los desarrolladores desbloquear un nuevo potential para tus temas personizados。Los filtros de Liquid son métodos有能力的生产对象和重复的商店。

En esta publicación, veremos cómo usar el filtroimg_url(en inglés) y检查手册parámetros关于操作许可的问题imágenes关于新表情形式的问题。

米兰大会función德尔滤网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义务。También es un filter o bastante versátil,雅可思puede usar con los siguentes objects que tienen imágenes asociadas a ellos:

  • producto
  • 变体
  • Línea de artículo
  • coleccion
  • 危象
  • 画像

En esta publicación,没有生产对象的中心,过滤img_url.Aquí hay un ejemplo sencillo:

{{产品。Featured_image | img_url: '100x100'}}

在前面,在后面img_urlTiene UN parámetro de100 x100.Como veremos ahora, puedes specicialdimensiones exactas en píxeles para el ancho y alto de cualquier imagen。

También puedes encadenar el filtroimg_url控制滤镜img_tagPara generar el element completo< img >

{{产品。Featured_image | img_url: '100x100' | img_tag

新parametros

祝你平安,平安función básica滤网img_url.Hasta hace poco, no había mucho más que pudieras hacer con él。罪恶禁运,todo esto cambió julio de 2016 cuando se agregó un nujunto de parámetros que permitieron cambiar el tamaño y recortar imágenes desde tus archivos de plantilla。

连续的城市,墨西哥的山谷señalar我们的城市técnicas我们的村庄我们的村庄además deimg_url.剑:

  • product_img_url
  • collection_img_url
  • article_img_url

Usaremosimg_url我们在一起,我们在一起técnicas también我们在一起,我们在一起。

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

1.Tamano

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.他aquí un ejemplo:

{{产品。Featured_image | img_url: '450x450'}}

Ver imagen generada

De esta manera, puedes特别las维度精确en píxeles para el ancho y alto De cualquier imagen, hasta un máximo De 4472 x 4472。Si no包括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。我们在一起más我们在一起,我们在一起格兰德En vez de UN rango de píxeles específico。Estos parámetros de tamaño con nombreHan quedado obsoltos(en inglés) en favor del formato más个性化的con el que se puede usar UN número de píxeles exacto。

前方之门,请原谅,seguirán服装之门。罪恶的封锁,罪恶的束缚numérica我们控制着地球上的空间。

La relación de aspecto original de La imagen se conservará, a menos que recortes La imagen。没有什么重要的tamaño que especfiques, 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á完美。

罪恶禁运,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。在我们的世界里,我们的世界tamaño我们的世界是相称的recortes画像。

Si lo deseas, también puedes especificar solo un ancho 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í这是我们唯一的秘密:

{{产品。Featured_image | img_url: '450x'}}

Ver imagen generada

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

{{product | img_url: 'x450'}}

Ver imagen generada

Al specific 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。没有阻碍,就没有教训así。我的思念daría我的思念是完美的,我的思念是唯一的:

  1. La imagen original tiene450 pxO más ambos ejes。
  2. 安波斯拉迪恩拉米斯玛纵向。

我是你的儿子,你generará你的形象450年x450.De lo contrario, Shopify la redimensionará实用的la misma lógica que si hubieras特别独奏中音o ancho。El lado más largo gana en esta situación y se ajusta de manera比例。

¿Todavía no eres un Shopify Partner?

我们有无限的机会,我们有无限的机会,我们有无限的机会,我们有无限的机会,我们有无限的机会,我们有无限的机会,我们有无限的机会。Únete一个共同的社会和共同的社会是一个共同的国家。

Registrarme

2.Recorte

好运气,para crear cuadrados perfectos no tendrás que cargar imágenes cuadradas。我有我的需要adición我的新生命parámetro拉马多作物(recortar)。特别是un parámetro作物(记录)对质量的影响和结果的影响的巧合。一个完整的、没有其他事物的、有关事物的意象,parámetro详细的记录qué部分的、有关事物的意象mostrará。

Las opciones válidas包括:

  • 优越的
  • 先涛公司
  • 劣质
  • izquierda
  • derecha

Aquí在我们的基础上,在我们的基础上,在我们前进的道路上:

{{产品。Featured_image | img_url: '450x450', crop: 'center'}}

Ver imagen generada

3.Escala

Además维度计算,también空间计算píxeles空间计算计算parámetro空间计算。

Las dos opciones válidas儿子:

  • 2
  • 3.

简单的puedes agregar to como otro argument to al滤镜img_urlDe la siguiente manera:

{产品。Featured_image | img_url: '450x450', crop: 'center', scale: 2}}

Ver imagen generada

Esto daría como resultado una imagen redimensionada de900 x 900像素。新事物,se ampliará solo si la imagen original es lo足够大。西班牙,西班牙obtendrá una imagen con el tamaño más cercano。

4.Formato

El parámetro最后达成协议的方式。Las opciones válidas儿子:

  • jpg
  • pjpg

Aquí hay un ejemplo que公司形式:

{{产品。Featured_image | img_url: '450x450',裁剪:'center',缩放:2,格式:'pjpg'}}

Ver imagen generada

Esto daría como resultado que la image se process como un JPG progressive;这是我们想象中的景象tamaño我们想象中的景象,我们想象中的景象,我们想象中的景象。Es una excelente opción según这是必要的。

Shopify puede hacer las siguentes conversiones de formato:

  • PNG和JPG
  • PNG格式
  • JPG

无es práctico convertir un formato de imagen con pérdida como JPG a uno sin pérdida como PNG, por lo que esas converones No son可能。

También te puede interesar:乌索德imágenes适应para disminuir los tiempos de carga de la página(en单身)。

Almacenamiento en caché

最后,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(内容交付网络)。我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说。

Desbloquea imágenes adaptativas

感谢新生parámetros,感谢可能的实现者técnicas de画像adaptativa(en inglés) en tus plantillas。我与你同病相怜srcsety大小, o el element<图片>, 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。

用你的语言来表达你对世界的理解。

El Programa de Shopify Partner conecta a genententatosa 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合作伙伴

Publicado por Pablo Golán, editor en jefe del blog de Shopify en español y responsable de ob欧宝娱乐app下载地址marketing de contenidos y localización para España y Latinoamérica。Texto原始de利亚姆·格里芬.Traducción伊丽莎白·佩斯塔纳的货船。

Mapa de categorías: