An updated recipe for building newsletters in Drupal 7

We created the Newsletter Export module so that we could bundle Drupal website content into a newsletter. We previously blogged about the Drupal 6 version here. The module allows website managers to choose from existing website pages (any content type) which they'd like to broadcast and put it into one newsletter node for exporting. The resulting HTML content can then be imported into their usual mailing application such as CiviCRM or MailChimp.

Note that this module doesn't enable you to send your newsletter through Drupal. Neither does it allow you to maintain a list of contacts. Instead you will be required to import it into another application of your choice.

After installing the module we choose which content type we want to use as the base for our newsletters (under Configuration > Media > Newsletter Export). You can choose more than one which could be useful if you have different layouts for different newsletters. For our example we usually create a "Newsletter" content type and then choose it in the configuration.

configure article display

The basic structure of the exported HTML depends on the structure of your content type you selected to be the base content. To simplify things we will refer to that content type from now on as "Newsletter" since in our example that is what we call this content type.

Our Newsletter content type consists of an introduction and article teasers. To accomplish that, we added to the Newsletter content type a textarea field (for introduction section) and an entity reference field for linking to an unlimited number of articles. This is basic Drupal content type creation and manipulation - you can select any type of fields you want here.

The "juice" of the Newletter content are the references to other site content so that they can become newsletter teasers. We often customize the views to pull just the right content to the newsletter (for example, only last month content or content of specific type). Often, we create several entity reference fields to create sections like "News", "Blog posts", "Events" etc.

After adding an entity reference field we configure the display of the newsletter content type. Under the Manage Display tab the module supplies a view mode called "newsletter" so that there can be a view mode that is separate from what is seen by viewing the website. We configure the view mode so it shows the teaser of the rendered article that is linked through the entity reference.

configure reference configure newsletter display

You will notice that we can also choose the view mode of the referenced article node. We again choose the newsletter view mode here, but that means we also have to configure the displays for the article content type.

article display

We then create a newsletter node, let's just call it "Test Newsletter" to be boring. We also separately create a couple articles called "First article" and "Second article" so that we can reference them in the newsletter.

create newsletter

Once our newsletter is populated with our content we now have a published newsletter node. Awesome! Except now we need to export this to email client friendly HTML for our email blast. While testing the layout we first prefer to see the html inline for convenience so we change the newsletter export configuration to inline (under Configuration > Media > Newsletter Export). Users with appropriate permissions will then see a "Newsletter Export" link in the links area of content of that type. Clicking on the export link will generate an HTML file with the output of just that node.

Only after some inline testing do we change the settings for downloading the HTML and test it in our mass mailing application.

display inline

We could use any number of Drupal modules to change the display of our content types. I suggest looking into Display Suite and Field formatter settings for ways to tweak the layout.

Our HTML output can also be customized by editing the included newsletter-export.tpl.php file that comes with the module. Copy it to your theme directory and modify the output.

The template has three variables which it can access

  1. $raw_markup - The standard drupal output of the node (default behaviour)
  2. $fields - an array of all the fields including body and title of the node
  3. $node - the full node object

Using these variables you can manipulate and create the output however it works best. We can usually go a long way by just using the Drupal GUI, but sometimes it requires diving into the code.

Email clients are notorious for ignoring or messing up most of the styles that work in the browsers. Instead we have to create a lot of inline css and test in a number of different email clients to ensure the newsletter looks fine. This includes major clients like Gmail, Outlook and Yahoo. One approach that might be useful is to upload the HTML into a third-party application which turns your HTML file into inline styles that will look good in most email clients. For example, Premailer, Inlinestyler.

Or you can incorporate a script like CssToInlineStyles to transform the HTML to inline styles before downloading. We explain more in our module's README file.

Our github project for Newsletter Export can be found here: https://github.com/freeform/newsletter_export

Comments

Can this be used for update users on Classified adverts?

Hi, I'm making a Classified adverts site.

I want to make it so everytime someone post
a new property users automaticially get updated about it.

Is this possible with this method?

We would suggest different solution

For that case scenario, we would suggest using Drupal Notifications module (maybe with Rules, it depends how complex the notification settings should be). This module is for manual selection of content and export to HTML for mass-mailing through 3rd party systems.

Awesome

This module is great! I'm still working out how to use it (the inline view looks fine but the download is blank) but I'm sure this will same me a great deal of time. If I have time, I will try to contribute to the module!

Alex

External CSS file (Omega theme) and in-line styles

Hello,

when I use an external CSS file like global.CSS with which I do the normal formatting of my website with the Omega theme how do I change these CSS markup into in-line styles for your newsletter module?
And on top of that I only want the nodes' content and not the menus and footer and everything else from my website being used within my newsletter that I will paste into CiviCRM.

Many thanks and greetings from Germany

Gerhard

Nice recipe

Interesting approach!

We also decided to opt for using a newsletter content type in Drupal:
https://www.nothing.ch/en/research/building-responsive-newsletter-new-inflight-magazine
It makes creating newsletters a great deal faster and easier and it ensures that you're completely independent from any kind of newsletter software. Additionally, we decided to invest time into making our newsletter responsive - maybe our article will help other people do the same.
We look forward to sharing experiences!

Cyclodex

I Get Relative Links

Great module, but it exports links (using $raw_markup) as relative. For an email they should be absolute. Is there a simple tweak for this or do I have to build what I need using the $fields and $node variables?

Thanks for letting us know

Thanks for letting us know about that issue - working on a fix now!

OK, the latest dev version

OK, the latest dev version fixes this issue: https://drupal.org/node/1969024, as well as any relative paths that may appear in the src attributes of images. Thanks again for letting us know about the problem.

Some help with node creation

Hi, thanks for the module. I was following your documentation until this point:
"We then create a newsletter node, let's just call it "Test Newsletter" to be boring."
Could you please clarify how I can create a 'newsletter node'?
Thanks!
A

ignore / delete this comment

apologies, on closer reading, your point needs no clarification, you can delete this comment.
thanks!

Retain display suite formatting in HTML

Hi, thanks for developing this module.
I am having trouble outputting the display of my newsletter correctly.
I have used Display Suite to configure the newsletter view mode of my article content type to output a Stacked 2 column: title in header, image on left, body on right.
When I generate my inline newsletter on my Drupal site, the articles appear in the desired way. However, when I generate my HTML file, and paste it into another application, e.g. Dreamweaver or MailChimp, the Stacked 2 column formatting is lost and each article appears in a single column, e.g. the image appears above the body rather than to the left of it. Also, the 'contextual links' 'Edit', 'Delete' and 'Manage Display' are also included in the HTML.
Please can you offer any further advice on getting the desired layout to be reflected in the HTML?
Thanks again,
Jonathan.

same issue here...

Subscribe...

Customize your display suite template for use with the export

The Newsletter Export module does not, at this time, include any inline style when the markup is produced - it is up to you to add this style. The module exports the html as generated by your theme's templates.

When using Display Suite's 2-column stacked layout, you will see in your export that the classes are in place (for example 'group-right' and 'group-left') - what you'll want to do is replace these classes with their inline equivalent. There are a couple of ways you can achieve this:

Method 1: manually add the desired css to your template

1. copy 'sites/all/modules/contrib/ds/layouts/ds_2col_stacked/ds-2col-stacked.tpl.php' to 'sites/all/themes/YOUR_THEME/templates' --- Re-name the file 'ds-2col-stacked--node-newsletter-export.tpl.php' (so that it is used only by the export display)

2. anywhere you see a class you'll want to replace it with the css inline style equivalent, for example:

Change:

<<?php print $left_wrapper ?> class="group-left<?php print $left_classes; ?>">

To:

<<?php print $left_wrapper ?> style="float: left; width: 50%;">

Tip: to find out the css used, you can either open 'sites/all/modules/contrib/ds/layouts/ds_2col_stacked/ds-2col-stacked.css' or, if using the inline settings of the Newsletter Export module, while viewing your newsletter on the web, right-click on an element and select 'inspect element' to view the active css in Chrome, or use Firebug in Firefox.

Method 2: implement CssToInlineStyles, automated script for converting css to inline style (at some point this may get added as a feature of the Newsletter Export module.)

1. go to https://github.com/tijsverkoyen/CssToInlineStyles and download the zip to sites/all/theme/YOUR_THEME/script

2. unzip and rename the folder from 'CssToInlineStyles-master' to 'CssToInlineStyles' (such that the file needed is located at 'sites/all/themes/YOUR_THEME/script/CssToInlineStyles/CssToInlineStyles.php'

3. create a new file at 'sites/all/themes/YOUR_THEME/css/newsletter.css', in this file include any css that you would like applied to your export (copy anything you like from your theme's css file(s) or customize to your liking).

4. open 'sites/all/modules/contrib/ds/layouts/ds_2col_stacked/ds_2col_stacked.css' and copy and paste its contents into your new newsletter.css file, edit the css to remove the ">" symbols (at this time CssToInlineStyles does not appear to understand this command).

5. copy 'sites/all/modules/contrib/newsletter_export/newsletter-export.tpl.php' to your theme's templates directory

6. in 'newsletter-export.tpl.php', change:

print $raw_markup

To:

$mytheme = drupal_get_path('theme', 'YOUR_THEME');

require_once $mytheme. '/script/CssToInlineStyles/CssToInlineStyles.php';

use \TijsVerkoyen\CssToInlineStyles\CssToInlineStyles;

// create instance
$cssToInlineStyles = new CssToInlineStyles();

$html = $raw_markup;
$css = file_get_contents($mytheme.'/css/newsletter.css');

$cssToInlineStyles->setHTML($html);
$cssToInlineStyles->setCSS($css);

// output
echo $cssToInlineStyles->convert();

To learn more about automated ways to produce the inline styles and more information regarding custom templating, please see some info here: https://drupal.org/node/2045961

How to remove contextual links?

Can you please advise us on how to prevent contextual links "Edit" "Delete" from being included in the HTML output?

Thank you.

Civicrm

Thank you for this great post! I am quite new to CIVICRM.
Once the newsletter is ready as HTML do you know:

- how to import the html-file into CIVICRM automatically
- configure name placeholder etc.
- notify CIVICRM to send then newsletters

Cheers,
Oliver

This module is not integrated with CiviCRM

@Oliver, this module does not provide automatic import into CiviCRM. It is designed to be a general solution for producing HTML-formatted email to be used in any and all newsletter sending software. CiviCRM was only an example of where the HTML could be used.

As for placeholders, you can get them to work: simply copy the file newsletter-export.tpl.php into your theme's templates folder, then edit it to include CiviCRM placeholder tokens, such as {contact.email_greeting} and when you paste the generated HTML into CiviCRM the placeholders will work.

Post new comment

By submitting this form, you accept the Mollom privacy policy.