Can't connect category images to repeaters

Ask the community
1

I want to add category images to blog posts and repeaters but I can’t seem to get it to work. I’ve added images to my categories but when I connect the dataset there is no option for category image. I thought I saw a tutorial regarding this before but can’t find it now.

Can this be added to other datasets too?

Here is the url - https://in-good-company.editorx.io/arklow-town

2

Can you add screenshot of the database and the place you want to display category image?

3

Sure, it’s just the basic Blog Post database, I’ve not added a custom one yet. I know I can’t add new items to that one but I need the option for blogs so it’s simple for the client to add content.

2110×1364 306 KB

2862×1524 419 KB

2352×1180 289 KB

4

It’s a little tricky to do that.
You need to create another database that will contain one image field and another field that is a reference to a particular category.
Then for each item in the repeater you need to query the database you created and bring the correct image.

Here is an example:

Extra database:

987×347 29 KB

753×559 28.2 KB

Code:

// Start only when the dataset is ready with all the repeater data.
export function postsDataset_ready() {
    $w('#posts_repeater').forEachItem(async ($item, itemData) => {
         if (itemData.categories.length > 0) {
           let category_id = itemData.categories[0];
           $item('#category_image_id').src = 
               await getCategoryImage(category_id);
        }
    });
}

async function getCategoryImage(categoryID) {
 return wixData.query('Your_categories_extra_data_database')
        .eq('category', category)
        .find()
        .then(result => {
            return result.items[0].image;
        });
}
5

Hmm, I’ve watched the video about 5 times now and changed every variable I can see to match yours, but it doesn’t seem to work. I must have done something wrong.

// Start only when the dataset is ready with all the repeater data.
export function postsDataset_ready() {
    $w('#postsRepeater').forEachItem(async ($item, itemData) => {
 if (itemData.categories.length > 0) {
 let category_id = itemData.categories[0];
           $item('#categoryImage').src = 
 await getCategoryImage(category_id);
        }
    });
}

async function getCategoryImage(categoryID) {
 return wixData.query('CategoriesExtraData')
        .eq('category', categoryID)
        .find()
        .then(result => {
 return result.items[0].image;
        });
}

1272×659 43.7 KB

6

Hi, sorry for the late response.

Make sure you have created the export function postsDataset_ready () function through the properties pane l - you need to select the dateset and then click on the properties panel " onReady ".
Make sure you do not have a code error mark.
Make sure each item has the correct ID.
Make sure the database is synchronized live.
Make sure you have categories on the blog.
Make sure each article has a specific category (this is done by editing the article).

Update if you were able to resolve it.