Gallery Images on dynamic page

Ask the community
,
1

Hi. I have connected images to a gallery on a dynamic page. So far so good. However, each item in my database doesn’t have the same number of images- sometimes there are 5, sometimes less. For the times when there is no image, it shows up black in the previewed gallery. I read in the forum that you can add push to solve this. But I can’t get it to work. Could you look at my code below and let me know what I have done wrong please? Thanks for any help.

export function uniProperty_ready() {
$w.onReady(() => {
$w(‘#uniProperty’).onReady(() => {
let item = $w(‘#uniProperty’).getCurrentItem();
$w(‘#gallery1’).items = [
{src: item.plan},
{src: item.kitchenimage},
{src: item.bed1Image},
{src: item.bathroom},
{src: item.buildingimage}
];
var items = [“#gallery1”];
items.push(“plan”,“kitchenimage”,“bed1image”,“bathroom”, “buildingimage”,);

});
});
}

2

Hey
First of all the $w.onReady(() should not be inside of a function, this is the onReady object for the page itself and has to be top placed and not inside anything else.

Then the function is uniProperty_ready and inside that you have $w(‘#uniProperty’).onReady(() which all seem like double to me.

Then this code sets the gallery items

$w('#gallery1').items = [
     {src: item.plan},
     {src: item.kitchenimage},
     {src: item.bed1Image},
     {src: item.bathroom},
     {src: item.buildingimage}
      ];

And this line var items = [“#gallery1”]; can’t work right? You are trying to push items into an array but the array is defined somewhat strange.

let imageArray = [];
imageArray = {
src: urlOfImage,
src: urlOfImage2
}
var items = [];
items.push(imageArray);

That would push the contents of your imageArray into the items array and then you can set the gallery to use those items by using $w(‘#gallery1’).items = items;

Does that help in any way?

3

Hi Andreas,
Sorry if I’m not getting this, but if the “image array” is defined as the items in the #gallery1, do I have to list the src.'s individually again or it picks them up from the code above it? I am trying to muddle my way through this and have added this under the original code but it’s still not hiding the blank images

export function uniProperty_ready() {
$w.onReady(() => {
$w(‘#uniProperty’).onReady(() => {
let item = $w(‘#uniProperty’).getCurrentItem();
$w(‘#gallery1’).items = [
{src: item.plan},
{src: item.kitchenimage},
{src: item.bed1Image},
{src: item.bathroom},
{src: item.buildingimage}
];
let imageArray = [$w(‘#gallery1’).items];
imageArray = { };
var items = [$w(‘#gallery1’).items];
items.push(imageArray);

});
});
}

What am I missing or what should the code look like?

4

So you want to hide images if item.bed1Image is null you mean?

5

if (item.plan.length>0) {items.push({src: item.plan});}
If you do this for all the images then items should only contain the images whose length is greater than zero.

6

Yes I don’t want them to show id there is no image in the database- we are still acquiring images for each property