# Gallery

The Gallery component in Elements allows you to build beautiful Galleries in a matter of seconds. Simple place the Gallery component into your site and drop on a folder images (or video).

{% embed url="<https://youtu.be/LwmA-IZNQIs>" %}

{% hint style="success" %}
You can **add YouTube or Vimeo videos** by dragging and dropping the URL from your web browser to the Resources area in RapidWeaver Elements. A playlist URL can also be dropped into the resources area.
{% endhint %}

### Supported File Types

Galleries can contain a mixture of file types, including:

* JPG
* PNG
* YouTube
* Vimeo
* .mp4

### Resize and Compress Images for Best Results

Elements is designed to be flexible with image sizes, but for best results in galleries, we recommend using images that are at least 1200px wide for modern displays. This ensures your gallery looks sharp on all devices.

For batch resizing and compressing images we recommend [Squash for macOS](https://www.realmacsoftware.com/squash/).

### Component Settings

{% columns %}
{% column width="50%" %}

#### Media

Drop a folder of images, videos, YouTube link, or Vimeo links into the dropzone to build your gallery.

{% hint style="danger" %}
The Gallery does not support single images. They must be in a Folder.
{% endhint %}
{% endcolumn %}

{% column width="50%" %}

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2FlJcSX780NpGCpKIu5TKI%2FCleanShot%202025-10-16%20at%2011%E2%80%AF.45.57%402x.png?alt=media&#x26;token=d739d7df-efc9-4cd8-87f9-4b1aecad1760" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

### Layout

The Layout section controls how your images are arranged within the Gallery component. Use these settings to define the number of columns and the spacing between each thumbnail.

**Columns**

Adjust the number of columns displayed in your gallery.

* Use the slider to set how many columns of thumbnails appear across your layout.
* The gallery automatically adapts to different screen sizes, ensuring images remain evenly spaced and visually balanced.

**Gap**

Set the spacing between gallery items.

* The Gap value defines the amount of space between thumbnails.
* Use smaller values for a tighter grid or larger ones to give each image more breathing room.
* The value corresponds to Tailwind’s spacing scale, so it remains consistent with your theme settings.
  {% endcolumn %}

{% column %}

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2FGonGOyMVnnzKS1LVtCU5%2FCleanShot%202025-10-16%20at%2011%E2%80%AF.50.41%402x.png?alt=media&#x26;token=53054ce0-f837-46cb-9a96-b2620dc2fac6" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

#### Thumbnails

The Thumbnails section controls how images are displayed within the Gallery component. You can adjust the size, shape, and appearance of the thumbnails, along with metadata such as captions and authors.

{% hint style="warning" %}
The Aspect ratio will apply to all images to give the grid an ascetically pleasing and consistent look. If you wish to mix and match aspect ratios, we recommend building a custom Gallery with the Grid Component.
{% endhint %}

**Media**

These settings define the overall appearance of your thumbnails.

* **Aspect**

  Choose between Square, Wide, or Tall to control the image aspect ratio.
* **Radius**

  Adjust the corner rounding of your images.
* **Shadow**

  Adds a soft drop shadow to thumbnails.

**Meta Data**

Use these options to control how meta information (such as captions or authors) is positioned and spaced around the thumbnail.

* **Alignment**

  Align metadata text to the Left, Center, or Right of each thumbnail.
* **Margin**

  Adds spacing around the metadata area and the thumbnail.
* **Spacing**

  Controls the space between individual metadata items (for example, between a caption and author line).

**Caption & Author**

Controls the appearance of the image caption and author

* **Show**

  Toggle captions on or off.
* **Color**

  Sets the text color.
* **Font**

  Select a font style (such as heading or body) from your project’s theme.
* **Size**

  Define the text size.
  {% endcolumn %}

{% column %}

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2FdPFoEwFGqsgORZmHDyrf%2FCleanShot%202025-10-16%20at%2011%E2%80%AF.52.29%402x.png?alt=media&#x26;token=8c2f7c51-6183-4a9c-bb86-afeaf4afa080" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

#### Lightbox

The Lightbox section controls how images are displayed when clicked. Enabling the Lightbox allows visitors to view larger versions of your images in a clean, focused overlay without leaving the page.

**Preview**

Toggle the Preview option to enable or disable viewing the lightbox in the Elements Editor.

**Media**\
Fine-tune the appearance of images displayed inside the lightbox.

* **Radius**

  Adjust the corner rounding of lightbox images. Use Default to follow your project’s theme styling.
* **Shadow**

  Apply a drop shadow around images in the lightbox to give them depth and contrast. Use Default to follow your project’s theme styling.

{% hint style="success" %}
**Tip:** Use consistent radius and shadow settings between your Thumbnails and Lightbox sections for a unified visual style.
{% endhint %}
{% endcolumn %}

{% column %}

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2F8fRgnPDDNYq82VcrHQXD%2FCleanShot%202025-10-16%20at%2012%E2%80%AF.01.49%402x.png?alt=media&#x26;token=46bc623e-5a87-409c-8339-989d1c2ea198" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

#### Overlay

The Overlay section controls the background appearance behind images when the Lightbox is active. These settings let you adjust the overlay’s color, opacity, and blur to achieve the desired visual focus when viewing enlarged images.

**Color**

Choose the background color of the overlay.

* This determines the tone of the area behind the image when opened in the Lightbox.&#x20;
* Darker overlays help the image stand out, while lighter tones can create a softer presentation.

**Opacity**

Adjust the transparency of the overlay.

* Lower values make the background more visible through the overlay.
* Higher values create a stronger contrast between the image and background.

  The default setting provides a subtle darkening effect suitable for most themes.

**Blur**

Adds a soft blur to the background content beneath the overlay.

* This helps draw attention to the image while maintaining a sense of depth and polish.&#x20;
* Increase the blur amount for a more diffused background effect.

{% hint style="success" %}
**Tip:** Combine a slightly dark overlay color with moderate blur for a clean, modern Lightbox appearance that complements most gallery styles.
{% endhint %}
{% endcolumn %}

{% column %}

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2F295HKc1Lj5UpkAvtUeGN%2FCleanShot%202025-10-16%20at%2012%E2%80%AF.05.07%402x.png?alt=media&#x26;token=6caac447-568d-466a-a34d-9c098157fee0" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

#### Navigation

The Navigation section controls the appearance of the navigation buttons within the Lightbox view. These settings let you customise the look of the Close, Next, and Previous buttons to suit your project’s theme.

**General**

Adjust the overall design and sizing of navigation buttons.

* **Border Radius**

  Controls the corner rounding of all navigation buttons. You can set independent values for horizontal and vertical radius, or leave as Default for theme consistency.
* **Padding**

  Sets the inner spacing around each icon, determining how much space appears between the button edge and the icon.
* **Size**

  Adjusts the icon size inside the navigation buttons.
* **State**

  Switch between Default and Hover to style how buttons look in each interaction state.

Customise the appearance of the button used to close the Lightbox.

* Background

  Sets the background color on the button
* Icon

  Choose the color of the icon for better contrast against the background.
* Opacity

  Adjusts the transparency of both the button and icon.

{% hint style="success" %}
**Tip:** For best results, use semi-transparent backgrounds with high-contrast icons. This keeps navigation controls visible without distracting from the main image.
{% endhint %}
{% endcolumn %}

{% column %}

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2FT3t4CRmbGfjY2Z3K89x7%2FCleanShot%202025-10-16%20at%201%E2%80%AF.07.09%402x.png?alt=media&#x26;token=c7232627-1286-4de1-9f3d-858c327d02d3" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

#### Advanced

The [Advanced Section](https://docs.realmacsoftware.com/elements-docs/elements/components/common-controls/advanced) provides options for users who want finer control over styling or need to link directly to the Gallery component.&#x20;

These settings are ideal for developers and advanced users comfortable with custom CSS or Tailwind utilities.

**CSS Classes**

Add one or more Tailwind CSS classes to the Gallery component for custom styling.

This allows you to extend or override default styles without editing your theme or component code.

You can use any valid Tailwind utility class to adjust spacing, colours, borders, or animations.

**ID**

Assign a unique ID to the component. This is useful for creating in-page [anchor links](https://docs.realmacsoftware.com/elements-docs/elements/common-controls/advanced#id) or targeting the component with custom scripts and CSS selectors.
{% endcolumn %}

{% column %}

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2Fg0V7pI1Ct05O9DWgflKC%2FCleanShot%202025-10-16%20at%201%E2%80%AF.14.19%402x.png?alt=media&#x26;token=69cca96e-f754-49f3-88f9-e213f0242884" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/elements/components/gallery.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.