How I can add one image from Google Photos to HTML template for sending email?

Question

I need to use photos from Google Photos into HTML templates.

I readed some answers here. In all answers are talking about use the URL of the image, but the principal issue for me is to take the URL of the image from Google Photos.

This is my code:

function sendToGroup() {
  var htmlBody = HtmlService.createHtmlOutputFromFile('emailBody').getContent();
  var mSubject="Lorem ipsum";

  var mName='Me | me.com';
  GmailApp.sendEmail(
     'one-group@me.com', 
      mSubject, 
     'Lorem ipsum',
     {
       htmlBody: htmlBody,
       name: mName
     }
  ); 
  Logger.log('EMail OK');
}

Actually, into my HTML template i'm using images from Flickr. I can take easily the URL of these images and use it into the HTML without problem, for example, this works fine:

<div class="fluid-img" style="font-size:0pt; line-height:0pt; text-align:left"><a href="#" target="_blank"><img src="https://live.staticflickr.com/7916/45689248745_7268fc026d_z.jpg" border="0" width="650" alt="" /></a></div>

Recently i created one account into Google Workspace and i want to migrate all my photos from Flickr to Google Photos.

There is one way to use Google Photos for send HTML emails? I'm talking about send the images as part of the content of the email, not as attached files.

Unfortunately, I cannot understand about the relationship between `In my case, i uploaded one image to Google Drive but I can't share this with as a public file.` and `Into my HTML template i'm using actually images from Flickr, for example:` and `Now, I want to migrate these images to Google Photos.`. I apologize for this. Can I ask you about the detail of your goal? — Tanaike, Jan 03 '21 at 01:15
The question needs more focus (choose one Google Photos or Google Drive) — Rubén, Jan 03 '21 at 02:01
Also it might help if you reword the question. I think that you are asking is how to include an image stored some services as an inline image on a email message. In such case it might be a duplicate of First you have to get the image as a blob, then you have [How to include inline images in email using MailApp](https://stackoverflow.com/q/36178369/1595451) — Rubén, Jan 03 '21 at 02:02
@Tanaike sorry for my bad english. I edited the question, i hope it's more clear now. — A. Cedano, Jan 03 '21 at 19:04
@Rubén i edited the question. That i need is take images from Google Photos to send into emails as HTML content, not attached content. In the answer that you indicates are talking about the use of the URL of the image. But i can't to take this URL from Google Photos. — A. Cedano, Jan 03 '21 at 19:07
Thank you for replying and updating your question. From your updated question, I proposed an answer. Could you please confirm it? If that was not the direction you expect, I apologize. — Tanaike, Jan 04 '21 at 03:17

score 2 · Answer 1 · answered Jan 04 '21 at 03:17

I believe your goal as follows.

You want to retrieve the image from Google Photos and want to send an email including the image from Google Photos.
You want to achieve this using Google Apps Script.

Modification points:

In your script, unfortunately, the image is not retrieved from Google Photos.
In your case, I thought that it is required to retrieve the image from Google Photos.
- For this, it is required to link Cloud Platform Project to Google Apps Script Project. About this, you can see this thread. In this sample script, the library is not used. So it is not required to install the library.
When you want to use the image of Google Photos, you can use baseUrl of items. But, this is the temporal URL. So in this case, I would like to propose the 2 patterns.
In this script, the following scopes are used.
- https://www.googleapis.com/auth/photoslibrary
- https://www.googleapis.com/auth/script.external_request
- https://www.googleapis.com/auth/script.send_mail

Sample script:

Before you use this script, please link Cloud Platform Project to Google Apps Script Project and enable Photos Library API at API console, and also, please set the scopes to the manifest file (appsscript.json).

function myFunction() {
  const searchFilename = "###"; // Please set the filename for searching the image from Google Photos.

  const headers = {"Authorization": "Bearer " + ScriptApp.getOAuthToken()};
  let pageToken = "";
  const mediaItems = [];
  do {
    const url = "https://photoslibrary.googleapis.com/v1/mediaItems?pageSize=100&pageToken=" + pageToken;
    const res = UrlFetchApp.fetch(url, {headers: headers});
    const obj = JSON.parse(res.getContentText());
    Array.prototype.push.apply(mediaItems, obj.mediaItems);
    pageToken = obj.nextPageToken || "";
  } while (pageToken);
  const images = mediaItems.filter(({filename}) => filename == searchFilename);
  if (images.length > 0) {
    MailApp.sendEmail({
      to: "###email address ###",
      subject: "sample mail",
      htmlBody: `<div class="fluid-img" style="font-size:0pt; line-height:0pt; text-align:left"><a href="#" target="_blank"><img src="${images[0].baseUrl}" border="0" width="650" alt="" /></a></div>`,
    });
  }
}

The image of Google Photos is retrieved using the method of "mediaItems.list". For searching the image, as a sample, the filename is used. Because in your question, I couldn't find the method for searching the image from Google Photos. So please modify this for your actual situation.
Above script uses the URL of baseUrl. But, this URL is a temporal URL. So as other pattern, I would like to propose to use the image blob as follows. When you use this, please modify MailApp.sendEmail() as follows.
```
  MailApp.sendEmail({
    to: "###email address ###",
    subject: "sample mail",
    htmlBody: "<img src='cid:sample'>",
    inlineImages: {sample: UrlFetchApp.fetch(images[0].baseUrl).getBlob()}
  });
```

How I can add one image from Google Photos to HTML template for sending email?

1 Answers1

Modification points:

Sample script:

References: