Now, it's time to install the necessary modules to make our newsletters look like HTML.

Install and enable modules

We are going to have to install a few modules in order to send HTML newsletters. HTML Mail and Mail System

  • drush dl htmlmail mailsystem
  • drush en htmlmail mailsystem

Now, when we check our modules page, we will have the modules installed and enabled.

Configure the Mail System module

The first thing we need to do is to configure the Mail System module to use the HTMLMailSystem setting for all emails sent by the "Simplenews" module.

  • Go to "Configuration => System => Mail System" (Here we see the Site-wide default class is set to "DefaultMailSystem", and the HTML Mail module class is set to "HTMLMailSystem". We could simply set the Site-wide class to "HTMLMailSystem", but for more granularity, we're only going to just it for "Simplenews" emails. - We'll talk about the "Theme to render the emails" setting in Part 19)
  • Scroll down and click on "New Setting"
  • For the module select "Mail >> Simplenews module"
  • (Save settings)
  • Now, for the "Simplenews module class" we can choose "HTMLMailSystem"
  • (Save settings)

Alright. Now, let's go back to our newsletter and send it again.

This time we see a huge difference right away! Let's walk through the changes from the top.

  1. First, we have the "Click here to view this message on the web." link (We'll configure this text in Part 18)
  2. Our newsletter title "Amazing Newsletter", which is an <h1> now looks like an <h1> instead of the plain text interpretation of an <h1>.
  3. You'll also notice that there is no sign of the numbered list of links we've always had so far. Now, instead, the links are inline. The web address is a link, and the text "Twitter" now links to my Twitter profile.
  4. The taxonomy term (newsletter category) and unsubscribe links are now clickable as well.

You can even include images now that we're sending as HTML.

  • Edit the newsletter
  • Enter image information (<img src="http://modulesunraveled.com/sites/default/files/photo.jpg" alt="[Photo of me and my family]">)
  • I also need to change the Text format to Full HTML, since Filtered HTML doesn't currently allow the <img> tag. (You could, of course, edit the Filtered HTML format, or create your own for newsletters. But, to keep things simple, I'm just going to use the Full HTML format.)
  • (Save)
  • Click "Newsletter" and send another test newsletter
  • In the Mac "Mail" application, we see the image inline, exactly where we put it. In Gmail, we have to click "Display images below", but since we used the <alt> tag, we see the alt text where the image would be. If we click "Display images below" our alt text is replaced with the image.