Dynamic Images not showing up

Discussion Ask a question
1

Hi, I have an issue with the dynamic data functionality. When I use an repeater element the content is displayed correctly (title, image) - but when I use an portfolio composition element it will only show the first image and first title of the content list or even the layout/default images. So its connected, but not going through the list to display the content. There is no sorting on place, I checked that. Is that only working with repeaters? thanks for helping out, A.

2450Ă—1060 191 KB

2612Ă—966 185 KB

1 Like
2

Just to add to this… i played around with different elements, for me none of them was working consistently. Sometimes the default images just stay, sometimes only the titles are displayed. Sometimes only the first image is displayed and the others stay default. I also tried hard refreshes in chrome…but it just seams quite inconsistent. Any tipps are greatly appreciated… thanks

3

Hey,
I’m Miri from the EditorX product team.
Unlike in the repeater, the elements in a composition are not connected, therefor they don’t go through the items in the data set and show a different one each time. Also in case you have more items in a data set than elements in the composition, it wouldn’t duplicate and create new elements for them like in the repeater.
What is the reason prefer using a data set in a composition rather than placing a fixed content in it?

1 Like
4

Hi Miri, thank you. I was aiming at a more varied layout (like grids or layouters) but with dynamic content from a dataset. Like a portfolio selection overview on the homepage, but with more offset, small and bigger images etc.

5

Hey,

I will look into what you are trying to achieve and get back to you, it might require some code.

Hold tight.

6

Ok, so this is a solution using a grid layout, although it can also be applied to a layouter.

here is the code snippet that I used:

import wixData from 'wix-data';




$w.onReady(function () {
 
 let gridImages = $w('#gridImg01, #gridImg02, #gridImg03, #gridImg04, #gridImg05, #gridImg06'); 

    wixData.aggregate("Images")
        .run()
        .then((results) => {
 if (results.items.length > 0) {
                results.items.forEach((item, index)=>{
                    gridImages[index].src = item.img;
                    gridImages[index].show('fade', {duration:300, delay:(index+1)*300});
                })
            } else {
 // handle case where no matching items found
            }
        })
        .catch((error) => {
 let errorMsg = error.message;
 let code = error.code;
        });

});

Have fun!