> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-angular-multimedia-attachments.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Images Bubble

> A batch-aware Angular bubble that renders one or more image attachments of a media message, with adaptive grid layouts, a fullscreen gallery viewer, and caption support.

The `CometChatImagesBubbleComponent` renders the image attachment(s) of a `CometChat.MediaMessage`. It is the **multi-attachment counterpart** to [`CometChatImageBubble`](/ui-kit/angular/components/cometchat-image-bubble): the message list routes image messages to this bubble so that a single message carrying several images renders as one grouped bubble.

Internally it **delegates rendering** to `cometchat-image-bubble` (grid/overflow layout, fullscreen gallery, caption) and only adds a shared batch width so every message in a multi-message batch lines up at the same size.

## Overview

* **Adaptive grid layouts** — single image, multi-image grid, 2×2, and a `+N` overflow tile, selected automatically from the attachment count (rendered by the underlying image bubble).
* **Fullscreen gallery viewer** — click any image to open the paginated fullscreen viewer.
* **Caption support** — an optional caption is rendered below the images.
* **Batch-aware width** — all bubbles in a batch share one width via the `--cometchat-multi-attachment-width` token (default `400px`).

<Note>
  This bubble is selected only when **[`enableMultipleAttachments`](/ui-kit/angular/components/cometchat-message-composer)** is `true` (the default) on [`CometChatMessageBubble`](/ui-kit/angular/components/cometchat-message-bubble). When it is `false`, image messages fall back to the deprecated single-attachment [`CometChatImageBubble`](/ui-kit/angular/components/cometchat-image-bubble). The legacy bubble remains available as a standalone component, but the list no longer routes to it by default.
</Note>

## Automatic Rendering

In the standard chat flow you do **not** instantiate this component yourself. [`CometChatMessageList`](/ui-kit/angular/components/cometchat-message-list) renders [`CometChatMessageBubble`](/ui-kit/angular/components/cometchat-message-bubble), which routes any `image`-type message to `CometChatImagesBubbleComponent` when `enableMultipleAttachments` is on.

Use the component directly only when you are building a fully custom message renderer.

## Basic Usage

```typescript expandable theme={null}
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatImagesBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-image-message',
  standalone: true,
  imports: [CometChatImagesBubbleComponent],
  template: `
    <cometchat-images-bubble
      [message]="imageMessage"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-images-bubble>
  `,
})
export class ImageMessageComponent {
  imageMessage!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}
```

### Incoming vs Outgoing Messages

Alignment is a [`MessageBubbleAlignment`](/ui-kit/angular/components/cometchat-message-bubble) enum value — `left` for incoming/receiver messages, `right` for outgoing/sender messages.

```typescript expandable theme={null}
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatImagesBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-image-list',
  standalone: true,
  imports: [CometChatImagesBubbleComponent],
  template: `
    <!-- Incoming images (left-aligned) -->
    <cometchat-images-bubble
      [message]="incoming"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-images-bubble>

    <!-- Outgoing images (right-aligned) -->
    <cometchat-images-bubble
      [message]="outgoing"
      [alignment]="MessageBubbleAlignment.right"
    ></cometchat-images-bubble>
  `,
})
export class ImageListComponent {
  incoming!: CometChat.MediaMessage;
  outgoing!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}
```

## Grid Layouts

The underlying image bubble selects a layout from the number of image attachments:

| Attachments | Layout                                                      |
| ----------- | ----------------------------------------------------------- |
| 1           | Full-width single image                                     |
| 2–4         | Adaptive grid (side-by-side / 2×2)                          |
| 5+          | 2×2 grid with the last tile showing a `+N` overflow overlay |

The grid classes (`.cometchat-image-bubble__*`, including `__overflow-overlay` and `__overflow-text`) belong to the underlying image bubble — see its [styling reference](/ui-kit/angular/components/cometchat-image-bubble#styling-with-css-variables); this bubble adds no selectors of its own.

## Batch Grouping

When a user sends several media messages together (for example three images and two files staged in the composer), each message is stamped with a shared `metadata.batchId`. The message list groups consecutive messages that share a `batchId` and marks each one with `isFirstInBatch` / `isLastInBatch` flags, which control the avatar, spacing, and footer so the batch reads as a single visual block.

<Info>
  Angular expresses batch grouping as the two booleans `isFirstInBatch` / `isLastInBatch` (computed by [`CometChatMessageList`](/ui-kit/angular/components/cometchat-message-list)). There is no `batchPosition` input on the bubble. All four media batch bubbles share one width through the `--cometchat-multi-attachment-width` CSS token so every message in a batch renders at the same width.
</Info>

## Properties

| Property             | Type                     | Default                       | Description                                                                  |
| -------------------- | ------------------------ | ----------------------------- | ---------------------------------------------------------------------------- |
| `message`            | `CometChat.MediaMessage` | **required**                  | The image message. Attachments and caption are read from it.                 |
| `alignment`          | `MessageBubbleAlignment` | `MessageBubbleAlignment.left` | Bubble alignment. `left` for incoming/receiver, `right` for outgoing/sender. |
| `disableInteraction` | `boolean`                | `false`                       | When `true`, disables click-to-open / fullscreen interaction on the images.  |

This component emits no outputs.

## Relationship to the Legacy Image Bubble

|                      | `CometChatImageBubble` (legacy)                  | `CometChatImagesBubble` (multi-attachment) |
| -------------------- | ------------------------------------------------ | ------------------------------------------ |
| Routed by the list   | Only when `enableMultipleAttachments` is `false` | Default for image messages                 |
| Multiple attachments | Rendered directly                                | Rendered via delegation, batch-aware width |
| Batch grouping       | No                                               | Yes (`isFirstInBatch` / `isLastInBatch`)   |
| Availability         | Deprecated standalone                            | Public standalone component                |

## Customization

The bubble exposes one batch-width token; the actual image styling comes from the underlying image bubble.

```css expandable theme={null}
cometchat-images-bubble {
  /* Shared width for every media bubble in a batch (default 400px). */
  --cometchat-multi-attachment-width: 400px;
}
```

<Note>
  `--cometchat-multi-attachment-width` is intentionally left **unset** in the kit's `css-variables.css`; the batch bubbles fall back to `400px`. Set it once (for example to `100%`) to resize all four media batch bubbles — [Images](/ui-kit/angular/components/cometchat-images-bubble), [Videos](/ui-kit/angular/components/cometchat-videos-bubble), [Audios](/ui-kit/angular/components/cometchat-audios-bubble), and [Files](/ui-kit/angular/components/cometchat-files-bubble) — together.
</Note>

To restyle the images themselves (grid gaps, overflow overlay, gallery), use the [Image Bubble styling reference](/ui-kit/angular/components/cometchat-image-bubble#styling-with-css-variables).

## Technical Details

* **Standalone component** — import and use independently; exported as `CometChatImagesBubbleComponent` from `@cometchat/chat-uikit-angular`.
* **Change detection** — `OnPush`.
* **Delegation** — renders through `cometchat-image-bubble`; adds only the shared batch width.
* **No outputs** — the component emits no events.

## Related

* **[Image Bubble](/ui-kit/angular/components/cometchat-image-bubble)** — the single-attachment bubble this component delegates to.
* **[Videos Bubble](/ui-kit/angular/components/cometchat-videos-bubble)** — the multi-attachment bubble for videos.
* **[Files Bubble](/ui-kit/angular/components/cometchat-files-bubble)** — the multi-attachment bubble for files.
* **[Message Composer](/ui-kit/angular/components/cometchat-message-composer)** — stages multiple attachments and sends them as a batch.
* **[Message List](/ui-kit/angular/components/cometchat-message-list)** — routes messages to this bubble and computes batch grouping.