Hiding An Element from Dataset in a repeater when field is empty

Ask the community
, , , ,
1

Question:
How can I hide the image in a repeater when the dataset field is empty? Currently, when the “Samenwerking Logo” field in my dataset is empty, a white placeholder or blank image is still displayed. I want the image to be completely hidden if no logo is available for that item.

Product:
Wix Editor (Velo Code)

What are you trying to achieve:
I’m trying to display an image in a repeater only if the dataset field (for a logo) contains a valid image URL. If the dataset field is empty or doesn’t have a logo, the image should be hidden entirely, without showing any placeholders or white space.

What have you already tried:

  • I’ve set up the repeater and connected the image field to the dataset (“Samenwerking Logo”).
  • I’ve used Velo code to attempt to show/hide the image based on the field’s data.
  • I tried resetting the image src to null and using .hide() to remove the image, but I still get white placeholders or an empty image appearing.
  • I’ve reviewed Wix forums and articles related to repeaters and dynamic images, but haven’t found a solution that works.

Additional information:

  • My repeater ID is #repeater1, the dataset ID is #dataset1, and the image ID is #image164.
  • I am using the following code to hide the image, but it still shows a white placeholder when the logo is missing:
$w.onReady(function () {
    $w("#dataset1").onReady(function () {
        $w("#repeater1").onItemReady(($item, itemData) => {
            if (itemData.samenwerkingLogo) {
                $item("#image164").src = itemData.samenwerkingLogo;
                $item("#image164").show();
            } else {
                $item("#image164").src = null;
                $item("#image164").hide();
            }
        });
    });
});

I’ve also checked that no default placeholder images are set for the image element. What should I adjust to ensure no white placeholder appears when the field is empty?

2

Hello!

It sounds like you’re on the right track with your Velo code, but I understand the frustration with the white placeholder still appearing when the image field is empty. Let’s make a few adjustments to ensure the image is completely hidden when there’s no valid URL in the dataset field.

Here’s an optimized approach you can try:

  1. Avoid setting src to null: Setting src to null might not clear the image as expected. Instead, you can remove the src altogether and simply hide the image when there’s no logo.
  2. Use a cleaner conditional structure: Update your onItemReady code to check explicitly for a valid image URL.

Here’s an adjusted version of your code:

js

Copy code

$w.onReady(function () {
    $w("#dataset1").onReady(function () {
        $w("#repeater1").onItemReady(($item, itemData) => {
            // Check if there's a valid URL for the image
            if (itemData.samenwerkingLogo && itemData.samenwerkingLogo !== "") {
                $item("#image164").src = itemData.samenwerkingLogo;
                $item("#image164").show();
            } else {
                // Clear the src attribute and hide the image element
                $item("#image164").src = "";
                $item("#image164").hide();
            }
        });
    });
});

Key changes:

  • Instead of setting src to null, I’ve set it to an empty string (""), which effectively removes the image’s content.
  • The .hide() function will ensure the image is not displayed when the samenwerkingLogo field is empty.

Make sure you’ve also checked that there’s no fallback or placeholder image set in the Wix Editor, which could be causing the white space.

Try this updated code, and it should prevent the placeholder from appearing. Let me know if it works, or if you need further adjustments!

Best of luck,

3

The white space you’re experiencing is because you’re using the show/hide functions, rather than expand/collapse

Try doing

$item('#image164').collapse()

Also, I wouldn’t wait for dataset.onReady to set the repeater.onItemReady.
And you should probably assign better tags than #image164

4

Thank you for your help!
Unfortunately this didn’t work and I still get a white placeholder :frowning: