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

[Marek_Gajdusek]

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:

$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!

[Onawunmi_Ifeoluwa]

@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

[Marek_Gajdusek]

@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?

[canute]

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

$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;
    });
  });
});

[canute]

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

[Marek_Gajdusek]

thank you for help but it is not working for now:

type or paste code here

www.vestope.cz

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

Console shows this:

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