Image Gallery hosted in Google Drive Folder

Question

I've been looking for a way to create a gallery on a website with images from a folder in my google drive. Which I have shared here: https://drive.google.com/drive/u/0/folders/0Bwx-OwnNeIvwRldSVlU5SGN0dGs inside it is a simple HTML, and a gallery folder with pictures of monster trucks and cute animals. And the goal is here to create a gallery where people can upload images of well; monster trucks and cute animals.

I've been searching for all kinds of methods of achieving this and this is what I have found so far:

In short what I am trying to achieve is to get the id's of images in a publicly shared folder in my G-Drive. Then use those id's to create a gallery via JS in an HTML.

What my HTML looks like now:

index.html

<h1>Cute Animals & <br> 
Monster Vehicles</h1>

<div id="gallery">
<!-- all divs will append here -->
</div>

What I researched on the Drive SDK:

I've been using the "try it" section here to figure out what i need to do. https://developers.google.com/drive/v2/reference/children/list#examples

Request result: GET https://www.googleapis.com/drive/v2/files/0Bwx-OwnNeIvwRG5rNzZ6OURSNEk/children?fields=items%2Fid

Response result:

200 OK
- SHOW HEADERS -
{
"items": [
{
 "id": "0Bwx-OwnNeIvwaFZXVzVmMl9ILUU"
},
{
 "id": "0Bwx-OwnNeIvwVk1DTEpnR0J6VHc"
},
{
 "id": "0Bwx-OwnNeIvwblBHLVEza0hxY2s"
},
{
 "id": "0Bwx-OwnNeIvwTkZZVXp0dDg4bXc"
},
{
 "id": "0Bwx-OwnNeIvwZTN1YzZrcm53eFE"
},
{
 "id": "0Bwx-OwnNeIvwYkZ5ZXpjWHhKcFk"
}]}

What I would like for the script to do:

script.js

var imageIds = <!-- ids from the the response --> ;
var x = imageIds.length;
for (var i = 0; i < x; i++) {
 <!-- create a <div> --> 
}
//See below*

Create a div: In the for loop it will create a <div> with a specific "class" and an <img> inside that div, with a "src="http://drive.google.com/uc?export=view&id=IMAGE-ID" where the "IMAGE-ID" was gotten from the "Response". the <div> will then be appended to <div id="gallery"> in the index.html.

What I would like for the end HTML do look like:

index.html:

<h1>Cute Animals & <br> 
Monster Vehicles</h1>

<div id="gallery">

   <div class="brick">
      <img src="http://drive.google.com/uc?export=view&id=0Bwx-OwnNeIvwaFZXVzVmMl9ILUU">
   </div>

   <div class="brick">
      <img src="http://drive.google.com/uc?export=view&id=0Bwx-OwnNeIvwVk1DTEpnR0J6VHc">
   </div>

   <div class="brick">
      <img src="http://drive.google.com/uc?export=view&id=0Bwx-OwnNeIvwblBHLVEza0hxY2s">
   </div>

 <!-- and so on ... -->

</div>

What I am unsure of now, is how this needs to be authenticated to get the image-ids from the G-Drive folder. This could be hosted from Google Drive itself with their hosting links, or it could be created through Google Apps Script, and the functionality to serve HTML there, and that would make the authentication easier as you can get everything from drive directly.

I don't understand why this is no where to be found, that does not involve a payment. It would be great if everyone had the opportunity to create image galleries from images in a G-Drive folder.

Would really like your help on this one. Thanks alot.

Answer 1

Firstly, about the code itself, it would be something like that:

document.addEventListener('DOMContentLoaded', function() {
  var response = {
    "items": [{
      "id": "0Bwx-OwnNeIvwaFZXVzVmMl9ILUU"
    }, {
      "id": "0Bwx-OwnNeIvwVk1DTEpnR0J6VHc"
    }, {
      "id": "0Bwx-OwnNeIvwblBHLVEza0hxY2s"
    }, {
      "id": "0Bwx-OwnNeIvwTkZZVXp0dDg4bXc"
    }, {
      "id": "0Bwx-OwnNeIvwZTN1YzZrcm53eFE"
    }, {
      "id": "0Bwx-OwnNeIvwYkZ5ZXpjWHhKcFk"
    }]
  };

  var imageIds = response.items.map(function(item) {
    return '<div class="brick"><img src="http://drive.google.com/uc?export=view&id=' + item.id + '"></div>';
  });

  document.getElementById('gallery').insertAdjacentHTML('afterbegin', imageIds.join(''));
});

<div id="gallery"></div>

---

About the authorization, take a look at their documentation.