Connecting Gallery images to image fields in database.

Ask the community
,
1

Hello,
I want to connect 3 images in 3 fields of a database collection to a gallery with 3 images? Currently i can connect only one image/field to an image in a gallery and the other pictures in the gallery is blank. I always have 3 images and I don’t want to create a new database collections for storing my images again as explained in this post . So is there a simple solution for this? Thanks.

2

Hi nithinpanand,

You can do so with a bit of code. You will need to read the images from the current item in the dataset, format at array of images and set it at the .items property of the gallery.

It will look something like the following

export function DATASET_onReady() {
  let item = $w('#DATASET').getCurrentItem();
  $w('#GALLERY').items = [
    {src: item.FIRST_IMAGE_URL, description: item.FIRST_IMAGE_DESC, title: ..., link: ...},
    {src: item.SECOND_IMAGE_URL, description: item.SECOND_IMAGE_DESC, title: ..., link: ...},
    {src: item.THIRD_IMAGE_URL, description: item.THIRD_IMAGE_DESC, title: ..., link: ...}
  ];
}

Note: you need to replace all upper case names with element ids or field names.

  • DATASET - the id of your dataset, as in the property panel.

  • GALLERY - the id of your gallery, as in the property panel.

  • FIRST_IMAGE_URL - the field name of the first image in your collection.

  • SECOND_IMAGE_URL, THIRD_IMAGE_URL - the field name of the first image in your collection.

  • you can also add image description, title and link as shown in the code above.

3

Thanks a lot Yoav… Its working…

4

Hi there,

Tried the answer posted on this one and another one ( view here ) and can’t get it to work. Do you have to connect the dataset to the gallery?

5

Hi Maisha,

You do not need to connect the dataset to the gallery.
The gallery is populated by the code.

Can you share your code ?

6

Hi there
See below.
The gallery isn’t populating with the images in the database.

});

export function DATASET_onReady() {
let item = $w(‘#datasetProperties’).getCurrentItem();
$w(‘#gallery1’).items = [
{src: item.image1},
];
}

7

Hi Maisha,

It is unlikely that your dataset id is ‘DATASET’
Click the dataset > properties to find the correct id.

8

Hi Im trying to do this as well.
Doesnt bring the images in. Not sure what im doing wrong.

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

export function Profile_onReady() {
let item = $w(‘#Profile’).getCurrentItem();
$w(‘#membergallery’).items = [
{src: item.yourWorkProducts1},
{src: item.yourWokProducts2},
{src: item.yourWorkProducts3}
];
}

Thank you so much if anyone can help.

9

Hi,

Can you share your console errors, if any ?

10

Thanks Ido - Sorry complete newbie.

Where do I see these?

If it’s in the area at the bottom where the code goes. There are no errors before or when in preview.

11

Hi,

See how to interact with the console here

12

Hi thanks for your help:)
In the console on wix on preview i get:
Loading the code for the Profile (All) page. To debug this code, open eg04h.js in Developer Tools.

In chrome developer tools console i get this:
Failed to load resource: the server responded with a status of 504 (GATEWAY_TIMEOUT)
settings_sync Failed to load resource: the server responded with a status of 504 (GATEWAY_TIMEOUT)
Thank you very much for your help

13

Hi Robyn,

Try printing the values of item.yourWorkProducts1, item.yourWorkProducts2, item.yourWorkProducts3 by using console.log to see if you retrieve the correct values:

export function Profile_onReady() {
 let item = $w('#Profile').getCurrentItem();
 console.log(item.yourWorkProducts1)
 console.log(item.yourWorkProducts2)
 console.log(item.yourWorkProducts3)
}
14

Thanks Ido. Its all gone way over my head but thank you for your help.

15

Can anyone help me. I am creating and REAL ESTATE website and i am trying to link images to a gallery to display the property photos. Can anyone give me a step by step of what i need to do to achieve this please.

16

Hay Emerson,

First, best is to ask as a new question and add more details so we can help you better.

Second, if your images are in different fields in the database, have a look at my answer above (the first answer). The code snippet, with little adjustments as described there will do the job.

17

There seems to be something missingfrom this code I found this or coding almost the same yesterday and it was working fine and then something happened and I lost yesterdayswork and all the history
There seems to be something missing from this code I found this or coding almost the same yesterday and it was working fine and then something happened and I lost yesterdays work and all the historyy

export function DATASET_onReady()
{ let item = $w(’ #DATASET ‘).getCurrentItem();
$w(’ #GALLERY ').items = [
{src: item.FIRST_IMAGE_URL, description: item.FIRST_IMAGE_DESC, title: …, link: …}, {src: item.SECOND_IMAGE_URL, description: item.SECOND_IMAGE_DESC, title: …, link: …}, {src: item.THIRD_IMAGE_URL, description: item.THIRD_IMAGE_DESC, title: …, link: …} ]; }

18

i tried connecting a gallary to a photo data base. in preview the gallary shows for a very short period and then disappears what could be the problem.

19

export function DATASET_onReady() {
let item = $w(‘#dataset1’).getCurrentItem();
$w(‘#gallery1’).items = [
{src: item.uploadButton1, description: item.ProfilePicture},
{src: item.uploadButton2, description: item.ProfilePicture2},
{src: item.uploadButton3, description: item.ProfilePicture3},
{src: item.uploadButton4, description: item.ProfilePicture4},
{src: item.uploadButton5, description: item.ProfilePicture5},
{src: item.uploadButton6, description: item.ProfilePicture6},
];
}

not working please help

20

It is unlikely that your dataset id is ‘DATASET’

Click the dataset > properties to find the correct id.