Aihrus

Stonebriar Community Church runs TYPO3 and WordPress. TYPO3 is the core of their church content and web-based applications. While WordPress is for their community and micro sites.

As the number of Stonebriar’s ministries have grown, so has their personal and social outreach needs. One method that quickly became overwhelming was creating newsletters in Word documents and sending them via Shelby Systems’ church management software.

As most of Stonebriar’s communication’s team was already comfortable with TYPO3, it made sense to generate Stonebriar’s newsletters with TYPO3.

Setting up TYPO3 to generate newsletters is similar to a website. However, there are readability concerns because email applications differ in showing newsletter content. As such, simple layouts, inline styling and robust HTML source are required.

Creating a simpler layout is made easier by using MailChimp’s HTML Email Templates. Why? Because most email applications don’t fully support modern HTML specifications. Yes, that means using tables rather than divs and CSS for content layout.

TYPO3 extension CSS to inline converter for direct mail handles consistent styling in emails. css2inline takes our CSS style sheets and applies the CSS directly to HTML elements. Lastly, it removes the CSS style sheet links from our HTML source. Why? Because most email applications ignore CSS style sheets.

Finally, TYPO3 extension SourceOptimization helps us with solid HTML as our final output by removing whitespace between element tags. Why? Because some mixtures of character encoding and whitespace in HTML newsletters can cause funky characters, like “message, “A Life that Matters.†  In the Atrium” to show up in the email.

In pulling these components together, the two main TypoScript setup templates, config and page, are shown below. The last tricks of this system are the use of Backend Layouts to give our communication team editors a visual reference when editing content and a little custom code to convert Word’s smart quotes into HTML entities that don’t break Shelby’s newsletter file importerhttps://aihr.us/files/.

in the page object below, the css and layout files are automatically adjusted per the backend layout used for the newsletter page. the smart quote encoder is called using stdwrap.postuserfunc = user_functions->user_encodeSmartQuotes as the final processing for PAGE.

Complete TypoScript and Backend Layout are linked to as T3D exports in References.

TypoScript

Setup Code for Config

config {
  headerComment (
  )
  language = EN
  htmlTag_langKey = en-EN
  locale_all = [email protected]
  meaningfulTempFilePrefix = 50
  disableAllHeaderCode = 1
  tx_realurl_enable = 1
  baseURL = {$config.baseURL}
  absRefPrefix = {$config.baseURL}
  prefixLocalAnchors = all
  redirectOldLinksToNew = 1
  disableBaseWrap = 1
}
page.config {
  doctype = xhtml_trans
  disablePrefixComment = 1
}
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser >
lib.stdheader {
  stdWrap.dataWrap >
  1.headerClass >
  2.headerClass >
  3.headerClass >
  4.headerClass >
  5.headerClass >
  6.headerClass >
}
plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >
includeLibs.user_functions = fileadmin/templates_3.0/newsletters/scripts/class.user_functions.php

Setup Code for PAGE

page = PAGE
page {
  typeNum = 0
  # The extension will produce a full blown html document based on the html provided
  config.disableAllHeaderCode = 1
  # Call the extension
  10 = USER
  10 {
    userFunc = tx_css2inline_pi1->main
    # removeAttributes = class
    # Select the style sheets to be taken into consideration
    css = COA
    css {
      10 = FILE
      10.file.stdWrap.cObject = CASE
      10.file.stdWrap.cObject {
        key.data = levelfield:-1, backend_layout_next_level, slide
        key.override.field = backend_layout
        default = TEXT
        default.value = {$template.1.css}
        1 < .default
        2 = TEXT
        2.value = {$template.2.css}
      }
      20 = FILE
      20.file.stdWrap.cObject = CASE
      20.file.stdWrap.cObject {
        key.data = levelfield:-1, backend_layout_next_level, slide
        key.override.field = backend_layout
        default = TEXT
        default.value = {$template.1.common.css}
        1 < .default
        2 = TEXT
        2.value = {$template.2.common.css}
      }
      30 = FILE
      30.file = {$ministries.css}
      40 = FILE
      40.file = {$core.css}
    }
    # Generate the HTML content of the page
    html {
      # Head part
      10 = TEXT
      10 {
        wrap = <head>|</head>
        value = <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      }
      # Body part
      20 = FLUIDTEMPLATE
      20 {
        # Assign template files per backend template
        file.stdWrap.cObject = CASE
        file.stdWrap.cObject {
          key.data = levelfield:-1, backend_layout_next_level, slide
          key.override.field = backend_layout
          default = TEXT
          default.value = {$template.1.file}
          1 < .default
          2 = TEXT
          2.value = {$template.2.file}
        }
        partialRootPath = {$page.partialRootPath}
        layoutRootPath = {$page.layoutRootPath}
        format = html
        variables {
          pageWidth = TEXT
          pageWidth.value = {$ministries.width}
          sidebarWidth = COA
          sidebarWidth {
            10 = TEXT
            10.value = {$ministries.width}
            20 = TEXT
            20.value = /
            30 = TEXT
            30.value = 3
            stdWrap.prioriCalc = intval
          }
        }
      }
    }
  }
  stdWrap.postUserFunc = user_functions->user_encodeSmartQuotes
}

Smart Quotes Encoding

By default, Microsoft Word automatically changes straight quotation marks ( ‘ or ” ) to curly (smart or typographer’s) quotes as you type… When smart quotes are converted to HTML, the quotes are converted to non-standard characters which end up littering your document with question mark symbols and/or other garbage code.

The code below looks for the smart quote characters and converts them to HTML entities.

<?php
/**
*  Stonebriar newsletter helper methods
*
*  @author Michael Cannon <[email protected]>
*  @version $Id: .vimrc,v 1.9 2011/09/02 23:39:34 peimic.comprock Exp $
 */
class user_functions {
	// @ref http://www.toao.net/48-replacing-smart-quotes-and-em-dashes-in-mysql
	function user_encodeSmartQuotes( $content, $conf ) {
		$findUTF8				= array(
			"xe2x80x98",
			"xe2x80x99",
			"xe2x80x9c",
			"xe2x80x9d",
			"xe2x80x93",
			"xe2x80x94",
			"xe2x80xa6",
		);
		$findWindows			= array(
			chr(145),
			chr(146),
			chr(147),
			chr(148),
			chr(150),
			chr(151),
			chr(133),
		);
		$replace				= array(
			'&lsquo;',	// left single curly quote
			'&rsquo;',	// right single curly quote
			'&ldquo;',	// left double curly quote
			'&rdquo;',	// right double curly quote
			'&ndash;',	// en dash
			'&mdash;',	// em dash
			'&hellip;',	// ellipsis dash
		);
		$content				= str_replace( $findUTF8, $replace, $content );
		$content				= str_replace( $findWindows, $replace, $content );
		return $content;
	}
}
?>

Sending the Newsletters

To recap, Stonebriar uses Shelby for their membership management which can also email out newsletters when given an HTML file. Now, the newsletter process is drastically simpler.

1. Create the newsletter page in TYPO3
2. View and save the newsletter page as HTML
3. Upload the HTML file to Shelby
4. Select ministry recipients and email via Shelby

Questions? Critiques? Etc.?

Please comment below with your thoughts?

• How have you solved the newsletters with TYPO3 issue?
• What do you think could’ve been done differently?

References

• Stonebriar February 2012 Missions Newsletter
• HTML Email Templates
• CSS to inline converter for direct mail
• SourceOptimization
• Replacing smart quotes, em-dashes, and ellipses with MySQL or PHP
• Stonebriar Newsletter TypoScript
• Stonebriar Newsletter Layouts

The T3D’s are only of the system folder, CSS and HTML files and TypoScript templates. You can include the “Master” template to show the newsletters your TYPO3 system. Please note that Backend Layouts and TemplaVoila do NOT work together.