Las imágenes de una plantilla de Slides pueden permanecer iguales en todos los documentos generados o sustituirse automáticamente por imágenes almacenadas en Ezus.
Este artículo explica cómo utilizar variables de imagen dinámicas y elegir el comportamiento de imagen adecuado según el tipo de imagen que quieras mostrar.
Imágenes estáticas vs. imágenes dinámicas
Antes de añadir una imagen a tu plantilla, determina si debe ser estática o dinámica.
Las imágenes estáticas permanecen iguales cada vez que se genera el documento. Utilízalas para elementos como:
Imágenes de fondo
Elementos decorativos
Elementos de marca fijos
Imágenes que no deben depender del proyecto
Las imágenes dinámicas proceden de la información almacenada en Ezus y cambian según el proyecto utilizado para generar el documento.
Pueden recuperar imágenes asociadas a información como:
Alojamientos
Actividades
Productos
Destinos
Viajeros
Clientes
Por ejemplo:
$$client.logo$$
recupera el logotipo asociado al cliente, mientras que:
$$days.1.images.1$$
recupera la primera imagen asociada al Día 1.
💡 Utiliza una variable de imagen dinámica siempre que la imagen deba adaptarse automáticamente al proyecto que se está generando.
Añadir una variable de imagen dinámica
Para añadir una imagen dinámica:
Crea un contenedor de imagen en tu plantilla de Slides.
Asegúrate de que el contenedor sea cuadrado.
Abre el Variable Drawer.
Busca la variable de imagen correspondiente a la información que quieres mostrar.
Inserta la variable en el contenedor de imagen.
Elige el comportamiento de imagen adecuado: estándar,
cropocenter.Genera el documento y comprueba el resultado.
⚠️ Las imágenes dinámicas deben utilizar un contenedor de imagen cuadrado. Una imagen puede verse correctamente mientras editas la plantilla, pero mostrarse de forma incorrecta en el documento generado si su contenedor no es cuadrado.
Elegir el comportamiento de imagen adecuado
Puedes utilizar la variable de imagen estándar o añadir crop o center según cómo quieras que aparezca la imagen.
Utiliza crop para fotografías y diseños visuales
Para fotografías, recomendamos utilizar:
[crop]
Por ejemplo:
$$client.logo.[crop]$$
La imagen ocupa toda el área disponible y se recorta cuando es necesario para adaptarse a su forma.
Esto resulta especialmente útil para:
Fotografías de alojamientos
Fotografías de destinos
Fotografías de actividades
Otro contenido visual en el que llenar completamente el área de la imagen sea más importante que mostrar todas las partes de la imagen original
💡 crop suele ser la mejor opción para fotografías, especialmente cuando las imágenes de origen tienen diferentes proporciones.
Utiliza center cuando la imagen completa deba permanecer visible
Utiliza:
[center]
cuando el recorte pueda eliminar partes importantes de la imagen.
Por ejemplo:
$$client.logo.[center]$$
La imagen completa permanece visible y centrada dentro del área disponible.
Esto resulta especialmente útil para:
Logotipos
Gráficos que contienen texto
Imágenes cuyos bordes contienen información importante
Utiliza la variable de imagen estándar para un uso general
En general, también puedes utilizar la variable de imagen estándar sin añadir ningún modificador de imagen.
Por ejemplo:
$$client.logo$$
o:
$$days.1.images.1$$
Esto utiliza el comportamiento de imagen estándar configurado para la imagen.
Uso | Sintaxis recomendada |
Uso General |
|
Fotografía / llenar el área disponible |
|
Logotipo / mantener visible la imagen completa |
|
Comprueba la imagen generada
Genera siempre el documento después de añadir o modificar una variable de imagen.
Comprueba que:
Se muestre la imagen esperada.
La imagen se ajuste al área prevista.
No se haya recortado contenido importante.
El resultado siga siendo adecuado con imágenes de diferentes proporciones.
Si el resultado no es adecuado, prueba a cambiar entre la variable estándar, crop y center según el tipo de imagen.
💡 Siempre que sea posible, prueba la plantilla con varios proyectos. Las imágenes cargadas en Ezus pueden tener diferentes dimensiones y proporciones, por lo que probar una sola imagen puede no mostrar cómo se comportará el diseño en otros proyectos.
⚠️ Los modificadores de imagen de Slides, como [crop] y [center], no funcionan de la misma manera en las plantillas HTML. En HTML, el tamaño, el recorte, la alineación, las proporciones y la posición de las imágenes deben controlarse mediante CSS.