Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Feb 5

Can't connect category images to repeaters

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

3 answers2 replies
2
Feb 9Edited: Feb 9

Hi, sorry for the late response. Make sure you have created the export function postsDataset_ready () function through the properties panel - 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.

1
Feb 5

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

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.




Feb 5Edited: Feb 5

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:

Add post category image to repeater item
.mp4
Download MP4 • 32.30MB

Extra database:



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;
        });
}

1

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;
        });
}





Editor X

Design your boldest creations.