> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/guides/display-wordpress-gallery-captions-in-a-splide-slide.md).

# Display WordPress Gallery Captions in a Splide Slide

#### What You’ll Need

* An **ACF Gallery field** named `Gallery`
* The [**Advanced Views Pro**](https://advanced-views.com/pro/) plugin (for Splide slider support)
* Basic familiarity with editing **Twig templates**

### Step 1: Use the Correct Template Structure

In your *Layout*, copy the Default template content into the Custom template field and modify it as per the below example, with the *image\_item.caption* declaration being the most important part of the Twig code to output the gallery with captions:

{% code overflow="wrap" %}

```twig
<avf-layout-66b5d4134a54e class="{{ _layout.classes }} avf-layout 
avf-layout--id--{{ _layout.id }} avf-layout--object-id--{{ _layout.object_id }}">
    {% if gallery.value %}
        <div class="avf-layout__gallery2 splide">
            <div class="splide__track">
                <ul class="avf-layout__gallery2-list splide__list">
                    {% for image_item in gallery.value %}
                        <li class="avf-layout__gallery2-item splide__slide">
                            <img class="avf-layout__gallery2-image" src="{{ image_item.value }}" width="{{ image_item.width }}" height="{{ image_item.height }}" alt="{{ image_item.alt }}" decoding="{{ image_item.decoding }}" loading="{{ image_item.loading }}" srcset="{{ image_item.srcset }}" sizes="{{ image_item.sizes }}">
                            {% if image_item.caption %}<div class="caption">{{ image_item.caption }}</div>{% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    {% endif %}
</<avf-layout-66b5d4134a54e>
```

{% endcode %}

#### Key Details

* **Caption Source**: The `{{ image_item.caption }}` tag pulls from WordPress’s **native caption field** (set in the media library).
* **Splide Structure**: The outer wrapper must follow Splide’s structure:
  * `div.splide > div.splide__track > ul.splide__list > li.splide__slide`
* **Conditional Caption**: Only renders the `<div class="caption">` if a caption exists.

### Step 2: Add Caption Styling (Optional)

You can style the caption by adding this CSS to your *Layout* or theme:

```css
.caption {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}
```

### Step 3: Test and Tweak

1. Go to any post/page with this *Layout*.
2. Add images to the `Gallery` field, and set **captions** in the media modal.
3. Confirm the captions appear below each image on the front end.
4. Tweak the CSS styles as needed.

{% hint style="info" %}
Tip: Do you want the captions to overlay the image or appear only on hover? Wrap the image and caption in a container and add CSS for hover transitions or overlays.
{% endhint %}

Now you’re all set! 🎉 Your Splide slider built with **Advanced Views Pro** will show clean, captioned images using native WordPress Media caption field.