code for loading gallery from database

Ask the community
,
3

Hello Frank,

You can achieve that without code.
First, populate the collection with the relevant images. Right now it is not possible to add more than one image per field (we are working on this feature) therefore you should add the required number of image fields (image1, image2, image3 etc.).

Next, click the gallery > choose the connection menu > under ‘image source’ select the main image field > under ‘Links connect to’ select the dynamic page. Using this method will save you time in the future since you will only need to handle the image collection to add/remove gallery images. Linking new records to the dynamic page will be done automatically once you add a new item.

To finish the process, in your dynamic page, either add a number of standalone image elements (using placeholder image) and connect each one to each image field from your collection (image1, image2 etc…)

You can also write a piece of code to grab all the images from the current item to display them in a single gallery for consistency:


$w.onReady(function () {
 let imageArr = [];
 let item = $w('#dynamicDataset').getCurrentItem();
    Object.keys(item).filter((key => {
    if (key.includes("image", 0)) {
            imageArr.push({"src": item[key]})
            }
        })
    );
    $w('#gallery1').items = imageArr;
});