google-sheetsgoogle-apps-scripthtml-email

Make image line up with Text


It's very messy but it works....somehow, the issue I have at the moment is I have the image in the script, however i have no idea how to make it line up to the left and have the text from after "Kind regards" to the right of the image with the top of the text of line 1 matching the height of the top of the image.

function myFunction() {
  let sheet = SpreadsheetApp.getActiveSheet();
  let data = sheet.getRange('A2:B').getDisplayValues();
  data.filter(row => row.every(Boolean)).forEach(row => {
    let [name, address] = row;
    let subject = `Subject Text`;
    let body = `Dear ${name}.<br><br> 

I hope this email finds you well.<br><br> 

I am writing to you in regards to XXX, "".<br><br> 

.<br><br>

.<br><br>

Kind Regards,<br><br>
<b><span style='color: #C19B77;'>Title of Person<br>
<span style='color: #C19B77; font-size: 15px;'>Name of Person</span><br><br>
<b><span style='color: #C19B77;'>Mobile:</b>+44 12345678&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Address<br>
<b><span style='color: #C19B77;'>Email:</b>Email@Email.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Adress line 2<br>
<img src="URL Example" alt="Image 1" style="width: 200px; height: 180px;">`;
  
    MailApp.sendEmail({to: address, subject, htmlBody: body, cc:''});
  });
}

I've tried using something called "float" but that did nothing and I'm kind of out of my element at this point.


Solution

  • You could use float:left; on the image, but that will only float the text after it. So you have to move the <img ...> back a bit.

    Then, the image will butt up against the text. So really, what you want is to have it in a simple table.

    Not sure what your intention is with the Address being after all the non-breaking spaces, but nothing a table can't fix better.

    This is what I got (also fixing up unfinished <b> and <spans>). I added "vertical-align: top" to make the text start at the top of the image, otherwise it may default to being centered.

    Dear asdf.<br><br> 
    
    I hope this email finds you well.<br><br> 
    
    I am writing to you in regards to XXX, "".<br><br> 
    
    .<br><br>
    
    .<br><br>
    
    Kind Regards,<br><br>
    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
            <td style="padding-right: 15px;vertical-align: top;"><img src="URL Example" alt="Image 1" style="width: 200px; height: 180px;"></td>
            <td width="100%" style="vertical-align: top;">
                <b><span style='color: #C19B77;'>Title of Person</span><br>
        <span style='color: #C19B77; font-size: 15px;'>Name of Person</span></b><br><br>
    <b><span style='color: #C19B77;'>Mobile:</span></b>+44 12345678&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Address<br>
    <b><span style='color: #C19B77;'>Email:</span></b>Email@Email.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Adress line 2<br>
            </td>
        </tr>
    </table>