How to serve G-Drive folder images in any website?

I have always wondered how I can store my memories on a website without any extra costs. When I explored a bit, I found Cloudinary, which serves images in a CDN format (still the fastest). However, it starts to cost after a certain amount of usage. I was looking for a solution that wouldn't incur any costs.

As of now, it hasn't cost me much, but in the future, when you read this, Google may have stopped offering this feature.

Before jumping into the codebase link below. You need to understand something about i.e. setup.

Step 1: Access Google Apps Script

1. Open your browser and go to script.google.com.

2. Click on New Project to create a new script.

   

Step 2: Writing Your Required Script

1. In the script editor, you’ll see a default function:

2. Replace it with a given script to display produce JSON:

3.    function getGooglePhotosImages(folderId) {
        var folder = DriveApp.getFolderById(folderId);
        var files = folder.getFiles();
        var images = [];
        var index = 1;
   
        while (files.hasNext()) {
          var file = files.next();
          var mimeType = file.getMimeType();
   
          if (mimeType.startsWith("image/")) {
            // Convert Drive File URL to Google Photos Format (Manual workaround)
            var url = "https://lh3.googleusercontent.com/d/" + file.getId() + "=s1369-no";
   
            images.push({
              id: index,
              imageUrl: url
            });
            index++;
          }
        }
        return images;
      }
   
      function getAlbumsJson(parentFolderId) {
        var albums = [];
        var parentFolder = DriveApp.getFolderById(parentFolderId);
        var folders = parentFolder.getFolders();
        var albumIndex = 1;
   
        while (folders.hasNext()) {
          var folder = folders.next();
          var folderName = folder.getName();
          var images = getGooglePhotosImages(folder.getId());
   
          if (images.length > 0) {
            albums.push({
              id: albumIndex,
              title: folderName,
              images: images
            });
            albumIndex++;
          }
        }
   
        Logger.log(JSON.stringify(albums));
        return JSON.stringify(albums);
      }
   
      function doGet(e) {
        var parentFolderId = "GDRIVE_PARENT_FOLDER_ID";
        var json = getAlbumsJson(parentFolderId);
        return ContentService.createTextOutput(json).setMimeType(ContentService.MimeType.JSON);
      }
   

   

Click Save (Ctrl + S or Cmd + S).

Disclaimer: Before Deployment make sure your project and your google drive folder must be shared publicly.

1. Go to Deploy→ New Deployment

2. Make configuration according to image given below and hit deploy

   

Step 3: Running the Script

1. Click the Run button ▶️.

2. If running for the first time, you’ll be prompted to authorize the script.

3. Click Review Permissions, select your Google account, and allow the script to run.

4. Once authorized, your script will execute, and an alert box will appear.

Step 5: Use it in your frontend

After Deployment you will get a deployed link Web app URL
Copy above link and use it in your frontend as api

Github Link: (will be updated soon)

Conclusion

You can even do more works with Google Apps Script. It is a powerful tool to automate tasks, manipulate Google Workspace apps, and enhance productivity. Start experimenting with different scripts and explore its capabilities further!