Adding a photo gallery in a dynamic page

Discussion Ask a question
,
1

If I have a gallery in a dynamic item page, does each column in the database link to one photo (so really it’s not a gallery at all - just 4 images next to each others) or is there a more streamlined way to go about this?

2 Likes
2

Hi hello,

It depends on what you wanna do. If you know you are going to have exactly 4 photos for each item in your database, the way you describe is the simplest way to go.

If you have a variable number of images per database item, you can use a second collection for images linked to the items of the first. Think about recipes collection and recipe images collection. Given a recipe has fields like _id, title and description, maybe even a main photo, we can, for recipe images collection just create the fields recipeId and photo.

So now, for each recipe, we can grab the _id field value, and enter into the recipe photos collection one or more rows for this recipe, each with a single recipe photo.

We build a dynamic page for recipes like any other dynamic item page.

Once that is done, you add a gallery on the page, another dataset for recipe photos and connect it to the gallery. We are almost done at this point. We just need to set a filter on the second dataset so that it will only show the pictures of the recipe shown on the dynamic page. For this we need a little bit of javascript, that looks like the following

import wixData from 'wix-data';
$w.onReady(() => {
  $w('#datasetRecipes').onReady(() => {
    var recipeId = $w("#datasetRecipes").getCurrentItem()._id;
    $w('#recipeImagesDataset').setFilter(
      wixData.filter()
        .eq('recipeId', recipeId));
  });
});
3 Likes
3

Dear Yoav,

Thanks for the help, nevertheles it did not worl out, I attached an image of the code I wrote in the dynamic item page where I inserted the Gallery. When I Preview it it gives me the following error:
TypeError: $w(…).onReady is not a function

4

Hay Santiago,

The problem you see is a problem with element ids. Can you see the three strings marked in red in the code above? This is the IDE telling you that you are using the wrong ids. But don’t worry, it is quite simple to fix this.

The first id is for the dynamic dataset. Select it on the page and open the properties panel. At the top of the panel is the input for element id. This is the value you should enter instead of #datasetPlaces (with the # prefix). The second red indicator is the same. The third is the second dataset on the page, the one that is connected to the gallery. You should select that one as well, and then use the name from the properties panel.

You can read more about ids and the properties panel here .

5

Man, i so want to do that but images dont want to show in the gallery… i dont know what i do… please help

i have a collection called Locations, and i created another collection called Albums (for the albums of each locations)

How do i set it up?!

The thing i did not understand was the part with the reciepes id’s and linking the 2 database together with the code…

Thanks in advance

1919×953 347 KB

6

Hi,
You should use a Reference field in order to connect the databases - add a “location” reference for each album.
This way you can then filter via coding or bind the gallery (using the connect button) to the relevant Albums.

7

Thanks, it finally worked!

8

Is there a way to have 2 different album on my dynamic item page?

Example i have an album of the pictures i took or the location (the one we got to work) , and i need another album for historical picture.

I did another dataset and another collection and did the same code behind the other one but it seems to interfer because now both albums are showing empty space, basically i think they are taking all the pictures i have in my photo collection.

9

Hey Guillaume,

Adding another album should not be a problem. It sounds like you’re on the right track!
Did you get it to work?

J.

10

Hi,

No it did not work, i dont really know how to do it, i dont think the way i did it was the good way.

The images show in both my album, they take is on each good collection, but there is no filter applied because now i see all the photo i have in my collections.

2 Likes
11

Hi! I’m following this - I’m terribly stuck with this same situation Guillaume has…please help?

1 Like
12

I’ve created a dynamic page with a wix pro gallery - I want each gallery image/item to link to a separate item page that contains it’s own gallery (with detail/more images) of this one item selected.

13

Hey Guillaume,

A few things you should make sure you’ve done:

  1. Make sure you have one dataset for your historic pictures and one for the picture you took

  2. Make sure each gallery is connected to it’s own dataset. If two galleries are connected to the same dataset, they’ll display the same information. It sounds like you might be overwriting the filters.

  3. Double check the names in your code snippets for typos.
    By what you described, it should work. Could you add a bit more details or code snippets of what you’ve done, what you expect to happen and what happened?

J.

14

Hi There everyone,

I have a problem understanding how to setup the second database with rows for each image I want to display them in an item page gallery - (" So now, for each recipe, we can grab the _id field value, and enter into the recipe photos collection one or more rows for this recipe, each with a single recipe photo.)

I can not seem to change the _id field value to match that of the image for each row I’ve created. Should I 1. Create a new column with a text field value and add the _id in there? or 2. only keep the title and image as is and add a reference field column as Ohad explained above?

I dont want to delete more data at this point and trying to keep with only the Title field and image as you’ve explained above.

Thanks in advance***

15

Hey Jonathan, i finally got it to work! Thanks a lot.
3 collections and 3 dataset, here is the code if someone need it.

$w.onReady(function () {
});

import wixData from 'wix-data'; 
$w.onReady(() => {

$w(‘#dynamicDataset’).onReady(() => {
var locationId = $w("# dynamicDataset ").getCurrentItem()._id;
$w('# Albumdataset ').setFilter(
wixData.filter()
.eq(‘locationId’, locationId));
});
});

$w.onReady(() => {

$w('# dynamicDataset ‘).onReady(() => {
var locId = $w(“#dynamicDataset”).getCurrentItem()._id;
$w(’# HistoryDataset ').setFilter(
wixData.filter()
.eq(‘locId’, locId));
});
});

dynamicDataset : main dataset of my dynamic item page connected to my main collection
locationId : reference field in the second collection connected to the location (example house no1) in the first collection
Albumdataset : second dataset connected to the second collection where pictures for the first album is
locId : reference field in the third collection connected to the same location (house no1) in the first collection, for the second album
HistoryDataset : Third dataset connected to my third collection where are the images for my second album

hope i didnt got something wrong, im french so it does not help lol
I want to help other newbe like me haha

16

Ser what is the Var recipeid? How to show the image in my database? Using ID

17

This is my dynamic page and my database, now I want to show my image using ID but how? Can you tell me what my mistake? God bless

775×484 13.8 KB

788×670 255 KB

18

hi Louise
did you ever got a solution for your Problem? Gallery in a dinamic item page?
I’m stuck her since days and got lost in all above tips, id’s and databases names.

greets Andi

19

I did exactly as Yoav mentioned about and i connected a gallery to a different database which is also connected to my main database through a Reference id. when i preview my site the gallery shows for a short period and disappears what could be the reason. i get the message Loading the code for the Projects (Title) page. To debug this code, open jz7o9.js in Developer Tools.

20

Solved