Robust Newsletters: TYPO3 Built | ||
![]() 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 Complete TypoScript and Backend Layout are linked to as T3D exports in References. TypoScriptSetup Code for Configconfig { 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 PAGEpage = 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 EncodingBy 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( '‘', // 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 NewslettersTo 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.
Questions? Critiques? Etc.?Please comment below with your thoughts?
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.
Related Entries | ||
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