Hide image element if empty

Ask the community
,
1

hi
I have images in my dataset but not for all the rows.
i want to hide the image element if there is no image in the row but can’t figure it out.

This is the code that i have but it didn’t work.

$w(“#dbSystem”).onReady(() => {

let itemIndex = $w(“#dbSystem”).getCurrentItemIndex();
let location = $w(“#dbSystem”).getCurrentItem();
let count = $w(“#dbSystem”).getTotalCount();
console.log("Size of the Dataset: ", count);

for ( var i = 0; i < count; i++) {

        $w("#dbSystem").getItems(i, 1) 
            .then((result) => {

let items = result.items;
let image = items[0].image;
let totalCount = result.totalCount;
let hasimage = items[0].hasimage2;
let index = result.offset;
let postImage = $w(“#postImage”);
console.log("Item Index: ", index);
console.log("Items here: ", image);

                console.log("Items location: ", location);

if (hasimage) {
postImage.show();
} else
postImage.hide();

            })  

    } / 

});

}

Thanks

2

Try

if (hasimage.length>0) { 
  // Show
} else {
  // Hide
}
3

nope, doesn’t work. it’s just hide all the Images…

4

Hi Ben,

The line items[2].postImage.show(); isn’t correct because:
1 . items[2] represent result.items[2]- this item is undefined, because each iteration at the loop, you only get one item from the collection.
2. You wish to hide only the image element, as a result your condition should be:

if (hasimage) {
 postImage.show();
} else
  postImage.hide();
  • Note that there’s an unnecessary forward -slash near the end of your code. .

Best,
Sapir

5

This is still doesn’t work.
the " items[2].postImage.show() " was just for trying somthing and I forgat to change it before I posted here.

this is how my code look
if (hasimage)
{ postImage.show (); }
else
postImage.hide();
but its just show all the items even if there isn’t image in it (from the dataset)

6

Hi Ben,

Can you please share a link to your site and specify the name of the page so we can inspect?

Thanks,
Sapir

7

can I share it privacy to you? I can’t show it in public.
thanks :slight_smile:

8

help? :slight_smile:

9

@benodcanit Only authorised wix employees can access your editor’s URL.

10

Hi Ben,

First, I suggest to disconnect the repeater’s elements from the dataset, because if you wish to set the image element by using code, its more correctly to also set by code the other elements.

At the follow code I used an event handler that run when the dataset’s ready, and at the handler I summoned the function imageMngr() that you wrote.

At the function imageMngr(), I used the onItemReady() event handler in order to set the repeater’s data. This function runs when a new repeated item is created, and as a result, I can set the image element before the item is presented in the repeater.
Here you can read more about that.

*At the onItemReady() function, the ItemData is the object from the repeater’s data array that corresponds to the repeated item being created.

$w.onReady(function () {
    $w("#dbSystem").onReady(() => {
        console.log("check")
        imageMngr();
    });

});

function imageMngr() {
    $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#text4").text = itemData.title; 
        $item("#text3").html= itemData.content; 
         if (itemData.image !== undefined){
            $item("#postImage").src= itemData.image
        }
       else{
            $item("#postImage").hide();
        }
    });
}

Have a nice day and best of luck!
Sapir

11

this solution worked for me iam able to collapse imagebox which are empty. thank you.
you can have a look atmy code and the result on my webpage ,one item contains image andon the other it has collapsed as it is empty

866×616 108 KB

12

this is my code

737×366 23.1 KB

13

Finally!!! This was so helpful, thank you!