I have been pulling my hair out trying to get this to work. All of our articles live in a collection and are linked to a dynamic item page. This page has a few other linked text items and buttons, but since each article has anywhere from one to six images I need a way to collapse the image and text fields that are not being used. The page is setup like this in the editor with the text and images of the article separated into fields body1, body2, body3,… and image1, image2, image3,… (See Screenshot)
This is how it is currently displaying (See Screenshot)
I need to add lines of code (and I am not a coder!) for each image to have fixed width and adjust its height as well as collapse if the linked field is empty. I have tried the following code to no avail…
//Wait for dataset1 to finish loading
$w(“#dynamicDataset”).onReady( function () {
//get the value
const imageValue = $w(‘#image38’).src;
//collapse the image box if imageValue is empty
if (imageValue === ‘’) {
$w(‘#image38’).collapse();
}
});
});
I am able to get the following fixed width code to work,
$w("#image30”).fitMode = “fixedWidth”;
but not when I am using it with the collapse code (I think it is because I don’t understand how to add multiple codes to the site and get parsing errors between them or at the end.
Can someone please help?
‘undefined’ is the result of a blank image
$w("#dynamicDataset").onReady(function () {
const imageValue= $w('#dynamicDataset').getCurrentItem().image2
if (imageValue ===undefined) {
$w('#image38').collapse();
}
//Add your code for this event here:
})
Thank you AV. I used your code and, when I cleared the image out the related field, the image disappeared but didn’t collapse. (See Screenshot)
What I need to accomplish is the empty image collapsing so the Body2 and Body3 flow into one another with no extra space.
Can this be done? I thought that HIDE meant that the empty space would remain but COLLAPSE meant the empty space would disappear.
Thank you for any help!
The code I wrote you should fold down in this area, sometimes it doesn’t work because
- Maybe there is an animation effect to the image?
- Is there another element on the sides?
- The Body2 text box drops from the top of the image. Separate space between element and element
Fixed it!
It was referencing the wrong field. Element #image32 is linked to field IMAGE3, not IMAGE2…
$w ( “#dynamicDataset” ). onReady ( function () {
const imageValue= $w ( ‘#dynamicDataset’ ). getCurrentItem (). image2<----
if ( imageValue ===undefined ) {
$w ( ‘#image38’ ). collapse ();
}
//Add your code for this event here:
})
Glad I helped. Mark the answer that helped you as the best answer to help the following users
Wait! UGHHHH… now it is showing the big empty spaces again…
This is code for the multiple images:
Image1 (cover image), Image3 and Image5 are populated while Image2, Image4 and Image6 are empty. This is what it looks like:
I swear it was just working though! :o(
Surrey. Send the code yourself here. I’ll fix it for you.
This is the code I have entered where image30 is the cover image and never needs to collapse, image31 through image35 do need to collapse, and all images should have fixed width enabled.
$w( “#dynamicDataset” ).onReady( function () {
$w( "#image30”).fitMode = " fixedWidth ";
$w( "#image31”).fitMode = " fixedWidth ";
$w( "#image32”).fitMode = " fixedWidth ";
$w( "#image33”).fitMode = " fixedWidth ";
$w( "#image34”).fitMode = " fixedWidth ";
$w( "#image35”).fitMode = " fixedWidth ";
}
});
});
$w( “#dynamicDataset” ).onReady( function () {
const imageValue= $w( ‘#dynamicDataset’ ).getCurrentItem().image2
if (imageValue ===undefined) {
$w( ‘#image31’ ).collapse();
}
//Add your code for this event here:
})
$w( “#dynamicDataset” ).onReady( function () {
const imageValue= $w( ‘#dynamicDataset’ ).getCurrentItem().image3
if (imageValue ===undefined) {
$w( ‘#image32’ ).collapse();
}
//Add your code for this event here:
})
$w( “#dynamicDataset” ).onReady( function () {
const imageValue= $w( ‘#dynamicDataset’ ).getCurrentItem().image4
if (imageValue ===undefined) {
$w( ‘#image33’ ).collapse();
}
//Add your code for this event here:
})
$w( “#dynamicDataset” ).onReady( function () {
const imageValue= $w( ‘#dynamicDataset’ ).getCurrentItem().image5
if (imageValue ===undefined) {
$w( ‘#image34’ ).collapse();
}
//Add your code for this event here:
})
$w( “#dynamicDataset” ).onReady( function () {
const imageValue= $w( ‘#dynamicDataset’ ).getCurrentItem().image6
if (imageValue ===undefined) {
$w( ‘#image35’ ).collapse();
}
//Add your code for this event here:
})
$w("#dynamicDataset").onReady(function () {
$w('#image30').fitMode = "fixedWidth ";
$w('#image31').fitMode = "fixedWidth ";
$w('#image32').fitMode = "fixedWidth ";
$w('#image33').fitMode = "fixedWidth ";
$w('#image34').fitMode = "fixedWidth ";
$w('#image35').fitMode = "fixedWidth ";
const imageValue1 = $w('#dynamicDataset').getCurrentItem().image2,
imageValue2 = $w('#dynamicDataset').getCurrentItem().image3,
imageValue3 = $w('#dynamicDataset').getCurrentItem().image4,
imageValue4 = $w('#dynamicDataset').getCurrentItem().image5,
imageValue5 = $w('#dynamicDataset').getCurrentItem().image6;
if (imageValue1 === undefined) {
$w('#image31').collapse();
}
if (imageValue2 === undefined) {
$w('#image32').collapse();
}
if (imageValue3 === undefined) {
$w('#image33').collapse();
}
if (imageValue4 === undefined) {
$w('#image34').collapse();
}
if (imageValue5 === undefined) {
$w('#image35').collapse();
}
})
You can do the image setup even without coding
This is brilliant! THANK YOU!!
For some reason I have to refresh the page twice for the .svg icons I’ve set to collapse to actually collapse if they’re undefined. Anyone know what might be going on?
thank you for this. been going crazy over how to collapse null empty image fields for dynamic pages.
