Hide Image/Text on dynamic page if there is non in database

Ask the community
,
1

Hi guys!

I am creating articles for my website using a database and dynamic pages. On my dynamic page I have used some text and images to create different paragraphs:

585×531 333 KB

In some articles there is no image between paragraph1 and paragraph2; in that case there is huge white gap between these paragraphs (because the image-element has no value). I am wondering if it is possible using code to hide this element if their is no image to show.

2

Just throw in a if statement on your on ready function to check if the image is present. If not use the collapse() method on the image object and it will collapse the white area.

The dynamic page have a dataset so read in the API about the dataset and the method onReady on the dataset. You must put the if within the pages onready and as well within the datasets onready to make sure the dataset and image are loaded before you check.

Good luck.

3

Great! Thanks for your answer. I am wondering how to check if the image is present;

$w.onReady( () => {
$w(“#myDataset”).onReady( () => {
$w(“#myDataset”).getCurrentItem().image => {
IF (null) {
$w(“#image1”).collapse() ; }
ELSE () {
$w(“#image1”).show(); }
}
} ) }

Something like this if ‘image’ is the fieldname and image1 the objectname?

4

Do like this

$w.onReady( () => {
$w(“#myDataset”).onReady( () => {
let item = $w(“#myDataset”).getCurrentItem();
if (item.image) {
$w(“#imageElement”).show();
} else {
$w(“#imageElement”).collapse();
$w(“#imageElement”).hide();
}
} );
} );

5

Same issue on my site - has this info worked for you? I’m trying to follow along to fix my own layout, but this is my first coding experience so I am struggling to understand some of the instructions in the tutorials.

6

Hi,
This should work. Should the issue persists, please clarify what is the scenario (to make sure that it is the same one as “vanmaaren” ) and send us the site URL so that we can have a look.

Tal.

7

I am trying to do the same, but with a video. I am a bit stuck, in one of my datasets that doesn’t have a link to any video, the video still shows up on the page. What am I doing wrong?

#CaseStudies dataset is the name of my dataset
#video1 is the element on the dynamic page

Here is the code I am attempting:

$w.onReady( () => {
$w(“#CaseStudies dataset”).onReady( () => {
let item = $w(“#CaseStudies dataset”).getCurrentItem();
if (item.Video) {
$w(“#video1”).show();
} else {
$w(“#video1”).collapse();
$w(“#video1”).hide();
}
} );
} );

8

Hi Brendon,
Can you please send us the site URL and the name of the page so that we can have a look?

Thanks,
Tal.

9

Thank you Tal! The address is nawayaegypt.org/hub/casestudies/cases (it’s a dynamic page called Case Studies Cases (title)) – it is not live yet though, do I need to publish it so you can see it?

10

Actually I’ve fixed the original problem – I was naming the dataset wrong. But not I have the opposite problem. The video and title text “Video” both collapse even when there is a video in the dataset.

$w.onReady( () => {
$w(“#dataset1”).onReady( () => {
let item = $w(“#dataset1”).getCurrentItem();
if (item.Video) {
$w(“#video1”).show();
} else {
$w(“#video1”).collapse();
$w(“#video1”).hide();
}
} );
} );

$w.onReady( () => {
$w(“#dataset1”).onReady( () => {
let item = $w(“#dataset1”).getCurrentItem();
if (item.Video) {
$w(“#text27”).show();
} else {
$w(“#text27”).collapse();
$w(“#text27”).hide();
}
} );
} );

11

This code works for me but only on the first item in the dataset. If I include a “console.log” statement where the show and hide lines are, I can see it is only logging once. Should it work for all returned items or is there different code for this scenario?

12

Hey guys! If someone still struggling with this issue… The link below worked perfect for me:

13

Hello Greg and Marina, i used the above code samples and the tutorial link sames. but my image is collapsing on every page now even if the field has an image.
has anyone resolved this with a working code sample?
please help. thank you

14

Hi, I’ve tried this but doesn’t wotk for me. could you check please? https://editor.wix.com/html/editor/web/renderer/edit/de92755f-4900-404c-8a7b-0f0ba209d945?metaSiteId=3c3f540b-ba7c-4981-a52b-a6e556d7f4db&editorSessionId=9348146e-e128-4030-a48e-28eab7db6a72&referralInfo=dashboard

15

@nassik If you find a solution please share.
Everyone’s code seems to only work partially :frowning:

16

In my dynamic page of news. I have a repeater with different items linked to the database. For some news I won’t have an image so I need to hide the image item. Here is the link of the website: https://editor.wix.com/html/editor/web/renderer/edit/de92755f-4900-404c-8a7b-0f0ba209d945?metaSiteId=3c3f540b-ba7c-4981-a52b-a6e556d7f4db&editorSessionId=9348146e-e128-4030-a48e-28eab7db6a72&referralInfo=dashboard
The page name: Actualités (Title)
The website name: pmd
Thank you for your help

17

I am not able to make this work, the problem is same. If i have an image display it if its NULL then just collapse but nothing seems to be working.

18

Hi Greg. This was a long time ago but did you figure anything out. I am also working with a dataset and find it currentItem seems to be only first item so its like it doesn’t really iterate them… or that event doesn’t fire as it’s iterated onto the page.