Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Technique to format html email (simplenews + swiftmailer + css)

Parent Feed: 

If you use swiftmailer + simplenews, you may want to send html email with custom css.

To achieve that,you have to customise 2 twig templates.

The first template is the default template that is provided by swiftmailer: simplenews-newsletter-body.html.twig.

You can use this template to build your own email body with content you like to use. For example, in the template below, an hero image is inserted using table layout.


   <table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" >
      <tbody>
        <tr>
          <td class="align-center">
            <a href='[node:url]'><IMG class="hero" src="https://arrea-systems.com/format-html-email-simplenews-swifttmailer/path-to-image"/></a>
          </td>
        </tr>
       </tbody>
    </table>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0">  
        <tbody>
          <tr>
            <td>
             {{ build }}
            </td>
          </tr>
          <tr>
            <td>
             {% if not opt_out_hidden %}
              {% if format == 'html' %}
                <p class="footer"><a href="https://arrea-systems.com/format-html-email-simplenews-swifttmailer/[simplenews-subscriber:unsubscribe-url]">{{ unsubscribe_text }}</a>
                </p>
              {% else %}
              -- {{ unsubscribe_text }} : [simplenews-subscriber:unsubscribe-url]
              {% endif %}
            {% endif %}
            </td>
          </tr>  
      </tbody>
    </table>

    {% if key == 'test' %}
        - - - {{ test_message }} - - -
    {% endif %}

You can rename the file following the naming convention for twig template and place it into you theme templates folder:


 * Copy this file in your theme directory to create a custom themed body.
 * Rename it to override it. Available templates:
 *   simplenews-newsletter-body--[newsletter_id].html.twig
 *   simplenews-newsletter-body--[view mode].html.twig
 *   simplenews-newsletter-body--[newsletter_id]--[view mode].html.twig

Once you have designed you email body you need to design the swiftmailer template with the required css style. to do that, create a file called swiftmailer--simplenews.html.twig into the same template folder as the previous file. You can build your html file with inserted css style following the sample structure below.


<html>
    <head>
        <style>
            /* insert your css style */
        </style>
    </head>
    <body class="body">
      <!-- content -->
      <table role="presentation" class="main">
        <tr>
          <td class="wrapper">
            <table role="presentation" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  <div class="content">
                  /* content formated by  simplenews-newsletter-body */
                  {{ body }}
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <!-- footer -->
      <table class="footer">
        <tr>
          <td>
            /* option footer */
          </td>
        </tr>
      </table>
    </body>
</html>

With this technique you can design any type of email newsletter with rich content that adapt to desktop and mobile displays.

example template
Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web