Connect more images from a database to a gallery.

I followed all the instructions on tutorials to make a dynamic item page, but i have a problem: i have an item (like a ring) and i have multiple images (of this ring), and i want to add a gallery of this item on my dynamic page.

I started to put on my dynamic page a gallery, and on my database like 3 columns with 3 different images of my item, but when i’m trying to connect these images to my gallery, the builder let me connect only one column, so in the gallery i only have one image.

Is there a solution for this? Like a code to add to let me connect multiple columns with different images?

I just want to have a dynamic page like the one in the video tutorial, but with more than one image for each item. Thanks.


Need something like this too, have multiple image in a gallery on a dynamic item page for each item.

Hi Fed (and Guillaume),

Just to make sure - we’re talking about a situation where you have multiple images per single entry at a Collection, correct? (meaning you have multiple columns with an Image Field type which holds several images of the same Ring)

In addition - you’ve created an “Item Dynamic Page” and not a “Category Dynamic Page”(?)

For my part it finally worked following what Yohav explain here:

You need to create another collection just for your pictures of rings.

In your page you create another dataset connected to your gallery, then you choose the picture field that you will have created in your new collection.

The setup of the photo collection was the hard part to understand for me, here is how i set it up:

For my part, LocationID would be your different ring, so you create a field type reference connected with your first collection where is your ring infos, then you use the code provided by yohav to make it work.

Sorry if its unclear im new to this, and im french lol

1 Like

Hi Guillaume,

It seems like a good solution for a case where the number of photos is indeterminate per product.

As you wrote there - there is an easy solution in case that you have a finite number of pictures per product and its simply adding a specific number of images to the page and connect them to the Products’ picture columns using Data Binding .
(I’ve added the second part since i’m not sure what is the situation in Feds’ case)

Thanks Kohai for your reply :slight_smile:
yes I used a dynamic item page, I already have the dynamic collection page for the categories of my items.
But, sometimes I can have like 3 photos for an item and 5 photos for another. So what is the best solution? I’d like to have everything on a single database, but if that’s not possible i’ll create another one with only images

Because if i have like 100 items or more, the database with only te images of the Guillaume’s solution will be really looong and not easy to organize


So 2 questions that might lead to an easier solution:

  1. Do you have a specific range of # of pictures per product? (lets say between 1 to 5 pictures per product for example)
  2. Do you know JavaScript?

yes the 1 to 5 pictures per product i think is perfect in my case.
I’m sorry but i don’t really know JavaScript, I can only write really really simple codes. I use codes for ShowIn and Out buttons ecc

I dont want to hijack your tread Fred but since were on it, Shiran, is there a better way to do what i did?

I dont find this that complicated (to link each picture for each locations) but i will have probably south of 3000 picture in my photo collection, since i have 200 Locations in my other collection with 10 to 50 picture per locations.
And…Will wix take it or it will slow the website down to death?

For now its working great, im an urban explorer and i want to showcase/document my explorations that ive been doing for over 10 years.

Guillaume I think he’s working on it, maybe with javascript :slight_smile: And I’m with you, with a second database with like 500 items with pictures will surely slow the website as hell haha. I think wix is a really good platform, they will surely find a solution to that :wink:

So lets try to break the answer here to 2 sections (1 per Use Case).

Since in your case there is a finite number of images per entry and we want to limit code usage, I would do the following thing:

  1. Add 5 images to the Dynamic page.
  2. Bind each of them to a different column.

What will happen in this case is that populated columns will populate their bound Image on the page, while an empty column will throw an error BUT will hide the component auto-magic.
I think this should solve your issue there.

Your case is a bit different due to the amount of images per location.
In your case I think that the best option for you is to maintain 2 collections (as Yoav suggested), but filter the content per page using the Non-Coding experience (and not via code).

Generally speaking what you can do is

  1. Create a Dynamic page using the Location as your Context
  2. Use a repeater that is connected to a 2nd Dataset that is connected to your Image Collection and filter that Dataset by the reference of the Dynamic Page.

In this case the Repeater will show only the images that has reference to the specific dynamic page context.

Ok, it works, but something possible about getting them in a layout? like this one…

and when people go on the little images on the left the photo is shown bigger on the right. If that’s not possible no problem, the results i got now are still fine :wink:

Hi experts, I’m enjoying this tread. Is really helpful. Took me quite sometime to get it right. I’m using Guillaume method. Thanks btw! Can I asked, is there a way to arrange photo album and place it in sequence? I wanted my main photo to be shown first.

Hey Fed
did you ever got your request from january the 15th answered?
I’m trying since weeks to get this to work … filling a gallery with pictures from a database – and all of the links and suggestions with javascript codes end in a mess. =(
All the suggestions whit binding pictures to the datasetcolumes is just not the same …
Did you find a solution at the end? Could you post some of your code so i can compare?
I tried to copy Guillaumes code but couldn’t figure what i have to change to make it run.
I’m far away from tiping codes, so i copy -paste an change the names to my needs … =(
Would be great to get some advice from you ore anyone else whit the same problem!

thnx in advance

nope, i just put all the images, without a gallery :frowning:

Hi all,

Just wanted to update that “Image Gallery” is one of our Top Requests and that we’re working on a solution that will simplify the Use Cases mentioned above.

I’ll let you know whenever it will be released.


Oh yessssss … Shiran you’re me hero!
Please, please hurry up! the sooner the «appreceater» … =)
Saludos from Switzerland


Cool Shiran :slight_smile: let us know!

following. I am trying to do several images as well per row and having no luck. Have any idea what the time frame is looking like before that feature is added for having a gallery but only displaying per row not entire images in database? Thanks so much.