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

html email

 

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="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="[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

 

Add new comment

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.