{"id":19651775,"url":"https://github.com/tanaikech/simplephotogalleryusinggoogleappsscript","last_synced_at":"2025-02-27T01:26:57.995Z","repository":{"id":79705795,"uuid":"332385784","full_name":"tanaikech/SimplePhotoGalleryUsingGoogleAppsScript","owner":"tanaikech","description":"This is a sample script for achieving a simple photo gallery created by Google Slides and Web Apps using Google Apps Script.","archived":false,"fork":false,"pushed_at":"2021-03-22T05:56:52.000Z","size":18872,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-10T00:05:09.594Z","etag":null,"topics":["google-apps-script","google-slides","photo-gallery","webapp"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tanaikech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-24T06:50:20.000Z","updated_at":"2024-06-05T23:04:51.000Z","dependencies_parsed_at":"2023-05-30T04:00:10.691Z","dependency_job_id":null,"html_url":"https://github.com/tanaikech/SimplePhotoGalleryUsingGoogleAppsScript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanaikech%2FSimplePhotoGalleryUsingGoogleAppsScript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanaikech%2FSimplePhotoGalleryUsingGoogleAppsScript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanaikech%2FSimplePhotoGalleryUsingGoogleAppsScript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanaikech%2FSimplePhotoGalleryUsingGoogleAppsScript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tanaikech","download_url":"https://codeload.github.com/tanaikech/SimplePhotoGalleryUsingGoogleAppsScript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240960486,"owners_count":19885148,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-apps-script","google-slides","photo-gallery","webapp"],"created_at":"2024-11-11T15:07:57.630Z","updated_at":"2025-02-27T01:26:57.701Z","avatar_url":"https://github.com/tanaikech.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple Photo Gallery Created by Google Slides and Web Apps using Google Apps Script\r\n\r\n\u003ca name=\"overview\"\u003e\u003c/a\u003e\r\n\r\n# Overview\r\n\r\n**This is a sample script for achieving a simple photo gallery created by Google Slides and Web Apps using Google Apps Script.**\r\n\u003ca name=\"description\"\u003e\u003c/a\u003e\r\n\r\n# Description\r\n\r\nAt Google, there is a great Google Photos. [Ref](https://www.google.com/photos/about/) Recently, I was required to have a simple photo gallery. At that time, I thought that when an independence photo gallery instead of Google Photos can be used, it will be useful. Also, this might be useful\r\nfor other users. So I published this.\r\n\r\nIn this photo gallery, Google Slides and Web Apps are used as the storage of images and the photo gallery, respectively. And, Google Apps Script is used for the interface for connecting Google Slides and Web Apps. In this script, [`lightgallery.js`](https://github.com/sachinchoolur/lightgallery.js) is used for the photo gallery at HTML side.\r\n\r\n# Demo\r\n\r\n![](images/fig1.gif)\r\n\r\nThese images in this demonstration are from [http://k3-studio.deviantart.com/](http://k3-studio.deviantart.com/).\r\n\r\n# Usage\r\n\r\n## 1. Create Google Slides.\r\n\r\nAt first, please create new Google Slides at your Google Drive after you logged in to Google Drive.\r\n\r\n## 2. Prepare script.\r\n\r\nPlease copy and paste the following scripts to the script editor of the created Google Slides.\r\n\r\n### Google Apps Script (`Code.gs`)\r\n\r\nThis is a Google Apps Script.\r\n\r\n```javascript\r\nconst doGet = (_) =\u003e HtmlService.createHtmlOutputFromFile(\"index\");\r\n\r\nfunction getImages() {\r\n  return SlidesApp.getActivePresentation()\r\n    .getSlides()\r\n    .map((e) =\u003e\r\n      e.getImages().length \u003e 0 ? e.getImages()[0].getContentUrl() : \"\"\r\n    )\r\n    .filter(String);\r\n}\r\n\r\nfunction appendImages(images) {\r\n  const s = SlidesApp.getActivePresentation();\r\n  images.forEach((e) =\u003e {\r\n    const image = s\r\n      .appendSlide()\r\n      .insertImage(\r\n        Utilities.newBlob(\r\n          Utilities.base64Decode(e.data),\r\n          e.mimeType,\r\n          e.fileName\r\n        )\r\n      );\r\n    image.setTitle(e.fileName);\r\n    image.setDescription(new Date().toISOString());\r\n  });\r\n  s.saveAndClose();\r\n  return getImages();\r\n}\r\n```\r\n\r\n### HTML\u0026Javascript (`index.html`)\r\n\r\nThis is a HTML. Please create HTML file at the script editor, and copy and paste the following script to HTML file. And, save the Google Apps Script project.\r\n\r\n```html\r\n\u003clink type=\"text/css\" rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/src/css/lightgallery.css\" /\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/js/lightgallery.min.js\"\u003e\u003c/script\u003e\r\n\u003cdiv\u003e\r\n\u003clabel id=\"label\" for=\"file\" style=\"color: white; background-color: deepskyblue; border-radius: 3px;\"\u003e\r\nUpload images\r\n\u003cinput type=\"file\" id=\"file\" multiple=\"true\" style=\"display:none;\" accept=\"image/png,image/jpeg\"\u003e\r\n\u003c/div\u003e\r\n\u003cdiv id=\"status\"\u003e\u003c/div\u003e\r\n\u003cdiv id=\"lightgallery\"\u003e\u003c/div\u003e\r\n\r\n\u003cscript\u003e\r\nfunction showImages(urls) {\r\n  if (urls.length == 0) return;\r\n  const lightgallery = document.getElementById(\"lightgallery\");\r\n  lightgallery.innerHTML = \"\";\r\n  urls.forEach(url =\u003e {\r\n    const a = document.createElement(\"a\");\r\n    a.setAttribute(\"href\", url);\r\n    const img = document.createElement(\"img\");\r\n    img.setAttribute(\"src\", url);\r\n    img.setAttribute(\"width\", 200);\r\n    a.appendChild(img);\r\n    lightgallery.appendChild(a);\r\n  });\r\n  lightGallery(document.getElementById('lightgallery'), {download: false});\r\n}\r\n\r\nconst f = document.getElementById('file');\r\nf.addEventListener(\"change\", () =\u003e {\r\n  if (f.files.length \u003e 0) {\r\n    const status = document.getElementById(\"status\");\r\n    status.innerHTML = \"Now uploading...\";\r\n    Promise.all([...f.files].map((file, i) =\u003e {\r\n      const fr = new FileReader();\r\n      return new Promise(r =\u003e {\r\n        fr.onload = e =\u003e {\r\n          const data = e.target.result.split(\",\");\r\n          r({fileName: file.name, mimeType: data[0].match(/:(\\w.+);/)[1], data: data[1]});\r\n        }\r\n        fr.readAsDataURL(file);\r\n      });\r\n    }))\r\n    .then(images =\u003e {\r\n      google.script.run\r\n      .withFailureHandler(err =\u003e {\r\n        console.log(err);\r\n        status.innerHTML = \"\";\r\n      })\r\n      .withSuccessHandler(() =\u003e {\r\n        main();\r\n        status.innerHTML = \"\";\r\n      }).appendImages(images);\r\n    });\r\n  }\r\n});\r\n\r\nfunction main() {\r\n  google.script.run.withFailureHandler(err =\u003e console.log(err)).withSuccessHandler(showImages).getImages();\r\n}\r\n\r\nmain();\r\n\u003c/script\u003e\r\n```\r\n\r\n## 3. Deploy Web Apps.\r\n\r\nThe detail information can be seen at [the official document](https://developers.google.com/apps-script/guides/web#deploy_a_script_as_a_web_app). The following flow is for new script editor.\r\n\r\n1. On the script editor, at the top right of the script editor, please click \"click Deploy\" -\u003e \"New deployment\".\r\n2. Please click \"Select type\" -\u003e \"Web App\".\r\n3. Please input the information about the Web App in the fields under \"Deployment configuration\".\r\n4. Please select **\"Me\"** for **\"Execute as\"**.\r\n5. Please select **\"Anyone\"** for **\"Who has access\"**.\r\n   - By this setting, anyone can access to your Web Apps.\r\n   - Of course, you can use the access token for this situation. But in this case, as a simple setting, I use the access key instead of the access token. You can see the detail of this at [this document](https://github.com/tanaikech/taking-advantage-of-Web-Apps-with-google-apps-script).\r\n6. Please click \"Deploy\" button.\r\n7. When \"The Web App requires you to authorize access to your data\" is shown, please click \"Authorize access\".\r\n8. Automatically open a dialog box of \"Authorization required\".\r\n   1. Select own account.\r\n   2. Click \"Advanced\" at \"This app isn't verified\".\r\n   3. Click \"Go to ### project name ###(unsafe)\"\r\n   4. Click \"Allow\" button.\r\n9. Copy the URL of Web App. It's like `https://script.google.com/macros/s/###/exec`.\r\n   - **When you modified the Google Apps Script, please redeploy as new version. By this, the modified script is reflected to Web Apps. Please be careful this.**\r\n\r\n## 4. Testing\r\n\r\nPlease access to the URL of your Web Apps. After you did above flow, you have already had the URL like `https://script.google.com/macros/s/###/exec`.\r\n\r\nWhen you access to the Web Apps, there are no images. So please upload a sample image. By this, you can see it on the Web Apps. For example, when you want to delete the image, please delete the slides on Google Slides. By this, when the Web Apps is opened, the images are updated.\r\n\r\n# Note\r\n\r\n- This is a simple photo gallery. So when you want to add more functions, please modify the script.\r\n\r\n# References\r\n\r\n- [Web Apps](https://developers.google.com/apps-script/guides/web)\r\n- [Taking advantage of Web Apps with Google Apps Script](https://github.com/tanaikech/taking-advantage-of-Web-Apps-with-google-apps-script)\r\n\r\n---\r\n\r\n\u003ca name=\"licence\"\u003e\u003c/a\u003e\r\n\r\n# Licence\r\n\r\n[MIT](LICENCE)\r\n\r\n\u003ca name=\"author\"\u003e\u003c/a\u003e\r\n\r\n# Author\r\n\r\n[Tanaike](https://tanaikech.github.io/about/)\r\n\r\nIf you have any questions and commissions for me, feel free to tell me.\r\n\r\n\u003ca name=\"updatehistory\"\u003e\u003c/a\u003e\r\n\r\n# Update History\r\n\r\n- v1.0.0 (January 24, 2021)\r\n\r\n  1. Initial release.\r\n\r\n[TOP](#top)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanaikech%2Fsimplephotogalleryusinggoogleappsscript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftanaikech%2Fsimplephotogalleryusinggoogleappsscript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanaikech%2Fsimplephotogalleryusinggoogleappsscript/lists"}