Hi, I have an existing static page with an image gallery with lots of images. I’d like to store the gallery with all the images in the database. How can I do that?
Just to explain further I am converting a number of pages with image galleries to one dynamic page.
Hi Christian,
If you’re working with a Pro Gallery unfortunately we don’t have a solution for you. If you aren’t, then you can get all the items in the gallery and insert them in your collection.
Set up a collection so it has at least one field of type image and note the field key.
This is what the code looks like:
import wixData from 'wix-data';
$w.onReady(function () {
let items = $w("#gallery1").items;
for (let i = 0; i < items.length; i++) {
let toInsert = {
"image1": items[i].src
}
wixData.insert("yourCollection", toInsert);
}
});
Make sure to replace:
-
“gallery1” with the ID of your gallery
-
“yourCollection” with the name of your collection
-
“image1” with the field key of the field in your collection where you want to store the image
You can put this code on your home page and load the site once either in preview or live to create the items in your collection. After that you want to either delete the code or comment it out so it doesn’t run every time your site loads.
-Jeff
works great! Just one question, would it be possible to store the images in one dataset row as an Image Gallery, rather than having a row for every image in the dataset.
Hey Christian,
Yep:
import wixData from 'wix-data';
$w.onReady(function () {
let items = $w("#gallery1").items;
let newGal = [];
for (let i = 0; i < items.length; i++) {
newGal[i] = { "src": items[i].src }
}
let toInsert = {
"galleryFieldKey": newGal
};
wixData.insert("yourCollection", toInsert);
});
Same instructions as before. “galleryFieldKey” is the field key for the gallery field in your collection.
-Jeff
great, working. However, in the live database editor I am getting an error message. See screen shot…
The column I created has the format Media Gallery (maybe that’s wrong?)
I missed something:
import wixData from 'wix-data';
$w.onReady(function () {
let items = $w("#gallery1").items;
let newGal = [];
for (let i = 0; i < items.length; i++) {
newGal[i] = {
"src": items[i].src,
"type": "image",
"slug":items[i].slug
}
}
let toInsert = {
"galleryFieldKey": newGal
};
wixData.insert("yourCollection", toInsert);
});
Not that I can see from here. Can you send me your site URL?
it just suddenly started working, however, when I want to do the same thing when opening a lightbox (through clicking on a button on the same page) with an image gallery then it does not work again. I am using the same code as above, but nothing is showing up in the database.
Hey Christian,
I’m not clear on why you would want to do this more than once. As I understood it you wanted to move images you had stored in a gallery, in a collection. But in any case, working with lightboxes is more complicated. You’ll need to read up on working with them in code here: https://www.wix.com/corvid/reference/wix-window.lightbox.html
-Jeff
Hi Jeff,
Well, I have a gallery on the main page and when I click on a button the lightbox opens which has another image gallery of different pictures.
When the lightbox opens the below code is running. The text fields and the lightning box name are nicely stored in the database, but the images are not coming through. The console.log(images.length); code displays 0 in the console.
Since the text is coming through it can’t be a permission issue.
Media data in the lightbox has been added manually using Wix.
import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;
import wixSite from ‘wix-site’;
$w.onReady( function () {
// let receivedData = wixWindow.lightbox.getContext();
//console.log(receivedData); //tried this, but console says “undefined”
let current = wixSite.currentPage;
//get the image gallery
let Gal = [];
let images = $w(“#gallery1”).items;
console.log(images.length); /// here the console displays “0”
for ( let i = 0; i < images.length; i++) {
Gal[i] = {
“src”: images[i].src,
“type”: “image”,
“slug”:images[i].slug
}
}
//get all the other info from the page
let inserting = {
“images”: Gal,
“balcony”: $w(“#text1”).text, ///Heading,
“laundry”: $w(“#text2”).text,
“beds”: $w(“#text4”).text,
“type”: $w(“#text5”).text,
“lightbox”: current.name
};
wixData.insert("PageData", inserting);
});
Just to explain further, I am trying to get the data that has been added to the webpage manually using Wix into the database in order to create a dynamic page, which just collects the data from the database rather than having lots of manual pages.
https://www.wix.com/corvid/reference/wix-window.lightbox.html#getContext
“The getContext() function returns the data object passed when the lightbox was opened using the openLightbox() function, if any data was passed. If the lightbox was opened another way, getContext() returns undefined.”
agree, getContext is not the way to go, since console displays “undefined”
now, the question is, how can I get the media gallery data from the Lightbox? As mentioned above, text fields come through nicely, but gallery doesn’t for some reason.
why is the below not working in a lightbox?
let images = $w(“#gallery1”).items;
console.log(images.length); /// returns 0