Documentación Bootic

Todo la información para empezar a vender en línea.

Control avanzado de imágenes

Además de los tamaños predefinidos, puedes asignar dimensiones personalizadas a imágenes de productos usando el filtro resize.

<img src="{{ image | resize: '100x100#c' }}" alt="{{ product.model }}" />

El ejemplo anterior crea un cuadrado de 100x100 px, centrado, a partir de la imagen de un producto.

La lista de geometrías de imagen reconocidas por resize es:

  • '400x300': tamaño personalizado, mantiene proporciones.
  • '400x300!': fuerza tamaño, no mantiene proporciones.
  • '400x': ancho personalizado, mantiene proporciones.
  • 'x300': alto personalizado, mantiene proporciones.
  • '400x300>': modifica tamaño sólo si imagen es más grande que esto
  • '400x300<': modifica tamaño sólo si imagen es más pequeña que esto
  • '50x50%': modifica alto y ancho al %50
  • '400x300^': modifica ancho, alto a mínimo 400x300. Mantiene proporciones.
  • '2000@': modifica para que area máxima sea 2000 pixeles
  • '400x300#': modifica, recorta si es necesario para mantener proporciones. Centra.
  • '400x300#ne': modifica, recorta si es necesario para mantener proporciones. Ajusta arriba, derecha.
  • '400x300#nw': modifica, recorta si es necesario para mantener proporciones. Ajusta arriba, izquierda.
  • '400x300#se': modifica, recorta si es necesario para mantener proporciones. Ajusta abajo, derecha.
  • '400x300#sw': modifica, recorta si es necesario para mantener proporciones. Ajusta abajo, izquierda.
  • '400x300+50+100': recorta desde el punto 50, 100 con ancho y alto de 400x300

Imágenes de productos en tono de grises (blanco y negro)

Puedes usar el filtro greyscale para transformar la imagen a blanco y negro.

<img src="{{ image | resize: '100x100#c' | greyscale }}" alt="{{ product.model }}" />

El orden no importa:

<img src="{{ image | greyscale | resize: '100x100#c' }}" alt="{{ product.model }}" />

Si usas greyscale sin el filtro resize, la imagen retornada tiene dimensiones por defecto de '240x180'.

<img src="{{ image | greyscale }}" alt="{{ product.model }}" />

Crea tu tienda hoy mismo. Sin compromisos. Ver planes