How to have image disappear when no url link is given

Ask the community
,
1

I have a dynamic page with several icons that link to third-party urls. I want to know if there is a way to have the image disappear or link to a grayed-out image if there is not a connecting url given? I am sure this is pretty basic but outside my knowledge base.

2

Hi there :wave:t2: I do something similar on my site. Below is the working code that I use to accomplish this, just swap out the element IDs for your own and change “yourFieldKey” to the field key of the database column that holds the links. If the entry is empty for that row then it will hide the relevant image.

$w.onReady(function () {
    $w("#yourDataset").onReady(() => {
        var item = $w("#yourDataset").getCurrentItem();
            if (item["yourFieldKey"] === "" || item["yourFieldKey"] === null || item["yourFieldKey"] === undefined) {
            // Change "yourFieldKey" to the Field Key of the database column you want to find
            $w("#yourImage").show();
        } else {
            $w("#yourImage").hide();
        }
    });
});

If you are doing this for multiple images then you should be able to just add multiple copies of the if/then statement, like so:

if (item["yourFieldKey"] === "" || item["yourFieldKey"] === null || item["yourFieldKey"] === undefined) {
        $w("#yourImage").show();
} else {
        $w("#yourImage").hide();
}
if (item["yourFieldKey2"] === "" || item["yourFieldKey2"] === null || item["yourFieldKey2"] === undefined) {
        $w("#yourImage2").show();
} else {
        $w("#yourImage2").hide();
} 
// Etc

There are many forum posts that deal with similar questions, you can check out a few of them here for more reference:

Good luck!

3

Thank you so much for replying! I really appreciate the help. I followed the code but the image now disappears when there is a value in the dataset. What am I doing wrong?

Here is the code:

$w . onReady ( function () {
$w ( “#teamDataset” ). onReady (() => {
var item = $w ( “#teamDataset” ). getCurrentItem ();
// Change “yourFieldKey” to the Field Key of the database column you want to find
if ( item [ “amazon” ] === true ) {
$w ( “#image27” ). show ();
} else {
$w ( “#image27” ). hide ();
}
});
});

4

@monique Could you send a screenshot of your database and explain a bit of the structure? It looks like you have a column called “amazon” with a field type of boolean?

5

Amazon is has a url field type. I am assuming the if, then will not work for a url, correct?

6

It will work with a url field, you just need to use the proper code. And if there is not a url then leave the entry completely empty, with not even a space.

Using " true " as you did in this code is looking for a boolean value (which your field is not, based on your explanation, so it will not work).

if (item["amazon"] === true)

But what we want is to determine if the field is empty, so you will need the following code which looks for empty/undefined

if (item["amazon"] === "" || item["amazon"] === null || item["amazon"] === undefined)

This should be the correct structure and code, give it a try.

$w.onReady(function () {
    $w("#teamDataset").onReady(() => {
        var item = $w("#teamDataset").getCurrentItem();
            // if the "amazon" field is empty (has no url)
            if (item["amazon"] === "" || item["amazon"] === null || item["amazon"] === undefined) {
            // hide the image
            $w("#image27").hide();
        } else {
            // if the field is NOT empty (has a url), show the image
            $w("#image27").show();
        }
    });
});