Connect Appery.io backend with Photoswipe gallery

[Snehal Dhruve]

I was able to make it work like in the tutorial. but is there any way to connect appery.io backend with a collection named photoDB to the photoswipe gallery? I am a jr developer but trying to using appery.io to create an app and currently stuck at this.
If not then how do a make a gallery by sourcing images from DB and displaying in slider format in the app. Thanks.

[maxkatz]

We will be adding Server Code feature shortly, so you will be able to write any custom code to connect to anything.

[Snehal Dhruve]

Is there a way around using the grid and image to do a gallery view till then?

[Kateryna Grynko]

Hi Snehal,

To get Image object run: codeAppery("image_component_name").get(0) /code
Run the following code to get base64 string with encoded image from Image object.
codefunction getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

Code: Select all

 // Copy the image contents to the canvas 
 var ctx = canvas.getContext("2d"); 
 ctx.drawImage(img, 0, 0); 

 // Get the data-URL formatted image 
 // Firefox supports PNG and JPEG. You could check img.src to 
 // guess the original format, but be aware the using "image/jpg" 
 // will re-encode the image. 
 var dataURL = canvas.toDataURL("image/png"); 

 return dataURL; 

}
/code
After you get the base64 string you can send it to Appery.io Database. The same string can be received from Database in mapping to Image component Asset.

When gallery images set is generated go ahead and follow the tutorial.

[Snehal Dhruve]

Thanks Katya, let me give it a try and get back to you on this.

[Snehal Dhruve]

Katya, Is it possible to get snapshots like your typical tutorials. Gave it a try but wasnt that successful. Thanks

[Kateryna Grynko]

Sorry, this is outside the scope of our support. What is the problem with implementing this?

[Pratik Sah]

hey katya ...can u please ellaborate the thing u mentioned ?

where do we implement the code to get base64 string ?

thanks

[Maryna Brodina]

Hello! Looks like there is some misunderstanding. You can just add photoswipe plugin to your app.
http://www.photoswipe.com/
http://www.photoswipe.com/latest/exam...

Have you already tried to add this plugin to your app? What kind of problem you have?

[Pratik Sah]

Hello !
I have tried photoswipe tutorial was able to build a photoswipe gallery but i want the images to be load from the database (the backend service).

I have a build a database where i m capturing and saving the images through camera ..and i want to display all these images in my photoswipe gallery .

Please help me !