Generar Collage en los editores de texto

En todos los editores de texto enriquecido del sistema se incorpora una nueva funcionalidad denominada Collage, la cual permite insertar múltiples imágenes organizadas en un solo bloque visual dentro del contenido.

Acceso a la funcionalidad

El usuario puede acceder a esta opción desde la barra de herramientas del editor, haciendo clic en el botón “Collage”.
Al seleccionar esta opción, se abrirá un modal de configuración para la creación del collage de imágenes.

Modal “Generar Collage”

Al abrir el modal, el usuario podrá realizar la configuración del collage siguiendo los pasos descritos a continuación.

Selección de imágenes

• Se deben seleccionar las imágenes que formarán parte del collage.

• El sistema indica:

  • Cantidad de imágenes seleccionadas

  • Formatos permitidos (jpg, jpeg, png, gif, webp, avif)

  • Tamaño máximo por archivo

Es importante seleccionar la cantidad de imágenes acorde al diseño de collage que se desea utilizar.

Selección del diseño predeterminado

En el apartado Diseño predeterminado, el usuario podrá elegir entre diferentes presets de collage, los cuales definen:

• Cantidad de imágenes requeridas

• Distribución (horizontal)

• Número de filas y columnas

• Dimensiones finales del collage

Ejemplo de diseños disponibles:

• • Horizontal, 2 fotos

  • Horizontal, 3 fotos

  • Horizontal, 4 fotos

  • Horizontal, 5 fotos

  • Horizontal, 6 fotos

  • Horizontal, 7 fotos

Nota:
⚠️ Validación importante:
Si la cantidad de imágenes seleccionadas no coincide con la requerida por el diseño predeterminado elegido, el sistema mostrará un mensaje de advertencia indicando que el número de imágenes seleccionadas no es compatible con el preset seleccionado. En este caso, será necesario ajustar la cantidad de imágenes o seleccionar un diseño acorde.

Opciones de personalización

El modal permite ajustar diversos parámetros para personalizar el collage, tales como:

• Espaciado entre imágenes:
  Define la distancia en píxeles entre cada imagen dentro del collage.
• Márgenes externos:
  Establece el espacio exterior que rodea todo el collage.
• Padding interno:
  Controla el espacio interno entre el borde del collage y las imágenes.
• Color de fondo:
  Permite seleccionar el color de fondo del collage, visible en los espacios vacíos o separaciones.
• Brillo:
  Ajusta la intensidad de luz de las imágenes del collage.
• Contraste:
  Modifica la diferencia entre las zonas claras y oscuras de las imágenes.
• Ancho y color del borde:
  Define el grosor y el color del borde que rodea el collage.
• Radio de esquinas:
  Ajusta el nivel de redondeo de las esquinas del collage.

Estas opciones permiten adaptar el collage a las necesidades visuales del contenido.

Previsualización del collage

Una vez seleccionadas las imágenes y el diseño correspondiente, el sistema mostrará una previsualización del collage.
Esta vista previa permite verificar el resultado final antes de insertar el collage en el editor de texto.

Inserción del collage

Cuando el collage cumpla con la configuración deseada, el usuario podrá insertarlo directamente en el editor de texto, quedando integrado como un solo elemento visual dentro del contenido.