Saltar al contenido principal

Plantillas de vista previa

Las plantillas de vista previa permiten configurar los parámetros de las imágenes que se utilizan en los atributos. Al aplicar una plantilla a un atributo del tipo "Imagen" o "Grupo de imágenes", obtendrás imágenes ajustadas al estándar especificado en la plantilla de vista previa. Esto es útil si el diseño de tu proyecto es sensible al tamaño de las imágenes. Al configurar la plantilla de vista previa, puedes modificar los parámetros de las imágenes que verá el usuario final.

Para comenzar a trabajar con las plantillas de vista previa, abre la sección "Configuraciones" y luego ve a la subsección "Plantillas de vista previa". En esta sección encontrarás una lista de las plantillas ya creadas, así como un formulario para crear nuevas.

Creación​

En el formulario de creación, indica:

  • Nombre - Cadena no única.
  • Etiqueta - Cadena única.

Después de completar, haz clic en el botón "Crear".

Configuración​

Selecciona de la lista general de plantillas de vista previa aquella que deseas configurar y haz clic en el ícono de engranaje Optimize images para entrar en modo de edición. Para crear parámetros de vista previa, haz clic en el botón "Agregar". Puedes configurar el formato para imágenes verticales, horizontales y cuadradas.

En los formularios correspondientes, completa:

  • Ancho y Alto (Lado del cuadrado) - Dimensiones en píxeles en las que se ajustará la imagen.
  • Tipo de alineación - Línea que se convertirá en el eje central al comprimir la imagen.

Plantilla predeterminada​

Después de crear varios conjuntos en una plantilla, puedes cambiar la plantilla predeterminada. Esta se utiliza para mostrar la vista previa en el CMS.

Eliminación​

Selecciona de la lista general de plantillas de vista previa aquella que deseas eliminar y haz clic en el ícono de eliminación Edit para entrar en modo de edición. Confirma la acción en el cuadro de diálogo.

LQTP​

Cada plantilla de vista previa consiste en un arreglo de dos elementos:

  • Miniatura (base64 WebP)

Formato: WebP (optimizado para carga rápida). Tamaño: no más de unos pocos cientos de bytes. Se incrusta directamente en el objeto en forma de URI base64, lo que acelera la visualización mientras se carga la imagen completa.

  • Vista previa generada La imagen principal de vista previa que reemplaza a la miniatura después de la carga completa.

Ventajas:

  • Visualización instantánea de la miniatura (sin solicitudes HTTP adicionales).
  • Transición suave a la vista previa completa después de la carga.
  • Ahorro de tráfico mediante el uso de WebP comprimido.

Ejemplo de estructura:

{
  "preview_template": [
    "data:image/webp;base64,UklGRl...", // Miniatura (base64 WebP)  
    "https://example.com/full-preview.jpg" // Vista previa completa  
  ]
}

Este enfoque mejora la experiencia del usuario, especialmente con conexiones a Internet lentas.

Puedes obtener más información sobre LQTP aquí. También puedes ver el video.