Learn about the top 2016 CMS trends. Read on.


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 importer.

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 = en_EN@usd
  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 <michael@peimic.com>
*  @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(
			"\xe2\x80\x98",
			"\xe2\x80\x99",
			"\xe2\x80\x9c",
			"\xe2\x80\x9d",
			"\xe2\x80\x93",
			"\xe2\x80\x94",
			"\xe2\x80\xa6",
		);

		$findWindows			= array(
			chr(145),
			chr(146),
			chr(147),
			chr(148),
			chr(150),
			chr(151),
			chr(133),
		);

		$replace				= array(
			'‘',	// left single curly quote
			'’',	// right single curly quote
			'“',	// left double curly quote
			'”',	// right double curly quote
			'–',	// en dash
			'—',	// em dash
			'…',	// 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

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.

Still stuck? Write us.

  • Michael,
    I love the article but just to clarify…

    We receive the newsletter information from the ministries in word or text form, then we manually converted it to converted to a local HTML file(not in Typo3), using notepad ++. Then we would run the local draft by our in-team editor. Once editing was completed, then it would go to the requesting Ministry to make sure they liked the design and approve any content changes.

    Once approved, we upload the HTML file to typo3 as a file, then uploaded any images (.pdf, .jpg) associated with the HTML newsletter. Then we edit the local HTML file to point any hyperlinks/images to the HTML file on Typo3. We save that, then upload it to Typo3 and overwrite the 1st file. Then we test all hyperlinks and view in browser to make sure everything looks okay. If it looks good then we send we upload the local file to Shelby and send out a test e-mail and make sure all looks good.

    If the test e-mail pukes (looks) bad in Outlook, Gmail or Yahoo e-mail emulators, then the HTML e-mail gets escalated to me to try and figure out what in the HTML code/template was bad and I have to fix it and then re test.

    Now, we will let the Ministry created their newsletter directly in Typo3 with the prefabbed templates. They will email us the link for their newsletter; we will edit directly in Typo3 and send them confirmation that the HTML Newsletter has been edit and is ready to go. Then all they have to do is save the Typo3 newsletter as a local HTML file and upload to Shelby and send it out.

    So you can see, it not only makes thing soooo much easier but much simpler :)
    Thank you Michael!!
    A-

    • Andrea,

      You’re very welcome.

      Thank you very much for approving of this article and your enlightening comments about the newsletters. It really feels good when technology can be used to simplify processes and therefore remove some of life’s headaches.

      Michael