Horizontal collapse of images with null entry in database

Ask the community
,
1

I have a database that I connect the content on a dynamic page. I have 12 images that are linked individually to different fields in the database. When the field is null I get a blank space. Is there any way to eliminate this?
Full Display:

889×289 41.3 KB

After Filter and collapse:

934×299 19.8 KB

2

You need to tell us how the images are displayed on your actual page, have you used seperate image boxes for each pic or are you displaying them in a repeater or a gallery?

If they are in a repeater or a gallery, then they should just be shown one after another all depending on what your code returns from the filter etc.

If you are doing seperate image boxes for each, then you are better placing them all in a container so that the collapse and expand functions affect them all and not just collapse the individual image box without affecting the others and not moving them up as you required.
https://support.wix.com/en/article/corvid-how-page-layout-is-affected-when-elements-change-size

Also, what code are you using to filter the dataset and image elements collapse?

See here for collapse/expand code and Image info.
https://www.wix.com/corvid/reference/$w.HiddenCollapsedMixin.html
https://www.wix.com/corvid/reference/$w.Image.html

Also, you can use this sample code and just modify it for your images instead of the video that it currently is setup for.
https://support.wix.com/en/article/corvid-tutorial-hiding-a-video-player-when-there-is-no-video-to-play

Also, see this previous forum post about similar too.
https://www.wix.com/corvid/forum/community-discussion/hide-an-image-when-a-text-value-is-null

3

@givemeawhiskey , Thank you once again. Yes I have each image as an individual image. I will try a container approach and let you know what happens. Bill

4

I apologize for the delay in my response . I tried a Container Box with the same results. The code is as follows:
$w.onReady( function () {
$w(“#dynamicDataset”).onReady(() => {
var googleMaps = $w(“#dynamicDataset”).getCurrentItem().googleMaps;
var bbb = $w(“#dynamicDataset”).getCurrentItem().bbbLink;
var homestarsLink = $w(“#dynamicDataset”).getCurrentItem().homestarsLink;
var trustedPros = $w(“#dynamicDataset”).getCurrentItem().trustedProsLink;
var n49 = $w(“#dynamicDataset”).getCurrentItem().n49Link;
var yelp = $w(“#dynamicDataset”).getCurrentItem().yelpLink;
var houzz = $w(“#dynamicDataset”).getCurrentItem().houzzLink;
var eiei = $w(“#dynamicDataset”).getCurrentItem().eieiHomeLink;
var gta = $w(“#dynamicDataset”).getCurrentItem().gtaLink;
var icon1 = $w(“#dynamicDataset”).getCurrentItem().iconImage1;
var icon2 = $w(“#dynamicDataset”).getCurrentItem().iconImage2;
var icon3 = $w(“#dynamicDataset”).getCurrentItem().iconImage3;
if (homestarsLink === null ) {
$w(“#image15”).collapse();
} else { $w(“#image15”).expand(); }
if (bbb === null ) {
$w(“#image17”).collapse();
} else { $w(“#image17”).expand(); }
if (googleMaps === null ) {
$w(“#image26”).collapse();
} else { $w(“#image26”).expand(); }
if (trustedPros === null ) {
$w(“#image23”).collapse();
} else { $w(“#image23”).expand(); }
if (n49 === null ) {
$w(“#image25”).collapse();
} else { $w(“#image25”).expand(); }
if (yelp === null ) {
$w(“#image24”).collapse();
} else { $w(“#image24”).expand(); }
if (houzz === null ) {
$w(“#image66”).collapse();
} else { $w(“#image66”).expand(); }
if (eiei === null ) {
$w(“#image68”).collapse();
} else { $w(“#image68”).expand(); }
if (gta === null ) {
$w(“#image67”).collapse();
} else { $w(“#image67”).expand(); }
if (icon1 === null ) {
$w(“#image117”).collapse();
} else { $w(“#image117”).expand(); }
if (icon2 === null ) {
$w(“#image118”).collapse();
} else { $w(“#image118”).expand(); }
if (icon3 === null ) {
$w(“#image119”).collapse();
} else { $w(“#image119”).expand(); }
});
})

5

The easiest way to do it, is to use a repeater that contains an image place holder (and if your images have different sizes, then you’ll have to put a slider gallery instead), and do something like:

$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
    let item = $w("#dynamicDataset").getCurrentItem();
    let images = [item.googleMaps, item.bbbLink/*etc*/];//put all your images here
   images = images.filter(e => e);//eliminate undefined values
    images = images.map((e, index) => {return { _id: index.toString(), image: e};});//create array for the repeater.
    $w("#repeater1").data = images;//bind the data to the repeater
$w("#repeater1").onItemReady(($i, iData, inx) => {
    $i("#image1").src = iData.image;
        })
    })
})