> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections/media-gallery.md).

# Media gallery

Presents a collection of images in a clean, organized layout.

*Shared Settings*:

* [<mark style="color:$primary;">'Follow' button</mark>](/triumph/template/shared-settings/view-all-button.md)
* [<mark style="color:$primary;">Card</mark>](#card)
* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Section background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](#colors)
* [<mark style="color:$primary;">Card caption colors</mark>](#card-caption-colors)
* [<mark style="color:$primary;">'Follow' button colors</mark>](/triumph/template/shared-blocks/button.md#colors)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)
* [<mark style="color:$primary;">Media</mark>](/triumph/template/sections/media-gallery/media.md)

***

#### Card

**Image aspect ratio**\
Choose the image shape:

* **Adapt to image** – Keeps each image’s original proportions.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

**Image fit**\
Choose how images fit inside the container:

* **Full background** – Fills the space (may crop the image).
* **Contain** – Shows the full image (may leave empty space).

**Caption alignment**\
Choose how captions are aligned: Left, Center, or Right.

**Show caption in popup**\
The caption is displayed in the pop-up below the image when it is active.

***

#### Card caption colors

**Text**\
Changes the caption color for an inactive card.

**Background**\
Select the color.

**Background opacity**\
Set the color transparency (0-100%).

***

{% tabs %}
{% tab title="Desktop" %}

{% endtab %}

{% tab title="Mobile" %}

{% endtab %}
{% endtabs %}