Access pics in Collection stored in Media Gallery field type

Ask the community
, ,
1

I have a collection named “Pictures”, with 2 rows labelled “Canada” and “Australia” with the field key “country”. In either of these rows, is only 1 column with the field key “pics” of type “Media Gallery”, with 3 pictures stored in each. Ill attach a pic below for a visual of this.

I have an image on my site that I want to set through code, to any of the pics in the collection. For example, to the 3rd picture in the Canada gallery (the chipmunk). I haven’t been able to figure out how to do this. I think the images are stored in an array, but I cant seem to select it.

Here’s what I’ve come up with, it may be close or very far off what I need to do:

import wixData from 'wix-data';

$w.onReady(() => {
    wixData.query("Pictures")
        .eq("country", "Canada")
        .find()
        .then(results => {
            let items = results.items;
            $w('#image').src = items.pics[2];
        })
})

The error I get is “Cannot read property ‘2’ of undefined”

Here is a screenshot of the collection where the pics are stored:

2

Debug results on console.log;
items is an array of object so try items[0].pics[2]
Chec the results.items.length > 0

3

Success! Thank you so much, just a simple indexing error. I also had to put .src at the end for it to grab the source of the image from the collection.

Here is the working code for others to reference:

import wixData from 'wix-data';

$w.onReady(() => {
    wixData.query("Pictures")
        .eq("country", "Canada")
        .find()
        .then(results => {
            let items = results.items;
            $w('#image').src = items[0].pics[2].src;
        })
})

I plan to incorporate this into the Random Gallery example seen here later.

4

And here is the working code to use as a Random Gallery, based off the code from this example.

My code displays 5 pictures in the gallery on load, with a “Load More” button below the gallery. Once clicked, the rest of the gallery is displayed. This supports a mix of both images and videos in the gallery as well.

import wixData from 'wix-data';
import wixWindow from 'wix-window';

let items;  //store images from gallery
let count;  //store how many images in gallery
var rnd = [];   //store randomized gallery order           
var PicInfo = [{}]; //array of pic info dictionaries
const cInitialDisplay = 5; // # of images to display in the gallery on load

$w.onReady(async function () {
 // Check the render env so this is just done once.
 // Otherwise, server-side will render, and then the gallery images
 // switch to the gallery images that the client-side rendered.
 if (wixWindow.rendering.env === 'browser' || wixWindow.viewMode === 'Preview') {

let Canada = 0;
let Australia = 1;

 let res = await wixData.query("CollectionName").find(); //Change this to match
        items = res.items[Canada].pics;
        count = items.length; // how many images do we have?
        console.log(count);

 while (rnd.length < count) {    //randomize order of entire gallery, store order in rnd var
 var r = Math.floor(Math.random() * count);
 if (rnd.indexOf(r) === -1) rnd.push(r);
        }

 var i;
 for (i = 0; i < cInitialDisplay; i++) {
            PicInfo[i] = {
 "type": items[rnd[i]].type,
 "alt": items[rnd[i]].title,
 "title": items[rnd[i]].title,
 "src": items[rnd[i]].src
            }}
        $w("#gallery1").items = PicInfo;
        $w('#gallery1').show(); // show the gallery after the inital images are set
    }
});

export function bLoad_click(event) {
    $w('#bLoad').hide();
 
 var i;
 for (i = cInitialDisplay; i < count; i++) {
            PicInfo[i] = {
 "type": items[rnd[i]].type,
 "alt": items[rnd[i]].title,
 "title": items[rnd[i]].title,
 "src": items[rnd[i]].src
            }}
        $w("#gallery1").items = PicInfo;
        $w('#gallery1').show(); // show the gallery after all the images are set
}