0

I am using an unattached Google Apps Script to send a formatted HTML email. I'm trying to attach inline images to the formatted HTML file, and the email works perfectly, and the images are inline in the email, but they are inline at the very bottom of the email, rather than where I wanted them to be.

The Script I am using is directly below, and the HTML email is below that.

    function sendInlineImages() {
  var email = [Email address]
  var subject = "Email Subject";
  var body= HtmlService.createHtmlOutputFromFile('moving').getContent();

  // Image URLs, under CC license
  var jasper1URL = "http://cat-bounce.com/cb.png";
  var jasper2URL = "http://cat-bounce.com/cb.png";
  var jasper3URL = "http://cat-bounce.com/cb.png";

  // Fetch images as blobs, set names for attachments
  var jasper1 = UrlFetchApp
                            .fetch(jasper1URL)
                            .getBlob()
                            .setName("jasper1URL");
  var jasper2 = UrlFetchApp
                            .fetch(jasper2URL)
                            .getBlob()
                            .setName("jasper2URL");
  var jasper3 = UrlFetchApp
                            .fetch(jasper3URL)
                            .getBlob()
                            .setName("jasper3URL");

  var htmlEverything = body + 
    '<img src="cid:jasper1URL" alt="Jasper 1" width="220">' 
  + '<img src="cid:jasper2URL" alt="Jasper 2" width="220">'
  + '<img src="cid:jasper3URL" alt="Jasper 3" width="200">' 

  // Send message with inlineImages object, matching embedded tags.
  GmailApp.sendEmail(email, subject, "",
                    { htmlBody: htmlEverything,
                      inlineImages:
                      {
                        jasper1URL: jasper1,
                        jasper2URL: jasper2,
                        jasper3URL: jasper3,
                      }
                    });

}

The HTML email is here, and the images are located in a nested table.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="format-detection" content="telephone=no"/> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'/>

    <title>Page title</title>

    <style type="text/css"> 
        @media screen and (max-width: 630px) {

        }
    </style>


</head>

<body style="padding:0; margin:0">

<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="630px">
    <tr>
        <td align="center" valign="top" style="padding-bottom: 15px;" bgcolor="#fff">

        </td>
    </tr>
    <tr>
        <td align="center" valign="top" bgcolor="#000" style="padding-bottom: 5px; font-family: Montserrat, Verdana, sans-serif; font-size: 24px;">
            <h1><font color="#fff">Information for you!</font></h1>
            <h4><font color ="#fff">Additional Stuff
                <p>From,</p>
                <p>Me</p>

            </font></h4>
        </td>
    </tr>
    <tr>
        <td align="center" valign="top" style="padding-bottom: 15px;" bgcolor="#d3d3d3">

        </td>
    </tr>
    <tr bgcolor="#000">
        <td align="center" valign="top">
            <table border="0" cellpadding="10" bgcolor="#000" cellspacing="0" width="630" id="emailContainer">
                <tr>
                    <td align="left" valign="top" >
                        <img src="cid:jasper1URL" alt="Jasper 1" width="220"></img>
                    </td>
                    <td align="center" valign="top" width="200">
                        <img src="cid:jasper2URL" alt="Jasper 2" width="200"></img>
                    </td>
                    <td align="right" valign="top" width="200px" >
                        <img src="cid:jasper3URL" alt="Jasper 3" width="200"></img>
                    </td>
                </tr>
            </table>
        </td>

    </tr>

    <tr>
        <td align="center" bgcolor="#000" valign="top">

        </td>
    </tr>
    <tr>
        <td align="center" bgcolor="#d3d3d3" valign="top" style="padding-top: 15px; padding-bottom: 15px; font-family: Monteserrat, Verdana, sans-serif;">
            <font color="#000">Stuff that should be here in the email</font>
        </td>
    </tr>
    <tr>
        <td align="center" bgcolor="#000" valign="top">

        </td>
    </tr>

</table>

</body>
</html>
Jenée Smith
  • 3
  • 1

1 Answers1

0

They appear at the end of the email because of the following code:

var htmlEverything = body + 
    '<img src="cid:jasper1URL" alt="Jasper 1" width="220">' 
  + '<img src="cid:jasper2URL" alt="Jasper 2" width="220">'
  + '<img src="cid:jasper3URL" alt="Jasper 3" width="200">'

Your Html code already defines the location of images in the nested table, by addding img tags to the end of html code as done above. You are causing the inline image to be duplicated to bottom of the email.

Modify this to 

var htmlEverything = body

And that should prevent the images from appearing at the bottom of the email

YOur final code:

function sendInlineImages() {
  var email = [Email address]
  var subject = "Email Subject";
  var body= HtmlService.createHtmlOutputFromFile('moving').getContent();

  // Image URLs, under CC license
  var jasper1URL = "http://cat-bounce.com/cb.png";
  var jasper2URL = "http://cat-bounce.com/cb.png";
  var jasper3URL = "http://cat-bounce.com/cb.png";

  // Fetch images as blobs, set names for attachments
  var jasper1 = UrlFetchApp
                            .fetch(jasper1URL)
                            .getBlob()
                            .setName("jasper1URL");
  var jasper2 = UrlFetchApp
                            .fetch(jasper2URL)
                            .getBlob()
                            .setName("jasper2URL");
  var jasper3 = UrlFetchApp
                            .fetch(jasper3URL)
                            .getBlob()
                            .setName("jasper3URL");

  var htmlEverything = body

  // Send message with inlineImages object, matching embedded tags.
  GmailApp.sendEmail(email, subject, "",
                    { htmlBody: htmlEverything,
                      inlineImages:
                      {
                        jasper1URL: jasper1,
                        jasper2URL: jasper2,
                        jasper3URL: jasper3,
                      }
                    });

}

Your Html code remains the same!

Jack Brown
  • 5,802
  • 2
  • 12
  • 27