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.
Add new comment