Tamaño de imágenes personalizado en la tienda

 

Entre la muchas funcionalidades que ofrece la plataforma Tiendy una de ellas es la posibilidad de personalizar al 100% el aspecto de la tienda, poniéndo a disposición del desarrollador/diseñador todos los archivos HTML, CSS, Javascript, etc.

Hoy veremos que además del conjunto de tamaños estándar que ofrece, también podemos crear nuestros propios tamaños de imagen personalizados para que se adapten al máximo a nuestro diseño o para ofrecer distintas versiones según el dispositivo desde el que se accede.

Los tamaños estándar en Tiendy

Cuando se sube la imagen de un producto, el sistema la procesa y crea varias versiones de la imagen en los siguientes tamaños:

IdentificadorTamaño en pixels (ancho x alto)
icon 32x32
thumb 50x50
small 100x100
compact 160x160
medium 240x240
large 500x500
huge 600x600
1024x1024 1024x1024
orginal Tamaño original como máximo 4472x4472

 

Mostrar la imagen de un producto en la plantilla

Para mostrar la imagen de un producto en la plantilla, se usa el filtro "product_img_url" aplicado a la imagen deseada, indicando el tamaño (identificador) para la imagen.

Por ejemplo:

<img src="{{ product.featured_image|product_img_url('large') }} alt="producto fantástico" />

De esta forma, aparecería la imagen principal del producto en el tamaño 500x500 pixels (large).

Pero también podemos mostrarla en un tamaño no estándar y como veremos, además podremos especificar la calidad con la que se genera la imagen.

Para ello usamos también el mismo filtro (product_img_url), pero en vez de proporcionar un identifcador estándar proporcionamos el tamaño y calidad de la imagen deseada siguiente el patrón:

ANCHOxALTOxCALIDAD

El parámetro calidad será un número de 0 a 100, siendo 100 la máxima calidad.

Por ejemplo:

<img src="{{ product.featured_image|product_img_url('800x650x90') }} alt="producto fantástico" />

 Mostraría la imagen en tamaño 800 pixels de ancho por 650 pixels de alto con una calidad del 90% (relación calidad/compresión del formato JPEG).

Algo importante a tener en cuenta es que el sistema no deforma la imagen al cambiarla de tamaño sino que respeta sus proporciones originales por lo que puede que la imagen resultante no sea exactamente del tamaño que le hemos especificado.

Y por supuesto no debemos olvidarnos que a mayor tamaño y calidad, mayor peso del archivo final. Debemos intentar reducir ese peso siempre que sea posible, sobretodo cuando nos dirigimos a dispositivos móviles.

 

 

Dejar un comentario…



0 Comentarios para "Tamaño de imágenes personalizado en la tienda"

Déjanos tu comentario

Dejar este campo en blanco (anti spam):

Cargando Captcha...
Si tarda mucho en cargar por favor deshabilite Adblock!