How to create a Google Sites photo album using 3rd party photo storage

[Martin Bryant]

Hi,

I'm looking to create a Google sites photo album using Web App Script but the photos that I'd like to show are hosted on third party cloud storage. Just wondering if anyone has any code that would help me get started. I'm an ex-software developer, but fairly new to Google Web Apps, Google Sites and JavaScript. Thanks.

Martin

[Tanaike]

For example, is this sample useful for your situation?

Simple Photo Gallery Created by Google Slides and Web Apps using Google Apps Script

[Darren D'Mello]

Yes embedding the slides to sites would be a very nice option.

Thank you,

Darren

On Tue, Apr 13, 2021, 7:43 AM Tanaike <kanshi...@gmail.com> wrote:

For example, is this sample useful for your situation?

Simple Photo Gallery Created by Google Slides and Web Apps using Google Apps Script

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/b13ec424-2558-4dbd-b005-66fc6e16e7b0n%40googlegroups.com.

[Martin Bryant]

Hi, thanks. I shall certainly look at this, but the main point that I'm trying to overcome (other than writing all of the code) is that the photos are stored on a third party site. I have too many photos to store them in Google Slides.

[Tanaike]

@Darren D'Mello Thank you for your comment.

@Martin Bryant I deeply apologize my comment was not useful for your situation.

[Martin Bryant]

I'd rather you gave an imperfect answer than didn't try. I'm not looking for a solution, I'm looking for guidance. :-)

[Clark Lind]

If you can link to each photos' url, then it is simply a matter of embedding the image src inside an html file and serve that file via apps script. If the third party storage has an API, you might be able to make calls to it and get file listings and such using urlFetch().

[Alan Wells]

If you want to see some basic HTML for a image portfolio, here is an example at W3 Schools:

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_photo&stacked=h

If you want to dynamically add source addresses to image (img) tags in HTML,

then you could have a list of urls somewhere, and use templated HTML to build your HTML.

Apps Script uses something called scriptlets to inject dynamic content into HTML.

There are multiple parts to this.

You'd need to embed an Apps Script Web App into the Google Site.

The Apps Script Web App will use HTML Service to evaluate your html,

and build the image tags.

The storage site for your pictures will need to be publicly accessible.

See:

https://developers.google.com/apps-script/guides/html/templates

You could load some initial number of photos.

If you want to do "lazy loading" so that when the user scrolls down, then more pictures are loaded,

that's possible.

Here is a site that I built.  If you've got an add-blocker it may block the site from loading.

It doesn't use cookies, so you don't need to worry about that.

https://jemdecorations.com

[Martin Bryant]

Yes, that is the plan. Not done it before which is why I'm asking for guidance. The photo urls are visible, so I guess the first step is to work out how to do a directory listing of the photos folder and then store that. Thanks.

[Martin Bryant]

Thanks. I know w3schools well. :-) Other stuff looks really handy. :-)

[Clark Lind]

Essentially (from an Apps script perspective) what you will be doing is building a web app and publishing its URL. 
-Someone calls your URL (or your site page has it embedded)

-This triggers the doGet() function (the doorway to your script)

From the doGet() function:

- instantiate an HTML file from a template   (HTMLService)
- do whatever you want on the back end to retrieve the data (external photo URLS or data or any other Google backend data from Sheets, Docs, Drive, Calendar, etc..) you want to serve (UrlFetch())
- parse or otherwise fill in what you want to serve into the HTML file you just made

- finalize the HTML file (e.g.,  .evaluate()  )
- return the now-static HTML to be enjoyed by your viewing audience :)

You can get really complex and include CSS/javascript files to be included in the HTML file that then get embedded when evaluate() runs. These will be things that run in the front-end via the browser. 
The Apps Script start screen has a starter web app template (drive file listing) you can study to see how the above works in practice. The hard part for me was finally understanding which parts were taking place on the frontend and which on the backend.

If you don't really need any Google backend data, then you may want to just create and serve an HTML file and then use javascript in the browser to fetch your urls and place them in the page as needed.