# How to Display a Single Image from a CMS Gallery in a Repeater on Wix Velo

**URL:** <https://forum.wixstudio.com/t/how-to-display-a-single-image-from-a-cms-gallery-in-a-repeater-on-wix-velo/70215>\
**Category:** Ask the community\
**Tags:** cms, question, wix-studio, code\
**Created:** [April 9, 2025, 10:37pm UTC](https://forum.wixstudio.com/t/how-to-display-a-single-image-from-a-cms-gallery-in-a-repeater-on-wix-velo/70215 "2025-04-09T22:37:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marek\_Gajdusek](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/marek_gajdusek/32/98744_2.png) [@Marek\_Gajdusek](https://forum.wixstudio.com/u/Marek_Gajdusek)\
**Post date:** [April 9, 2025, 10:37pm UTC](https://forum.wixstudio.com/t/how-to-display-a-single-image-from-a-cms-gallery-in-a-repeater-on-wix-velo/70215/1 "2025-04-09T22:37:56Z")

</div>

Hello Wix Community,  
I’m working on a project using Wix Velo, and I need some guidance regarding repeaters and CMS galleries. My goal is to display a single image (specifically the first image from a gallery in the CMS) in the repeater for each item. Here’s the setup I’m working with:  
Setup Details:

Requirements:  
For each item in the repeater:

I’ve tried implementing this using the following code:

```javascript
$w.onReady(() => {
    // Ensure the dataset is loaded
    $w("#dataset64").onReady(() => {
        // Process each item in the repeater
        $w("#repeater1").onItemReady(($item, itemData) => {
            const galleryImages = itemData["pesakgalerie"]; // Access gallery images
            
            // Check if the gallery contains images
            if (Array.isArray(galleryImages) && galleryImages.length > 0) {
                const firstImage = galleryImages[0]; // Get the first image in the gallery
                $item("#imagepesak").src = firstImage; // Set the image source in the repeater
            } else {
                console.warn(`Gallery for item ${itemData._id} is empty or invalid.`);
            }
        });
    });
});

```

Results:  
Unfortunately, while the code seems logically correct, the image is still not displaying as expected in the repeater. I suspect there might be an issue with:

Questions:

Any insights, code examples, or suggestions would be greatly appreciated!  
Looking forward to your expert advice. Thank you in advance! 😊

---

<div class="post-metadata">

**Author:** ![Onawunmi\_Ifeoluwa](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onawunmi_ifeoluwa/32/107130_2.png) [@Onawunmi\_Ifeoluwa](https://forum.wixstudio.com/u/Onawunmi_Ifeoluwa)\
**Post date:** [April 9, 2025, 11:58pm UTC](https://forum.wixstudio.com/t/how-to-display-a-single-image-from-a-cms-gallery-in-a-repeater-on-wix-velo/70215/2 "2025-04-09T23:58:53Z")

</div>

> [@Marek\_Gajdusek](#):
>
> Any insights, code examples, or suggestions would be greatly appreciated!  
> Looking forward to your expert advice. Thank you in advance! 😊

Hey! 😊

If you’re using a CMS gallery field and want to show only the first image in each repeater item, you can do that with a bit of Velo code. Since the gallery field is an array of images, you just need to grab the first one and set it as the image source inside your repeater  
Just make sure your repeater is connected properly and that you replace the IDs and collection name with your actual setup.

Hope this helps! Let me know if you need help customizing it further

---

<div class="post-metadata">

**Author:** ![Marek\_Gajdusek](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/marek_gajdusek/32/98744_2.png) [@Marek\_Gajdusek](https://forum.wixstudio.com/u/Marek_Gajdusek)\
**Post date:** [April 10, 2025, 7:46am UTC](https://forum.wixstudio.com/t/how-to-display-a-single-image-from-a-cms-gallery-in-a-repeater-on-wix-velo/70215/3 "2025-04-10T07:46:10Z")

</div>

> [@Onawunmi\_Ifeoluwa](#):
>
> If you’re using a CMS gallery field and want to show only the first image in each repeater item, you can do that with a bit of Velo code. Since the gallery field is an array of images, you just need to grab the first one and set it as the image source inside your repeater  
> Just make sure your repeater is connected properly and that you replace the IDs and collection name with your actual setup.
> 
> Hope this helps! Let me know if you need help customizing it further

Hi  
sorry for that but I don’t understand what do you met. I have wrote here my code for Velo but it doesn’t work. What do you think about my code and my way?

---

<div class="post-metadata">

**Author:** ![canute](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/canute/32/9739_2.png) [@canute](https://forum.wixstudio.com/u/canute)\
**Post date:** [April 10, 2025, 9:42am UTC](https://forum.wixstudio.com/t/how-to-display-a-single-image-from-a-cms-gallery-in-a-repeater-on-wix-velo/70215/4 "2025-04-10T09:42:49Z")

</div>

Hey @Marek_Gajdusek  
Try this out. I haven’t tested it, but I think it will solve your issue:

### 🛠 Setup Assumptions

- **Dataset** ID: `#myDataset`
- **Repeater** ID: `#myRepeater`
- **Image element** inside the repeater: `#repeaterImage`
- The Gallery field is named `"gallery"` in your collection

```javascript
$w.onReady(function () {
  $w("#myDataset").onReady(() => {
    const items = $w("#myDataset").getItems();

    // Prepare the data for the repeater
    const repeaterData = items.items.map(item => {
      let firstImageUrl = "";

      if (item.gallery && item.gallery.length > 0) {
        firstImageUrl = item.gallery[0].src; // Get first image URL
      }

      return {
        _id: item._id,
        imageUrl: firstImageUrl
      };
    });

    // Bind the repeater
    $w("#myRepeater").data = repeaterData;

    $w("#myRepeater").onItemReady(($item, itemData) => {
      $item("#repeaterImage").src = itemData.imageUrl;
    });
  });
});

```

---

<div class="post-metadata">

**Author:** ![canute](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/canute/32/9739_2.png) [@canute](https://forum.wixstudio.com/u/canute)\
**Post date:** [April 10, 2025, 9:43am UTC](https://forum.wixstudio.com/t/how-to-display-a-single-image-from-a-cms-gallery-in-a-repeater-on-wix-velo/70215/5 "2025-04-10T09:43:29Z")

</div>

If this is too complex simply add a main image field in the dataset and connect it to the repeater.

---

<div class="post-metadata">

**Author:** ![Marek\_Gajdusek](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/marek_gajdusek/32/98744_2.png) [@Marek\_Gajdusek](https://forum.wixstudio.com/u/Marek_Gajdusek)\
**Post date:** [April 10, 2025, 1:56pm UTC](https://forum.wixstudio.com/t/how-to-display-a-single-image-from-a-cms-gallery-in-a-repeater-on-wix-velo/70215/6 "2025-04-10T13:56:07Z")

</div>

![This image is a user interface screen from Stopet.cz showing reviews and comments covering a skiing trip to Marek, with photographs and updates about the stop on the Ústí nad Labem route. (Captioned by AI)](https://us1.discourse-cdn.com/wix/original/3X/9/0/90e2c17b9247c8072f968a31369ed6fbf57ace78.jpeg)  
thank you for help but it is not working for now:

```javascript
type or paste code here

```

www.vestope.cz

you can see and check it. This code does not work. :-/

Console shows this:

```javascript
UserError: datasetApi 'getItems' operation failed
Caused by DatasetError: Parameter (fromIndex) must be a number
Caused by: DatasetError: Parameter (fromIndex) must be a number
You have unhandled error in async operation. Consider catching it and handling accordingly.
 DatasetError: Parameter (fromIndex) must be a number
Error: Parameter (fromIndex) must be a number

```