Collapsing images in a repeater when not populated in content manager

Ask the community
, , ,
1

I have connected a repeater to a content collection titled “news”. These are two different repeaters on desktop and mobile as I have a different design for mobile view.

I have 3 image columns in my content collection to have up to 3 images for each news entry (as i cannot add a gallery in the repeater)

1168×227 45.8 KB

I want the images to only show if the column is populated in the content manager.

This is the code that I added in for the mobile repeater:

$w ( “#repeater8” ). onItemReady (( $item , itemData ) => {
if ( itemData . image3 !== undefined && itemData . image3 !== null ) {
$item ( “#imageX308” ). src = itemData . image3 ;
} else {
$item ( “#imageX308” ). collapse ();
}
});

    $w ( "#repeater8" ). onItemReady (( $item ,  itemData ) => { 
    if  ( itemData . image2  !==  **undefined**  &&  itemData . image2  !==  **null** ) { 
        $item ( "#imageX309" ). src  =  itemData . image2 ; 
    }  **else**  { 
        $item ( "#imageX309" ). collapse (); 
    } 
})

And this has seemed to work:

429×929 230 KB

450×915 322 KB

445×965 358 KB

I have done the exact same code but changed it to link with the images and repeater that appears in desktop view:

$w ( “#repeater8” ). onItemReady (( $item , itemData ) => {
if ( itemData . image3 !== undefined && itemData . image3 !== null ) {
$item ( “#imageX300” ). src = itemData . image3 ;
} else {
$item ( “#imageX300” ). collapse ();
}
});

    $w ( "#repeater2" ). onItemReady (( $item ,  itemData ) => { 
    if  ( itemData . image2  !==  **undefined**  &&  itemData . image2  !==  **null** ) { 
        $item ( "#imageX292" ). src  =  itemData . image2 ; 
    }  **else**  { 
        $item ( "#imageX292" ). collapse (); 
    } 
})

})

However, it does not collapse the images and instead leave a big gap as highlighted here in yellow:

940×498 281 KB

940×512 269 KB

Can anyone please provide some assistance as to where I have gone wrong here?

Thanks!

2

Hi,
your code snippet seems good. Maybe you have some errors in the previous part of the code that stops the execution. When you debug the code do you see some errors? May you can help yourselves debugging putting some console.log() message to see if the code is actually executed. The messages will compare then in the browser console.

3

Thanks for the reply!

I am new to debugging etc… I found this error in the browser console:

1256×77 5.94 KB

I found this thread that could help but still can’t figure it out:

Still struggling to see why this works for the mobile repeater but not desktop.

4

I have solved this… almost!

I realised the repeater for the desktop version has px amounts for each row with images (something I must have done previously).

286×601 4.11 KB

I changed these to auto and it is now working for desktop!

I just now have a small white gap where these images are collapsed. I did notice this in the mobile version but it seems to be more obvious in desktop. I remember reading about this in another forum so I will investigate further, but if you do have any tips that would be great!

5

Well done,
Maybe you can reduce the gap manually resizing the repeater, in order to make the bottom part of the repeater touch the last image. As well the gap between the images will not disappear if you collapse them. I think at least.