# 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.

[![image.png](https://v4.docs.airvi.com.co/uploads/images/gallery/2025-12/scaled-1680-/BhXumGgt2wqlbRZA-image.png)](https://v4.docs.airvi.com.co/uploads/images/gallery/2025-12/BhXumGgt2wqlbRZA-image.png)

##### **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.

[![image.png](https://v4.docs.airvi.com.co/uploads/images/gallery/2025-12/scaled-1680-/jw04RdluUjAeWN9p-image.png)](https://v4.docs.airvi.com.co/uploads/images/gallery/2025-12/jw04RdluUjAeWN9p-image.png)

##### **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:**  
> ⚠️ 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.

[![image.png](https://v4.docs.airvi.com.co/uploads/images/gallery/2025-12/scaled-1680-/V1DTa50K8lbbG86a-image.png)](https://v4.docs.airvi.com.co/uploads/images/gallery/2025-12/V1DTa50K8lbbG86a-image.png)

##### 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.

[![image.png](https://v4.docs.airvi.com.co/uploads/images/gallery/2025-12/scaled-1680-/ZOKqCo3f4UzhU5Tl-image.png)](https://v4.docs.airvi.com.co/uploads/images/gallery/2025-12/ZOKqCo3f4UzhU5Tl-image.png)