Graphic integration

  1. Create a newsletter template
    1. Example of a template for the HTML version (Template file.xsl)
    2. Example of a template for the HTML version (File template-text.xsl)
    3. Advanced customization
      1. Insert an automatic table of contents
      2. Link to unsubscribe newsletter
      3. Link to the online newsletter
  2. Create a newsletter template
  3. Example

 

This page is intended for integrators with a minimum knowledge of HTML, CSS, XML, XSL, I18N.

Create a newsletter template

This plugin requires the graphic integration of at least one newsletter template.

For each template, you need to create style sheets ( xsl files) to generate the newsletter in HTML and text formats:

  • A template file.xsl for the HTML
  • A template-text file.xsl for the text version.

These files must be located in a directory of the graphic charter in skins/[nom_skin]/newsletter/[nom_gabarit]/stylesheets

Example of a template for the HTML version (Template file.xsl) 

<xsl:template match="/">
<html>
<head>
<xsl:copy-of select="/html/head/node()"/>
<link type="text/css" href="{$skincontext}/css/newsletter.css" rel="stylesheet" media="screen" />
</head>

<body>
<div id="email-box">

<div id="box">

<div id="header">
<!-- Header here (title, date, number, ...)-->
</div>

<div class="content">
<xsl:apply-templates select="/html/body/node()"/>
</div>

<div id="footer">
<!-- Footer here (mentions, unsubscribe, ...) -->
</div>

</div>
</div>
</body>
</html>
</xsl:template>

Example of a template for the HTML version (File template-text.xsl)

<xsl:template match="/">
<html>
<head>
</head>

<body>
<!-- Header -->
<xsl:text>---------------------------------------------------------------------------------------------------------</xsl:text><xsl:text>
</xsl:text>

<xsl:apply-templates select="/html/body/node()"/>

<xsl:text>---------------------------------------------------------------------------------------------------------</xsl:text><xsl:text>
</xsl:text>
<!-- Footer (mentions, unsubscribe, ...) -->
</body>

</html>

</xsl:template>


<xsl:template match="h3"><xsl:text>
</xsl:text>. <xsl:value-of select="normalize-space(text())"/><xsl:text>
</xsl:text>
</xsl:template>

<xsl:template match="h2"><xsl:text>
</xsl:text><xsl:value-of select="translate(text(), 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ')"/><xsl:text>
</xsl:text>
</xsl:template>

<xsl:template match="p"><xsl:apply-templates/><xsl:text>
</xsl:text>
</xsl:template>

<xsl:template match="br"><xsl:text>
</xsl:text>
</xsl:template>

<xsl:template match="img">[<xsl:value-of select="@alt"/>]
</xsl:template>

<xsl:template match="a"><xsl:value-of select="text()"/><xsl:text> </xsl:text><xsl:value-of select="@href"/>
</xsl:template>

<xsl:template match="text()"><xsl:value-of select="normalize-space(.)"/></xsl:template>

Advanced customization

Insert an automatic table of contents

The code XSL below gives you an example of how to automatically insert a summary in the newsletter.
The summary here is made up of the article titles (H1) contained in the newsletter (from an insertion of the latest publications) and creates an anchor to the article summary in the newsletter.

 

<xsl:template name="toc">
        <xsl:if test="/html/body//div[@id = 'newsletter-content']/div[@class = 'center']/div[@class = 'articles']//h1">
            <div id="toc">
                <h2><i18n:text i18n:key="NEWSLETTER_TOP_OF_CONTENT" i18n:catalogue="skin.{$skin}"/></h2>
                
                <xsl:call-template name="toc-list"/>
            </div>
        </xsl:if>
 </xsl:template>
    
 <xsl:template name="toc-list">
       <ul>
            <xsl:for-each select="/html/body//div[@id = 'newsletter-content']/div[@class = 'center']/div[@class = 'articles']//h1">
                <li>
                    <a href="#go-to-{count(preceding::h1)}"><xsl:value-of select="text()"/></a>
                </li>
            </xsl:for-each>
        </ul>
 </xsl:template>
  

Link to unsubscribe newsletter

Add the following XSL code to add an unsubscribe link to your template 

<a href="{$contextPath}/{$lang}/_plugins/newsletter/page/unsubscribe?token=#token#"><i18n:text i18n:key="NEWSLETTER_FOOTER_MENTIONS_4" i18n:catalogue="skin.{$skin}"/></a>

This link allows you to unsubscribe directly from the newsletter.

From version 2.8.0 onwards, you can insert a link to the page containing the "Newsletter subscription and management" service (by identifying the page with a label, for example).

<xsl:variable name="pageId" select="ametys:findPagesIdsByTag($siteName, $lang, 'MY_TAG')/@id"/>
<a href="{resolver:resolve('page', $pageId)}?token=#token#"><i18n:text i18n:key="NEWSLETTER_FOOTER_MENTIONS_4" i18n:catalogue="skin.{$skin}"/></a>

This link allows you to manage your subscription to all newsletters.

Link to the online newsletter

Add the following code snippet to add a link to view the newsletter online 

<xsl:if test="$mail = 'true'">
<a href="{$contextPath}/_wrapped-content/{/html/head/meta[@name = 'contentName']/@content}.html"><i18n:text i18n:key="SKIN_NEWSLETTER_TEMPLATE_REDIRECT_2" i18n:catalogue="skin.{$skin}"/></a>
</xsl:if>

Create a newsletter template

A newsletter template is a XML file used to guide the webmaster when creating or editing a newsletter.

A newly created newsletter will be pre-filled with this template.

There is a template for each template. The template file must be located in a directory of the graphic charter in skins/[nom_skin]/newsletter/[nom_gabarit]/model/model.xml

The file must contain the <model> followed by the code HTML , which will be added to the newsletter's content when it is created.

Here's a simple example:

<model lang="en">
<div id="newsletter-content">
<div class="center">
<div class="edito">
<h1>Edito</h1>
<p>
Enter the edito here
</p>
</div>

<div class="articles">
<p>Insert the last publication here</p>
</div>
</div>

<div class="sidebar">
<div class="encart">
<h2>Zoom</h2>
<p>Enter the zoom here.</p>
</div>

<div class="encart last">
<h2>Links</h2>
<p>Enter the new links here</p>
</div>
</div>

</div>
</model>

Example

Below is an example of a newsletter that can be integrated and sent out.

  1. Automatically generated (non-editable) summary based on titles contained in newsletter content (2)
  2. Main editable content of the newsletter. A selection of the latest articles published on the site has been inserted here (via the latest publication insertion function).
  3. Free editable content
  4. Newsletter footer contained in template (non-editable)

Back to top

Newsletter