Default Image to show in Repeater if empty

Ask the community
,
1

Hi, I need to add the default icon/image if the collection field is empty and repeater is connected to that field. Now only possibility either to show or hide the data where image is not available. But I need to show the all data. “Default Image” will be shown where no data in the collection field. Checked corvid reference but didn’t understand but I think community member can help out with this. Thanks in advance!

2

Hallo Rajjat, do you have more inputs?
Database-structure? Using datasets?
What is the whole flow of your project?

Which reference did you check?
You wanna show?

Now only possibility either to show or hide the data where image is not available.
How do you do this? Isn’t it a similar solution to what you wanna achieve?

3

Hi, Visit - https://www.pollywoodcafe.com/artists/all

These details are fetched from a “artist” collection. To fetch this, I’ve used repeater which is connected to a dataset “dataset1”. Further, “dataset1” is connected to the “artist” collection.

Dataset Permission are of read only.
Collection permission: Anyone can read.
Data is synced well in sandbox & live.

Now, as you there are blank images in the repeater. I want to fill that with default icon. Is this possible? If so, then how?

4

Hi Gajjat :raised_hand_with_fingers_splayed:

To show a default image if the image field is empty, you have two options:

  1. Add the default image to the repeater and don’t change its properties (Hidden on load, collapsed on load, etc …), and change the image src to the image in your database if the field is NOT empty, and do nothing if it is (empty).
if (typeof itemData.image === 'string') {
    $w('#image').src = itemData.image;
}
  1. The second option is quite different, upload a random image and then change the src accordingly.
let defaultImage = 'https://google.com/images/.....jpj';

if (typeof itemData.image === 'string') {
    $w('#image').src = itemData.image;
} else {
    $w('#image').src = defaultImage;
}

Hope this helps~!
Ahmad

5 
Hi, This is not working. No error, no result. Could you help me in another way. I've used the following code

let itemData = $w("#repeater1").data;
console.log(itemData.image);
let defaultImage = "wix:image://v1/f1df5b_cb1471918e1f407b912f92e4caf582ee~mv2.png/_.png#originWidth=500&originHeight=500";

if (typeof itemData.image === 'string') {
    $w('#image2').src = itemData.image;
} else {
    $w('#image2').src = defaultImage;
}

“itemData.image” is undefined. Even I tried it like itemData[0].image. Looking forward to hearing from you :slight_smile:

6

On your website, I don’t see a dataset onReady() function, nor an onItemReady() function for the repeater.

You need to bind the repeater data using the onItemReady() function after the page finish loading (use the page’s onReady() function), and use the repeater selector ( $item ) to handle the repeated elements as items, not as a single element.

7

@ahmadnasriya Hi Ahmad

I hope you are well!

I have the same problem as OP and tried using this code:

let itemData = $w("#reviewsRepeater2").data;
console.log(itemData.image);
let defaultImage = "wix:image://v1/f0287c_7dfea8ffab414c378932987455319dbe~mv2.png/_.png#originWidth=768&originHeight=768";

if (typeof itemData.image === 'string') {
    $w('#image4').src = itemData.image;
} else {
    $w('#image4').src = defaultImage;
}

however when I check my website the image is still empty and my chosen default isn’t loading…
I’m not very good with code so would really appreciate a simple response :slight_smile:

the page where I’m trying to add the images is :
www.marlenasfeather. com/shop and it’s at the very bottom in the recent reviews section.

8

@marlenasfeather Try the following code:

  • Create a new function in my case defaultImage()

  • Inside the function declare the repeater onItemReady function

  • Use the itemdata parameter to check the database and apply default photo to empty fields (replace DBimageField with the image field name in your database)

  • call the function in my case defaultImage() in the $w.onReady function

  • Finally if the repeater is connected via dataset, make sure to disconnect the image element off the dataset.

$w.onReady(function () {
 defaultImage();
});

function defaultImage(){
$w("#repeater").onItemReady(($item, itemData, index)=>{
    if (!itemData.DBimageField) { $item("#MyImage").src = "wix:image://v1/f0287c_7dfea8ffab414c378932987455319dbe~mv2.png/_.png#originWidth=768&originHeight=768"; }
   else { $item("#MyImage").src = itemData.DBimageField; }
  })
}
9

bump ! same problem. Wix doesn’t seem to return an empty value when no image is inserted.

10

When you design the repeater, use the image that you want to be the default image if the database image is empty, and only change the image with code when there’s a value.

$w('#repeater').onItemReady(($n, data) => {
    if (data.image) { $n('#image').src = data.image }
})
11

@ahmadnasriya Amazing! It worked! Thanks a lot :slight_smile:

12

Hi @ahmadnasriya , Would you please explain a bit. I am confuse between $n(‘#image’).src and data.image . Kindly expalin a bit what is what?

13

What about for a gallery?

I tried

$w ( ‘#gallery3’ ). onItemReady (( $n , data ) => {
if ( data . image ) { $n ( ‘#image’ ). src = data . image }
})

But it doesn’t like onItemReady, for a gallery.

14

The “$n” is a special selector with a scoop of a single item, you may find referred to as “$item” in the API reference when working with repeaters.

The “data” object is the object of an item assigned to the repeater manually or by the a dataset. “image” (in this case) is a propoerty that holds the URL of the image.