Hiding empty sections in a database gallery

Discussion Ask a question
,
1

Hi guys,

I am now building a product information site with database. There are pictures for every product in row. I have already added them to my site in a thumbnail gallery by the following code:

import wixData from ‘wix-data’;
$w.onReady( function () {

// Gallery:
let refID = $w(“#dynamicDataset”).getCurrentItem().title;

wixData.query(‘Collection’).eq(‘title’,refID)
.find().then(result => {
const rowInDatabase = result.items[0];
const imagesToShow = ;
for ( let key in rowInDatabase){
if (key.includes(‘image’)) {
imagesToShow.push({src: rowInDatabase[key]})
}
}
$w(‘#gallery’).items = imagesToShow;
})
})

997×863 28.3 KB

1282×447 24 KB

However, I don’t have the same amount of pictures for every product. Is there any possibility to add another condition in if ((key.includes(‘image’) || … …) to avoid the empty section? So the number of thumbnails will be automatically match to the amount of pictures in row. Since it keeps showing the empty thumbnails on page now.

I might need to sort the pictures in gallery by their key / id as well.

Any suggestion will be appreciated!
Thank you in advance!

2

Hi,

you might want to have a look here about multi reference fields CMS: Working with Multiple-Item Reference Fields | Help Center | Wix.com

Shlomi

3

Hello Shlomi,
Thank you for the reply!

However, that function do not look fit what I am looking for. I need a thumbnail gallery. Could anyone help on this?

I wonder if it’s possible to amend this problem (hiding the empty sections in database) with the following code. So that I could at least arrange the order of images in gallery.

// Gallery:

let image1 = $w(“#dynamicDataset”).getCurrentItem().image001;
let image2 = $w(“#dynamicDataset”).getCurrentItem().image002;
let image3 = $w(“#dynamicDataset”).getCurrentItem().image003;
let image4 = $w(“#dynamicDataset”).getCurrentItem().image004;
let image5 = $w(“#dynamicDataset”).getCurrentItem().image005;
let image6 = $w(“#dynamicDataset”).getCurrentItem().image006;
let image7 = $w(“#dynamicDataset”).getCurrentItem().lifestyleimage;

$w(“#gallery”).items = [ { src: image2, },{ src: image1, },{ src: image3, },{ src: image4, },{ src: image5, }];

4

Hi fogjogger1992,

From trying the same on my website, the wix-data API leaves the empty images out of the item object. This means the imagesToShow array only includes real images to show.

Can you try to adjust the number of thumbnails to the length of imagesToShow?

Idan.

5

Hello Idan,

Thank you for your prompt reply!

It’s quiet weird. Actually I’ve tried both ‘imagesToShow’ code and $w(" #gallery ").items code before I start. The ‘magesToShow’ one leaves the empty images out of the item object. And that’s the reason why I choose to use this code.

However, after I upload all my images in database. It keeps showing the empty blanks. Most of my products have 3-6 images. The gallery keeps showing 5 thumbnails but will automatically add on when there are more than 5 images in database.

The number of thumbnails is the same as the total number of images. I’ve tried remove all the images in gallery but it’s still the same.

1708×1222 168 KB

But adjusting the number of thumbnails to the length of ‘imagesToShow’ sounds like a good direction to work on. I’ll do some more tries.

Thank you!

6

Sure, glad to help.

As a side note, Shlomi’s suggestion above can also help you model your data better: another table for the images with a multi reference will help you saving a different number of images per item, without additional columns for blank ones.

Good luck,
Idan.

7

Though it has been awhile, I’d still like to share how I solved this issue with this community.
Here’s the code.

1282×447 24.3 KB

// Gallery:

let image1 = $w(“#dynamicDataset”).getCurrentItem().image001;
let image2 = $w(“#dynamicDataset”).getCurrentItem().image002;
let image3 = $w(“#dynamicDataset”).getCurrentItem().image003;
let image4 = $w(“#dynamicDataset”).getCurrentItem().image004;
let image5 = $w(“#dynamicDataset”).getCurrentItem().image005;
let image6 = $w(“#dynamicDataset”).getCurrentItem().image006;
let image7 = $w(“#dynamicDataset”).getCurrentItem().lifestyleImage;

let refID = $w(“#dynamicDataset”).getCurrentItem().title;

if (refID === “TITLE C”){
$w(“#gallery”).items = [ { src: image1, },{ src: image2, },{ src: image3, },{ src: image4, }];
}
else if (refID === “TITLE D”){
$w(“#gallery”).items = [ { src: image1, },{ src: image2, },{ src: image3, },{ src: image4, },{ src: image5, }];
}
else {
$w(“#gallery”).items = [ { src: image1, },{ src: image2, },{ src: image3, },{ src: image4, },{ src: image5, },
{ src: image6, }];
}

})

Since most of my products have the same amount of the images. So I just add other condition for products that have different amount. It works pretty well so far.

Any suggestion will still be appreciated!
Thanks!

8

Hi,

if you are going down this route, you can iterate over the array of items before setting them into $w(" #gallery ").items and remove the empty ones, regardless of what title it is.
again i’d recommend you check out the multi ref capability, the code above will be complex to scale in case you have dozens of images :wink:

good luck!
shlomi