Cómo Trabajar Con Imágenes en Shopify

Cuándo se comienza con una nueva plataforma, como Shopify, hay mucho que aprender. Mientras Liquid, el lenguaje de plantilla usado en temas de Shopify, es muy legible y fácil para comenzar, un área de desarrollo de Shopify que a menudo puede causar confusión para desarrolladores de nuevos temas son las imágenes. Creo que la razón principal para ésto recae en la comprensión del "tipo" de imagen que encuentras en un tema de Shopify. En el curso de éste artículo examinaremos cada diferente tipo de imagen y cómo usarlas en un tema de Shopify.

Si eres nuevo en Liquid mi serie de tres partes te dará una sólida base y será útil mientras continuas. Si eres nuevo en Shopify puedes experimentar con cualquiera de éstas técnicas usando una tienda de desarrollo gratuita. Para crear una tienda de desarrollo registrate en el programa Shopify Partner.

Tipos de Imagen

Hay cuatro tipos de imágenes en un tema de Shopify. Trabajarás con cada una de ellas en un tema, así que es importante entender las diferencias entre ellas. Examinemos cada una:

1. Imágenes de Tema: éstas son almacenadas dentro del directorio assets de un tema y son específicas para ese tema. Éstas son generalmente añadidas al tema por un desarrollador de temas.
2. Imágenes de Producto: éstas imágenes son específicas para una tienda y subidas vía la sección de administrador (admin) de Shopify para cada producto.
3. Imágenes de Colección: una sola imagen asignada para representar una colección que es subida vía la sección de administrador (admin) de Shopify.
4. Imágenes de Artículo: una sola imagen asignada para representar un artículo de blog que es subida vía la página de edición del artículo en la sección de administrador (admin) de Shopify.

Es importante notar que las imágenes de producto, colección y artículo todas son enlazadas directamente a la tienda. Si cambias el tema de la tienda éstas imágenes se quedarán en su lugar y funcionarán con cualquier tema dado que las indique.

1. Imágenes de Tema

Comencemos por ver las imágenes de tema. Cuándo se crea un tema de Shopify puedes agregar cualquier número de imágenes, en cualquier formato y en cualquier tamaño al directorio assets dentro del directorio de tu tema. Típicamente éstas imágenes pueden usarse para fondos, sprites y elementos de marca.

Especificar éstas imágenes en un tema es muy sencillo. Asumamos que tenemos una logo.png en nuestro directorio assets; podemos sacarla en cualquier plantilla usando la siguiente sintaxis Liquid:

1

{{ 'logo.png' | asset_url | img_tag: 'Logo' }}

Éste planteamiento utiliza dos filtros Liquid para crear un elemento HTML img completamente formado. El primero, asset_url, antepone la ruta completa al directorio assets para el actual tema de la tienda. El segundo, img_tag, toma ésta y crea un elemento HTML img completo con el atributo alt. Si se omitió el atributo alt será blank. Aquí está el resultado final:

1

<img src="//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/logo.png?796" alt="Logo">

Ubicación, Ubicación, Ubicación

Notarás que el atributo src apunta al CDN (Red de Entrega de Contenidos) de Shopify. Cada imagen que agregues, sin importar su tipo, será distribuída al CDN. Ésto ayuda a asegurar la rápida entrega de las imágenes de tu tienda al cliente.

A diferencia de los archivos de imágenes de autoalojamiento, no tienes manera de saber la ubicación exacta del servidor para los archivos de tus imágenes. Por fortuna, no necesitas preocuparte de ésto pues el filtro específico de Liquid asset_url proporcionará la ruta para cuándo tu página sea renderizada.

Resumir la ruta completa del servidor a un filtro también significa que tus temas son completamente transferibles de una tienda a otra. La correcta URL queda incluída dependiendo del tema y de la tienda que se está viendo.

Añadiendo Clases al Elemento img

En el ejemplo de arriba añadimos el atributo alt vía el filtro img_tag. También es posible añadir un parámetro más que te permite agregar clases al elemento img. Aquí está nuestro código reestructurado:

1

{{ 'logo.png' | asset_url | img_tag: 'Logo', 'cssclass1 cssclass2' }}

Ésto daría el siguiente resultado:

1

<img src="//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/logo.png?796" alt="Logo" class="cssclass1 cssclass2">

Más Control

Por supuesto habrá ocasiones dónde necesites mayor control sobre tu HTML. Al omitir el filtro img_tag podemos construir nuestro marcado como deseamos.

Aquí está un planteamiento que te permitiría añadir tus propios atributos como id:

1

<img src="{{ 'logo.png' | asset_url }}" alt="Logo" class="cssclass1 cssclass2" id="logo">

Especificando Imágenes en CSS y JavaScript

Es también muy fácil usar éstos recursos en archivos CSS y JavaScript. Para hacer ésto agrega .liquid (por ejemplo styles.css.liquid) a un archivo CSS o JavaScript en tu directorio assets y especifica la imagen en tu archivo CSS, usando el mismo código Liquid que usamos arriba:

1

body { background: url({{ 'logo.png' | asset_url }}) repeat-x top left; }

Imágenes de tema son relativamente sencillas. Mientras entiendas cómo usar asset_url puedes elegir si agregar o no el filtro extra img_tag o construir el elemento img tu mismo.

Imágenes de Producto, de Colección y de Artículo

Mientras que tenemos control total sobre nuestras imágenes de tema estamos a merced de los propietarios de la tienda cuándo se trata de imágenes de producto. Afortunadamente Shopify recorre un largo camino para ayudarnos a retomar ese control. Comencemos observando qué ocurre cuándo un comerciante sube una imagen en la sección de administrador (admin) de Shopify.

Cada vez que una imagen de producto, de colección o de artículo es subida Shopify toma esa imagen y automáticamente la redimensiona en un número de tamaños predefinidos. Éstas imágenes reciben un "nombre único"  para que puedan fácilmente ser especificadas en nuestros temas.

Aquí está la lista de tamaños con sus correspondientes nombres de imagen:

Redimensionado Automático

Los valores arriba especifican las medidas "máximas" de un tamaño de imagen. Todas las imágenes redimensionadas mantendrán su relación de aspecto y serán escaladas correspondientemente.

Ésto podría significar que una imagen "mediana" tiene una anchura de 240px pero una altura de únicamente 190px y aismismo una altura de 240px pero una anchura de 80px. Es por ésta razón que la mayoría de desarrolladores de temas solicitan que sus clientes suban imágenes cuadradas pues serán más predecibles.

El tamaño de imagen "master" siempre rastreará el tamaño más grande disponible desde el servidor. Actualmente éste es 2048 x 2048px. Si subes una imagen más grande de 2048px de anchura no tendrás acceso a su forma original.

También vale la pena notar que la imagen de producto originalmente subida nuncar será escalada a un mayor tamaño. Si subes una imagen diminuta, se quedará diminuta. Claro puedes especificar la imagen al usar cualquiera de los nombres de imagen de arriba. Sin embargo, nota que si solicitas un tamaño que no fue posible crear entonces se te concederá el tamaño más cercano disponible.

También ten en cuenta que si se manipula con CSS (por ejemplo width:100%) la imagen puede escalarse hacia arriba y puede pixelarse (dependiendo de su formato). Cuándo se trabaja con clientes anímalos a subir imágenes cuadradas de alta resolución dónde sea posible.

Finalmente, vale la pena recordar que no tendremos acceso a imágenes de producto en el directorio de nuestro tema. Son almacenadas en el CDN de Shopify y quedan adjuntadas a la tienda sin importar el tema que es aplicado.

2. Mostrando Imágenes de Producto

A diferencia de las imágenes de tema, imágenes de producto no hacen uso de asset_url. Para sacar una imagen de producto podemos hacer uso del filtro de Liquid img_url. Ésto se debe al hecho de que imágenes de producto están relacionadas con la tienda y no parte de los assets o recursos del tema.

img_url retorna la URL de una imagen y acepta un tamaño de imagen como parámetro. Puede ser usada en los siguientes objetos Liquid:

• producto
• variant
• line item
• collection

Usando el filtro img_url como sigue:

1

{{ product | img_url: 'small' }} {{ variant | img_url: 'small' }} {{ line_item | img_url: 'small' }} {{ collection | img_url: 'small' }}

Cada uno de éstos retornarán la totalmente calificada URL a la imagen guardada en el CDN de Shopify.

Para demostrar veamos algún ejemplo de código Liquid desde una típica plantilla product.liquid. Como ésta plantilla particular tiene acceso a la variable product todos éstos ejemplos funcionarán. Sin embargo, nota que no funcionarán como se espera en otras plantillas.

En éste primer ejemplo el valor de image representará cada imagen en la colección y tendrá un valor diferente a través de cada iteración de nuestro bucle Liquid. Ésta variable puede nombrarse sin embargo tu ves que encaja; estoy usando image pues contextualmente tiene sentido.

1

{% for image in product.images %} <img src="{{ image | img_url: 'grande' }}"> {% endfor %}

Una vez que has estado trabajando con temas por algún tiempo podrías notar otros filtros siendo usados en relación a imágenes de producto. Aquí esán algunas alternativas que podrían ser usadas en nuestro ejemplo de arriba, cada una tendrá el mismo resultado:

1

<img src="{{ image.src | img_url: 'grande' }}"> <img src="{{ image | product_img_url: 'grande' }}">

Depende totalmente de tí cuál usar. Si prefieres un método sobre otro siempre puedes dejar un comentario usando {% comment %}...{%endcomment %} explicando tu decisión. Ésto es especialmente útil cuándo se colabora en los temas.

Mostrando imágenes de las variantes del producto

Además de imágenes de producto también es posible mostrar imágenes relacionadas con las variantes de productos. Una variante puede explicarse como una variación del producto. Digamos que tenemos una camisa con una particular impresión en ella. La camiseta puede ser verde, azul y roja. Mientras que la impresión sigue igual el color de la camiseta misma es diferente. Aún es el mismo producto, pero hemos elegido permitir al cliente escoger de entre ciertas opciones. A menudo éstas serán tamaño y color.

Las variantes también pueden tener su propio nivel de precio y de inventario. Es posible asociar una imagen particular a cada variante además a las principales imágenes de producto. Si tu tema usa imágenes de variantes puedes mostrarlas de la siguiente manera en la plantilla product.liquid:

1

{% for variant in product.variants %} {% if variant.image %} <img src="{{ variant | img_url: 'small' }}"> {% endif %} {% endfor %}

Atributo alt

Si deseas agregar el atributo alt a tu resultado puedes hacerlo como sigue:

1

{% for image in product.images %} <img src="{{ image | img_url: 'grande' }}" alt="{{ image.alt }}"> {% endfor %}

Ésto sacará el texto alt ingresado en la sección del administrador (admin) de Shopify, o blank (en blanco) si no se ingresa nada. Alternativamente, podrías hacer lo siguiente si eliges usar el filtro img_tag:

1

{{ image | img_url: 'grande' | img_tag: image.alt }}

Imágenes Destacadas

En nuestro ejemplo de arriba usamos un bucle Liquid para accesar a cada una de las imágenes asociadas con un producto en turno. Si el producto tuviera una imagen sacaríamos una imagen, si tuviera diez asociadas a ella el bucle sacaría diez imágenes.

En Shopify la primera imagen listada en la sección de administrador (admin) es también conocida como la "imagen destacada". Afortunadamente sacar la "imagen destacada" es agradable y sencillo y no requiere un bucle. Aquí está un ejemplo que funcionaría en la plantilla product.liquid:

1

<img src="{{ product.featured_image | product_img_url: 'grande' }}" alt="{{ product.featured_image.alt }}">

Como siempre hay maneras alternativas con las que puedes lograr ésto, incluyendo:

1

<img src="{{ product | img_url: 'grande' }}"> <img src="{{ product.images.first | img_url: 'grande' }}"> <img src="{{ product.images[0] | img_url: 'grande' }}">

También puedes extender la sintaxis para incluir el atributo alt en el segundo y tercer ejemplos:

1

<img src="{{ product.images.first | img_url: 'grande' }}" alt="{{ product.images.first.alt }}"> <img src="{{ product.images[0] | img_url: 'grande' }}" alt="{{ product.images[0].alt }}" >

3. Imágenes de Colección

A menudo describo una colección en Shopify como una agrupación lógica de productos. Por ejemplo podrían ser camisetas, jeans, y vestidos para una tienda de ropa. Un producto puede estar en cero, una o muchas colecciones, permitiendo una fácil ubicación de categoría y descubrimiento.

A menudo, los comerciantes querrán incluir una página en su tienda detallando todas sus colecciones disponibles. La plantilla que hace ésto posible en Shopify es list-collections.liquid. Aquí está un ejemplo de cómo puedes hacer bucle en cada colección y sacar la imagen asociada a él desde esa plantilla:

1

{% for collection in collections %} {{ collection.image | img_url: 'compact' | img_tag: alt: collection.title }} {% endfor %}

Podrías extender éste ejemplo para asegurar que pudieras enfrentar la situación dónde una imagen de colección no hubiera sido añadida:

1

{% for collection in collections %} {% if collection.image %} {{ collection.image.src | img_url: 'medium'| img_tag: collection.title }} {% else %} {{ 'collection-image-default.png' | asset_url | img_tag }} {% endif %} {% endfor %}

En ésta instancia estamos usando una imagen de tema en lugar de la imagen de colección. Ésta sólo será renderizada si no hay una imagen de colección asociada. Para que ésto funcione como quisieras necesitarás asegurar que haya una imagen titulada collection-imagen-default.png dentro del directorio assets de tu tema.

4. Imágenes de Artículo

Imágenes de artículo funcionan casi de la misma manera que imágenes de producto y de colección. Aquí está un ejemplo:

1

{% if article.image %} {{ article | img_url: 'medium' | img_tag: article.title }} {% endif %}

Si el artículo tiene una imagen asociada entonces será mostrada y se le dará el atributo alt del título del artículo. Hay pocas formas en las que imágenes de colección y de artículo pueden resultar útiles:

• Para crear una cuadrícula de imágenes en una página de lista
• Para usar como imágenes de fondo en las que puedes superponer texto

Imágenes Subidas vía "Customise Theme" (Personalizar Tema)

La pieza final del rompecabezas involucra imágenes subidas vía la opción "Personalizar Tema".

Cada tema tiene un directorio config. En él encontrarás un archivo llamado settings_schema.json. Éste archivo nos ayuda a generar una interaz de administrador que permite a los comerciantes añadir datos como texto, valores booleanos (verdadero/falso), seleccionar fuentes, subir imágenes y mucho más. Podemos definir éstos elementos de interaz usando JSON.

Para habilitar la subida de una imagen necesitas agregar un nuevo elemento al archivo settings_schema.json en el siguiente formato:

1

{ "type": "image", "id": "logo.png", "label": "Text", "max-width": 480, "max-height": 200, "info": "Text" }

Aquí está un ejemplo basado en agregar un logo para la tienda:

1

{ "type": "image", "id": "shop_logo.png", "label": "Shop logo", "max-width": 480, "max-height": 200, }

Imágenes subidas a través de la página "Personalizar Tema"son añadidas al directorio assets del tema. Como tal no las incluí como un tipo de imagen separada al inicio del artículo.

El archivo de imagen es guardado con un nombre y formato que coincide con el atributo id sin importar el nombre o formato original del archivo. Por ejemplo el archivo image.jpg sería guardado como shop_logo.png. Shopify intentará convertir el archivo subido al formato apropiado (.png) antes de guardarlo. Si Shopify no puede convertir el archivo a un archivo .png, el usuario recibirá un mensaje de error en la sección de administrador.

Notarás que el tipo de entrada es image que resulta en un botón para subir apareciendo en el navegador. También puedes especificar una altura y anchura máxima para subir una imagen usando atributos de datos. Shopify mantendrá la relación de aspecto de la imagen subida mientras la limita a esas dimensiones máximas.

Especificar imágenes agregadas vía "Personalizar Tema" se hace de la misma manera que todas las imágenes de otro tema:

1

{{ 'logo.png' | asset_url | img_tag: 'Logo' }}

Asignar Nombre Único para subir en Personalizar Tema

Una cosa que podrías desear considerar es usa el atributo id para "asignar un nombre único" a la configuración cuándo vas a subir tu tema. De ésta forma son fáciles de ubicar en el directorio assets pues estarán en un grupo. También ayuda a accidentalente sobreescribir archivos que agregas a tu tema.

A menudo uso el prefijo ct- así:

1

{ "type": "image", "id": "ct-shop_logo.png", "label": "Shop logo", "max-width": 480, "max-height": 200, }

Imágenes Cuadradas Recortadas

A mediados de 2015 Jason Bowman notó que el checkout de Shopify estaba mostrando imágenes cuadradas recortadas. Puedes leer sobre éste descubrimiento en su blog Diseño Extraño.

Las investigaciones de Jason lo llevaron a descubrir que todas las imágenes de checkout fueron agregadas con _cropped. Aquí está un ejemplo:

product-cropping-test-001_1024x1024.png

cuándo se recortan se convierten en:

product-cropping-test-001_1024x1024_cropped.png

El recorte funciona para todos los tamaños excepto para Master. Para usar imágenes recortadas agregamos _cropped a nuestro filtro img_tag. Aquí está un ejemplo para una imagen de producto destacada:

1

{{ product.featured_image | product_img_url: "medium_cropped" }}

Al momento de escribir ésto noestá documentado así que siempre hay la posibilidad de que puede cambiar, pero quería incluirlo.

Pensamientos Finales

Hemos cubierto mucho terreno en éste artículo pero ojalá te haya mostrado qué tan flexible es Shopify cuándo se trata de trabajar con imágenes en un tema.

Las imágenes son una parte integral de cualquier tienda de comercio electrónico. Entender cómo las imágenes son manejadas y manipuladas en un tema de Shopify es una parte importante de aprender Liquid y la plataforma Shopify.

Ojalá estés de acuerdo que las herramientas dentro de la plataforma Shopify y Liquid te permitan mucha flexibilidad cuándo se trate de trabajar con imágenes en tus temas.