PRE-FINAL

To rewrite your existing Google Apps Script and HTML setup to use the Google Drive API (v3), you need to update how the script fetches files and how the URL is constructed for the frontend.

Using the Drive API is generally more efficient for larger folders as it allows for better filtering and field selection compared to the standard DriveApp service.

1. Updated Code.gs (Apps Script)

This version uses Drive.Files.list() which requires the Drive API service to be enabled in your Apps Script project (click the + next to "Services" and select Drive API).

``` 

// Google Apps Script (Drive API v3)
function doGet() {
  const folderId = '1gG0SVUU2vGRAKTml1kHFqFCKTYTsZ0oz';

  const optionalArgs = {
    q: `'${folderId}' in parents and mimeType contains 'image/' and trashed = false`,
    fields: 'files(id, name, mimeType)',
    pageSize: 100
  };

  const fileList = Drive.Files.list(optionalArgs);
  const files = fileList.files;

  let images = [];

  if (files && files.length > 0) {
    files.forEach(file => {
      images.push({
        name: file.name,
        url: `https://lh3.googleusercontent.com/u/0/d/${file.id}`
      });
    });
  }

  return ContentService
    .createTextOutput(JSON.stringify(images))
    .setMimeType(ContentService.MimeType.JSON);
}


<!-- Frontend HTML -->
<div class="loading" id="loading">Loading images from Drive API...</div>
<div id="gallery"></div>

<script>
  const WEB_APP_URL = "https://script.google.com/macros/s/AKfycbxVK2zP-l2r7yveTlbcNyX6OrZOnfs86cqm_t9kAZU0QrA_gOP7hE5n_msUVAGKJwPmwQ/exec";

  fetch(WEB_APP_URL)
    .then(response => {
      if (!response.ok) throw new Error("HTTP error " + response.status);
      return response.json();
    })
    .then(images => {
      document.getElementById("loading").style.display = "none";

      const gallery = document.getElementById("gallery");
      let html = "";

      images.forEach(image => {
        html += `
          <div class="card">
            <img src="${image.url}" alt="${image.name}" loading="lazy">
            <div class="title">${image.name}</div>
          </div>
        `;
      });

      gallery.innerHTML = html;
    })
    .catch(error => {
      console.error(error);
    });
</script>

2. Updated blog-post CODE.txt (HTML/CSS)

The frontend remains largely the same, but we will ensure the CSS handles the grid layout efficiently and the JavaScript correctly handles the JSON response from your new API-based script.

```html ``` 

<!DOCTYPE html>
<html>
<head>
  <title>Google Drive API Gallery</title>

  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: Arial, sans-serif; [cite: 3]
      background: #f5f5f5;
    }

    #gallery {
      display: grid; [cite: 4]
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [cite: 5]
      gap: 20px;
    }

    .card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1); [cite: 6]
      transition: 0.3s;
    }

    .card:hover {
      transform: translateY(-5px); [cite: 7]
    }

    img {
      width: 100%;
      height: 300px;
      object-fit: cover; [cite: 8]
      display: block;
    }

    .title {
      padding: 10px;
      text-align: center;
      font-size: 14px; [cite: 9]
      word-break: break-word;
    }

    .loading {
      text-align: center;
      font-size: 20px;
      padding: 40px; [cite: 10]
    }

    .error {
      color: red;
      text-align: center;
      padding: 40px; [cite: 11]
    }
  </style>
</head>

<body>

<div class="loading" id="loading">Loading images from Drive API...</div>
<div id="gallery"></div>

<script>
  // Replace with your newly deployed Web App URL [cite: 12]
  const WEB_APP_URL = "https://script.google.com/macros/s/AKfycbxVK2zP-l2r7yveTlbcNyX6OrZOnfs86cqm_t9kAZU0QrA_gOP7hE5n_msUVAGKJwPmwQ/exec";

  fetch(WEB_APP_URL) [cite: 12]
    .then(response => {
      if (!response.ok) throw new Error("HTTP error " + response.status);
      return response.json();
    })
    .then(images => {
      document.getElementById("loading").style.display = "none";
      const gallery = document.getElementById("gallery");

      let html = "";

      images.forEach(image => { [cite: 13]
        html += `
          <div class="card">
            <img
              src="${image.url}"
              alt="${image.name}"
              loading="lazy"
              referrerpolicy="no-referrer"
            >
            <div class="title">${image.name}</div> [cite: 14]
          </div>
        `;
      });

      gallery.innerHTML = html;
    })
    .catch(error => {
      document.body.innerHTML = `
        <div class="error">
          Failed to load images via Drive API
          <br><br>
          ${error}
        </div>
      `;

      console.error(error); [cite: 15]
    });
</script>

</body>
</html>

Key Changes & Implementation Notes:

  • Drive API Enablement: You must go to the Services tab in your Google Apps Script editor and enable the Drive API.
  • Efficiency: The Drive.Files.list method uses a query (q) to filter for images directly on Google's servers. This is much faster than fetching all files and then checking their type in a loop.
  • Field Selection: By specifying fields: 'files(id, name, mimeType)', the script only downloads the necessary data, making the execution faster and more reliable.
  • Permissions: Ensure the Google Drive folder is set to "Anyone with the link can view" so the images can be displayed on your blog.

Comments

Post a Comment

Popular posts from this blog

[MAIN PROGRAM] UNDONE HOUSEHOLD WORKs WEB-PROGRAM v2/MAIN

Waiting to test Firebase… Write Test Data Read Test Data Delete Tester Data Category Manager (CRUD) ADD NEW Category: Add Category Existing Categories Category Actions Create New Task Task Title: Category: ADD NEW: Create Task Task List Filter by Category: (All Categories) Task ID Title Category Overall Status Manage Phase Manager Category for this Task: ADD NEW: Save Category Phase Number: Phase Status: Phase Description: Add Phase Existing Phases: Phase Status Description Upload Spreadsheet → Import to Firebase Expected columns in sheet: Title , Phase Number , Phase Status , Description , and optional Category . Value na or not available ...
Read more

PENDING ITEMs [REVISION] v0

🔗 My Pending and Delayed POSTs SUMMARY Sort by Date Sort by Auto Title Sort by My Title Ascending Descending Insert URL: Your Own Title (Optional): ➕ ADD ENTRY 💾 SAVE EDIT DATE AUTO TITLE MY TITLE URL ACTIONS 📝 TO DO LIST SUMMARY  Sort by Date Sort by Header Sort by Detail Ascending Descending Header (Title): Detail: ➕ ADD ENTRY ...
Read more