repeater with or without image

Ask the community
,
1

hello there :slight_smile:

     **repeater question-**  users post are shown using a repeater. is there a way to make an option of "with or  
        without an image"? so there wont be a blank area on posts without an image?

thanks in advance and have a wonderful day :slight_smile:
Michal

2

Hello, Michal.

You can get the idea from the tutorial below and hide an image element when there is nothing to show in a database collection.

Corvid Tutorial: Hiding a Video Player When There Is No Video to Play

Let me know if you have any further questions.

Have a nice one!

3

Hello, מיכל שושני … :raised_hand_with_fingers_splayed:

You can by collapsing the image in the items you don’t want the image to appear in, for example, hiding the image for items that don’t have images:

$w('#repeater').onItemReady( ($item, item) => {
    if (item.image === undefined) {
        $item('#itemImage').collapse();
    }
})

Hope that helps!
Ahmad

4

thank you so much :slight_smile: its not wroking for me but maybe its because i didnt put it in the right place. im new at this, as you probably see haha
do i put the code in every page the status repeater shows?
this is what the code lookes like…

5

thank you so much :slight_smile: ill check it out now and let you know!

6

Yes you do need to create an onItemReady function for each repeater you want to perform custom actions on.

Regarding to my code, it was just an example, you need to adapt it to your elements and collections, the item. image is the key of field holding the image in the database, you need to change it to the field key to YOUR field that stores the image.

Also, the onItemReady function must be inside the page’s onReady function in order to work properly.

Hope that helped!
Ahmad

7

thank you for this turtorial. it did collapes the image but also when the image field is not empty.
any idea why?

8

see? :joy: i told you im new at this.
ive tried using the code in the turtorial and it indeed collapse the empty image section.
but, it collapsed images as well.
do you have any idea why?
this is the code i used.


oh, and thank again for taking the time to help me out :slight_smile:

9

All of us were new one day, I can’t understand what’s your question!
What do you want to achieve? And what you don’t want to?

10

ok, so i want the option of having in the repeater posts that HAVE an image and posts that DONT have an image.
when a post is posted without an image, i have a big blank area.
so, i would like to have an option of collapsing the area of the image if their is no image in field.
i hope im explaining myself well :slight_smile:

11

The area itself is blank, so there’s nothing you can collapse, you just need to set the margins 70px or less in order for the collapse() function to shift all the elements upward.

12

ahmad, finnaly we got it working! my dad helped me with it.
this is the code we used in order to collapes empty image fields in a repeater.
thanks agai for all your help!, michal

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {
    $w("#userStatus").onItemReady(($item, itemData, index) => {
        $item("#Status").text = itemData.title;
 if (itemData.statusImage !== undefined && itemData.statusImage !== null) {
            $item("#statusesImage").src = itemData.statusImage;
        } else {
            $item("#statusesImage").collapse();
        }
    });

});
13

That’s great מיכל שושני :wink:
Happy coding :computer:

14

I have the same issue… Did anyone figure out why? The replies above aren’t really working for me either.