Pretty Text Emails

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $12.00

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

When we send an HTML email, we know that Mailer automatically generates a text version for us. Thanks Mailer! And, other than this extra style stuff on top... which we don't really want, it does a pretty good job! But we can make it even better - and remove those weird extra styles - with one simple command. Find your terminal and run:

composer require league/html-to-markdown

This is a library that's good at taking HTML and transforming it into Markdown... which, I know, seems like an odd thing to do... but it's super handy! As soon as you install it, Mailer will automatically use it to transform the HTML email into text. Well... it will transform the HTML to markdown... and it turns out that Markdown is a very attractive text format.

Check it out: on the site, go back, bump the email again, submit and... there's our new email. The HTML looks the same, but check out the text. Yea! First of all, the html-to-markdown library was smart enough to get rid of the CSS styles code. It also embedded the logo image on top... which may or may not be useful, but it does correctly represent the image & link.

The most important thing is that it turned the HTML into a nice structure: the header is obvious, bold content is inside asterisks and the line breaks are correct. Basically, we can now stop worrying about the text emails entirely: our emails will have them and they will look great.

Next, there are two ways to add an image to an email: linking to them or embedding them. Let's learn how to embed an image and when that's the best option.

Leave a comment!

  • 2020-01-08 Victor Bocharsky

    Hey AbelardoLG,

    Hm, Gmail is tricky and wraps image links in his own logic. You can configure Gmail to do not display images when you open emails that prevents from tracking when you open emails etc. Oh, and probably you're just in the beginning of this tutorial and our email might not display correctly in Gmail and other popular clients *yet*. I'd recommend you to watch up to the screencasts where we refactor our emails with table-layout HTML structure. This should help to fix problems with Gmail and other clients :)

    Cheers!

  • 2020-01-07 AbelardoLG

    Hi again! :) Sorry for disturbing to you. :S

    After seeing the raw message, once I have received the email at Gmail, I see this text:
    [ ![SpaceBar Logo](http://127.0.0.1:8000/build/images/email/logo.png)](htt=
    p://127.0.0.1:8000/)=20

    What a strange! Gmail doesn't correctly display the image inside HTML message but another inboxes do.

    What's wrong? ¿?