HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en" xmlns:v = "urn:schemas-microsoft-com:vml" xmlns:o = "urn:schemas-microsoft-com:office:office" >
< head >
< link rel = "stylesheet" type = "text/css" href = "css/app.css" >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< meta name = "viewport" content = "width=device-width" >
< meta content = "telephone=no" name = "format-detection" >
< title > {{blog.title}}< / title >
<!-- [if gte mso 9]>
< xml >
< o:OfficeDocumentSettings >
< o:AllowPNG / >
< o:PixelsPerInch > 96< / o:PixelsPerInch >
< / o:OfficeDocumentSettings >
< / xml >
<![endif]-->
< / head >
< body style = "-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;box-sizing:border-box;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;min-width:100%;padding:0;text-align:left;width:100%!important" >
< style > @ m e d i a o n l y s c r e e n { h t m l { m i n - h e i g h t : 1 0 0 % ; b a c k g r o u n d : # F F F } } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 6 2 0 p x ) { . s m a l l - f l o a t - c e n t e r { m a r g i n : 0 a u t o ! i m p o r t a n t ; f l o a t : n o n e ! i m p o r t a n t ; t e x t - a l i g n : c e n t e r ! i m p o r t a n t } . s m a l l - t e x t - c e n t e r { t e x t - a l i g n : c e n t e r ! i m p o r t a n t } . s m a l l - t e x t - l e f t { t e x t - a l i g n : l e f t ! i m p o r t a n t } . s m a l l - t e x t - r i g h t { t e x t - a l i g n : r i g h t ! i m p o r t a n t } } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 6 2 0 p x ) { t a b l e . b o d y t a b l e . c o n t a i n e r . h i d e - f o r - l a r g e { d i s p l a y : b l o c k ! i m p o r t a n t ; w i d t h : a u t o ! i m p o r t a n t ; o v e r f l o w : v i s i b l e ! i m p o r t a n t } } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 6 2 0 p x ) { t a b l e . b o d y t a b l e . c o n t a i n e r . r o w . h i d e - f o r - l a r g e { d i s p l a y : t a b l e ! i m p o r t a n t ; w i d t h : 1 0 0 % ! i m p o r t a n t } } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 6 2 0 p x ) { t a b l e . b o d y t a b l e . c o n t a i n e r . s h o w - f o r - l a r g e { d i s p l a y : n o n e ! i m p o r t a n t ; w i d t h : 0 ; m s o - h i d e : a l l ; o v e r f l o w : h i d d e n } } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 6 2 0 p x ) { t a b l e . b o d y i m g { w i d t h : a u t o ! i m p o r t a n t ; h e i g h t : a u t o ! i m p o r t a n t } t a b l e . b o d y c e n t e r { m i n - w i d t h : 0 ! i m p o r t a n t } t a b l e . b o d y . c o n t a i n e r { w i d t h : 9 5 % ! i m p o r t a n t } t a b l e . b o d y . c o l u m n , t a b l e . b o d y . c o l u m n s { h e i g h t : a u t o ! i m p o r t a n t ; - m o z - b o x - s i z i n g : b o r d e r - b o x ; - w e b k i t - b o x - s i z i n g : b o r d e r - b o x ; b o x - s i z i n g : b o r d e r - b o x ; p a d d i n g - l e f t : 0 ! i m p o r t a n t ; p a d d i n g - r i g h t : 0 ! i m p o r t a n t } t a b l e . b o d y . c o l u m n . c o l u m n , t a b l e . b o d y . c o l u m n . c o l u m n s , t a b l e . b o d y . c o l u m n s . c o l u m n , t a b l e . b o d y . c o l u m n s . c o l u m n s { p a d d i n g - l e f t : 0 ! i m p o r t a n t ; p a d d i n g - r i g h t : 0 ! i m p o r t a n t } t a b l e . b o d y . c o l l a p s e . c o l u m n , t a b l e . b o d y . c o l l a p s e . c o l u m n s { p a d d i n g - l e f t : 0 ! i m p o r t a n t ; p a d d i n g - r i g h t : 0 ! i m p o r t a n t } t d . s m a l l - 1 , t h . s m a l l - 1 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 3 . 5 7 1 4 3 % ! i m p o r t a n t } t d . s m a l l - 2 , t h . s m a l l - 2 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 7 . 1 4 2 8 6 % ! i m p o r t a n t } t d . s m a l l - 3 , t h . s m a l l - 3 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 1 0 . 7 1 4 2 9 % ! i m p o r t a n t } t d . s m a l l - 4 , t h . s m a l l - 4 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 1 4 . 2 8 5 7 1 % ! i m p o r t a n t } t d . s m a l l - 5 , t h . s m a l l - 5 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 1 7 . 8 5 7 1 4 % ! i m p o r t a n t } t d . s m a l l - 6 , t h . s m a l l - 6 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 2 1 . 4 2 8 5 7 % ! i m p o r t a n t } t d . s m a l l - 7 , t h . s m a l l - 7 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 2 5 % ! i m p o r t a n t } t d . s m a l l - 8 , t h . s m a l l - 8 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 2 8 . 5 7 1 4 3 % ! i m p o r t a n t } t d . s m a l l - 9 , t h . s m a l l - 9 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 3 2 . 1 4 2 8 6 % ! i m p o r t a n t } t d . s m a l l - 1 0 , t h . s m a l l - 1 0 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 3 5 . 7 1 4 2 8 % ! i m p o r t a n t } t d . s m a l l - 1 1 , t h . s m a l l - 1 1 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 3 9 . 2 8 5 7 1 % ! i m p o r t a n t } t d . s m a l l - 1 2 , t h . s m a l l - 1 2 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 4 2 . 8 5 7 1 4 % ! i m p o r t a n t } t d . s m a l l - 1 3 , t h . s m a l l - 1 3 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 4 6 . 4 2 8 5 7 % ! i m p o r t a n t } t d . s m a l l - 1 4 , t h . s m a l l - 1 4 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 5 0 % ! i m p o r t a n t } t d . s m a l l - 1 5 , t h . s m a l l - 1 5 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 5 3 . 5 7 1 4 3 % ! i m p o r t a n t } t d . s m a l l - 1 6 , t h . s m a l l - 1 6 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 5 7 . 1 4 2 8 6 % ! i m p o r t a n t } t d . s m a l l - 1 7 , t h . s m a l l - 1 7 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 6 0 . 7 1 4 2 8 % ! i m p o r t a n t } t d . s m a l l - 1 8 , t h . s m a l l - 1 8 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 6 4 . 2 8 5 7 1 % ! i m p o r t a n t } t d . s m a l l - 1 9 , t h . s m a l l - 1 9 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 6 7 . 8 5 7 1 4 % ! i m p o r t a n t } t d . s m a l l - 2 0 , t h . s m a l l - 2 0 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 7 1 . 4 2 8 5 7 % ! i m p o r t a n t } t d . s m a l l - 2 1 , t h . s m a l l - 2 1 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 7 5 % ! i m p o r t a n t } t d . s m a l l - 2 2 , t h . s m a l l - 2 2 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 7 8 . 5 7 1 4 3 % ! i m p o r t a n t } t d . s m a l l - 2 3 , t h . s m a l l - 2 3 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 8 2 . 1 4 2 8 6 % ! i m p o r t a n t } t d . s m a l l - 2 4 , t h . s m a l l - 2 4 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 8 5 . 7 1 4 2 9 % ! i m p o r t a n t } t d . s m a l l - 2 5 , t h . s m a l l - 2 5 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 8 9 . 2 8 5 7 1 % ! i m p o r t a n t } t d . s m a l l - 2 6 , t h . s m a l l - 2 6 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 9 2 . 8 5 7 1 4 % ! i m p o r t a n t } t d . s m a l l - 2 7 , t h . s m a l l - 2 7 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 9 6 . 4 2 8 5 7 % ! i m p o r t a n t } t d . s m a l l - 2 8 , t h . s m a l l - 2 8 { d i s p l a y : i n l i n e - b l o c k ! i m p o r t a n t ; w i d t h : 1 0 0 % ! i m p o r t a n t } . c o l u m n t d . s m a l l - 2 8 , . c o l u m n t h . s m a l l - 2 8 , . c o l u m n s t d . s m a l l - 2 8 , . c o l u m n s t h . s m a l l - 2 8 { d i s p l a y : b l o c k ! i m p o r t a n t ; w i d t h : 1 0 0 % ! i m p o r t a n t } t a b l e . b o d y t d . s m a l l - o f f s e t - 1 , t a b l e . b o d y t h . s m a l l - o f f s e t - 1 { m a r g i n - l e f t : 3 . 5 7 1 4 3 % ! i m p o r t a n t ; M a r g i n - l e f t : 3 . 5 7 1 4 3 % ! i m p o r t a n t } t a b l e . b o d y t d . s m a l l - o f f s e t - 2 , t a b l e . b o d y t h . s m a l l - o f f s e t - 2 { m a r g i n - l e f t : 7 . 1 4 2 8 6 % ! i m p o r t a n t ; M a r g i n - l e f t : 7 . 1 4 2 8 6 % ! i m p o r t a n t } t a b l e . b o d y t d . s m a l l - o f f s e t - 3 , t a b l e . b o d y t h . s m a l l - o f f s e t - 3 { m a r g i n - l e f t : 1 0 . 7 1 4 2 9 % ! i m p o r t
< span class = "preheader" > < / span >
< table class = "body" style = "Margin:0;background:#FFF;border-collapse:collapse;border-spacing:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:100%;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td class = "center" align = "center" valign = "top" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >
< center data-parsed = "" style = "min-width:580px;width:100%" >
< table class = "container float-center" style = "Margin:0 auto;background:#FFF;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:580px" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >
<!-- Start header -->
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "70px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:70px;font-weight:400;hyphens:auto;line-height:70px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
<!-- #if blogLogo -->
< % if (blog.logo) { %>
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< center data-parsed = "" style = "min-width:580px;width:100%" >
<!-- Blog logo width and height 70px for best results -->
< img class = "blog-logo float-center" src = "{{blog.logo}}" alt = "Blog Logo" width = "70" height = "70" style = "-ms-interpolation-mode:bicubic;Margin:0 auto;border-radius:50%;clear:both;display:block;float:none;height:70px;margin:0 auto;max-width:100%;outline:0;text-align:center;text-decoration:none;width:70px!important" align = "center" >
< / center >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< % } %>
<!-- /if 'blogLogo' -->
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "20px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;hyphens:auto;line-height:20px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
<!-- Blog title -->
2016-08-18 22:29:46 +03:00
< h1 class = "blog-title text-center" style = "Margin:0;Margin-bottom:0;color:#242628;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:100%;margin:0;margin-bottom:0;padding:0;text-align:center;word-wrap:normal" >
HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
{{blog.title}}
< / h1 >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "10px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:10px;font-weight:400;hyphens:auto;line-height:10px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
<!-- interval (Weekly, Monthly, Daily) & date (e.g. June 9th, 2016) -->
2016-08-18 22:29:46 +03:00
< h3 class = "text-center mail-issue" style = "Margin:0;Margin-bottom:0;color:#7d878a;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:100%;margin:0;margin-bottom:0;padding:0;text-align:center;word-wrap:normal;" >
HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
< span style = "text-transform:capitalize" > {{newsletter.interval}}< / span > digest —
< span style = "text-transform:capitalize" > {{newsletter.date}}< / span > < / h3 >
< / h3 >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "50px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
<!-- / End header -->
<!-- Start featured blog post -->
<!-- #if blog post picture -->
< % if (blog.post[0].picture) { %>
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< center data-parsed = "" style = "min-width:580px;width:100%" >
<!-- blog post picture, height 268px und width 580px for best results -->
< img class = "feature-post-image float-center" src = "{{blog.post[0].picture}}" alt = "Feature Image" width = "580" heigth = "268" align = "center" style = "-ms-interpolation-mode:bicubic;Margin:0 auto;border:0 none;border-top-left-radius:7px;border-top-right-radius:7px;clear:both;display:block;float:none;height:auto!important;margin:0 auto;max-width:100%;outline:0;text-align:center;text-decoration:none;width:100%!important;z-index:99" > < / center >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< % } %>
<!-- /if blog post picture -->
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
<!-- Begin Post #1 -->
<!-- #if 'Blog Post Picture' -->
< % if (blog.post[0].picture) { %>
< table class = "row feature-post-content" style = "border:1px solid #E1E1E1;border-collapse:collapse;border-radius:7px!important;border-spacing:0;border-top:none;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< % } else { %>
< table class = "row feature-post-content no-picture" style = "border:1px solid #E1E1E1;border-collapse:collapse;border-radius:7px!important;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< % } %>
<!-- /if 'Blog Post Picture' -->
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-2 large-2 columns first" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:7.14286%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >   < / th >
< / tr >
< / table >
< / th >
< th class = "small-24 large-24 columns" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:85.71429%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "row collapse" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:100%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "30px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:30px;font-weight:400;hyphens:auto;line-height:30px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row collapse" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:100%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
<!-- Post #1 title & Post #1 URL -->
<!-- Always use `’` instead of `'` or `'`, because Outlook & co will break -->
< h2 class = "feature-post-title" style = "Margin:0;Margin-bottom:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:30px;font-weight:400;line-height:1.3;margin:0;margin-bottom:0;padding:0;text-align:left;word-wrap:normal" >
2016-08-18 22:29:46 +03:00
< a href = "{{blog.post[0].title}}" target = "_blank" style = "Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:22px;font-weight:700;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none" > < font color = "#242628" >
HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
{{blog.post[0].title}}< / font >
< / a >
< / h2 >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row collapse" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:100%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "20px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;hyphens:auto;line-height:20px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row collapse" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:100%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
<!-- Post #1 text -->
<!-- Always use `’` instead of `'` or `'`, because Outlook & co will break -->
2016-08-18 22:29:46 +03:00
< p class = "feature-post-text" style = "Margin:0;Margin-bottom:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:17px;font-weight:400;line-height:23px!important;margin:0;margin-bottom:0;padding:0;text-align:left" >
HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
{{blog.post[0].text}}
< / p >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row collapse" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:100%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "24px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:24px;font-weight:400;hyphens:auto;line-height:24px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row collapse" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:100%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
<!-- Post #1 URL -->
< table class = "button large radius expand primary read-more-button" style = "Margin:0;border-collapse:collapse;border-spacing:0;color:#FFF!important;margin:0;padding:0;text-align:left;vertical-align:top;width:100%!important" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:42px;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:middle;width:100%;word-wrap:break-word" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#5BA4E5;border:none;border-collapse:collapse!important;border-radius:5px;color:#FFF;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:42px;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:middle;width:100%;word-wrap:break-word" >
< center data-parsed = "" style = "min-width:0;width:100%" >
< a href = "{{blog.post[0].url}}" align = "center" class = "float-center" style = "Margin:0;border:0 solid #5BA4E5;border-radius:5px;color:#FFF!important;display:inline-block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:17px;font-weight:400;line-height:1.3;margin:0;padding:10px 30px 10px 30px;padding-left:0;padding-right:0;text-align:center;text-decoration:none;width:100%" > < font color = "#FFFFFF" >
Read More< / font >
< / a >
< / center >
< / td >
< / tr >
< / table >
< / td >
< td class = "expander" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0!important;text-align:left;vertical-align:top;visibility:hidden;width:0;word-wrap:break-word" > < / td >
< / tr >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row collapse" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:100%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "35px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:35px;font-weight:400;hyphens:auto;line-height:35px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< th class = "small-2 large-2 columns last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:7.14286%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >   < / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
<!-- End Post #1 -->
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
<!-- / End featured blog post -->
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "42px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:42px;font-weight:400;hyphens:auto;line-height:42px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
<!-- Start blog posts -->
<!-- #if number of posts > 1 -->
< % if (blog.post.length > 1) { %>
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-2 large-2 columns first" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:41.43px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >   < / th >
< / tr >
< / table >
< / th >
< th class = "small-24 large-24 columns" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:497.14px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
<!-- post #2 tag & post #2 author -->
< p class = "text-left text-left author-tag" style = "Margin:0;Margin-bottom:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;margin-bottom:0;padding:0;text-align:left;text-transform:uppercase" >
{{blog.post[1].tag}} / {{blog.post[1].author}}
< / p >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "7px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:7px;font-weight:400;hyphens:auto;line-height:7px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
<!-- post #2 url & post #2 title -->
< h2 class = "post-title" style = "Margin:0;Margin-bottom:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:30px;font-weight:400;line-height:1.3;margin:0;margin-bottom:0;padding:0;text-align:left;word-wrap:normal" >
2016-08-18 22:29:46 +03:00
< a href = "{{blog.post[1].url}}" target = "_blank" style = "Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:21px;font-weight:700;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none" > < font color = "#242628" >
HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
{{blog.post[1].title}}< / font >
< / a >
< / h2 >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "5px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:5px;font-weight:400;hyphens:auto;line-height:5px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
<!-- post #2 text -->
2016-08-18 22:29:46 +03:00
< p class = "text-left post-text" style = "Margin:0;Margin-bottom:0;color:#7d878a!important;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:22px;margin:0;margin-bottom:0;padding:0;text-align:left" >
HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
{{blog.post[1].text}}
< / p >
< / th >
< / tr >
< / table >
< / th >
< th class = "small-2 large-2 columns last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:41.43px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >   < / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "40px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:40px;font-weight:400;hyphens:auto;line-height:40px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
<!-- #if number of posts > 2 -->
< % if (blog.post.length > 2) { %>
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-2 large-2 columns first" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:41.43px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >   < / th >
< / tr >
< / table >
< / th >
< th class = "small-24 large-24 columns" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:497.14px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
<!-- post #3 tag & post #3 author -->
< p class = "text-left text-left author-tag" style = "Margin:0;Margin-bottom:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;margin-bottom:0;padding:0;text-align:left;text-transform:uppercase" >
{{blog.post[2].tag}} / {{blog.post[2].author}}
< / p >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "7px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:7px;font-weight:400;hyphens:auto;line-height:7px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
<!-- post #3 url & post #3 title -->
< h2 class = "post-title" style = "Margin:0;Margin-bottom:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:30px;font-weight:400;line-height:1.3;margin:0;margin-bottom:0;padding:0;text-align:left;word-wrap:normal" >
2016-08-18 22:29:46 +03:00
< a href = "{{blog.post[2].url}}" target = "_blank" style = "Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:21px;font-weight:700;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none" > < font color = "#242628" >
HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
{{blog.post[2].title}}< / font >
< / a >
< / h2 >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "5px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:5px;font-weight:400;hyphens:auto;line-height:5px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
<!-- post #3 text -->
2016-08-18 22:29:46 +03:00
< p class = "text-left post-text" style = "Margin:0;Margin-bottom:0;color:#7d878a!important;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:22px;margin:0;margin-bottom:0;padding:0;text-align:left" >
HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
{{blog.post[2].text}}
< / p >
< / th >
< / tr >
< / table >
< / th >
< th class = "small-2 large-2 columns last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:41.43px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >   < / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "40px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:40px;font-weight:400;hyphens:auto;line-height:40px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
<!-- #if number of posts > 3 -->
< % if (blog.post.length > 3) { %>
<!-- repeat code for each blog post after 3 -->
< % for (var i = 3; i < blog.post.length ; i + + ) { % >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-2 large-2 columns first" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:41.43px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >   < / th >
< / tr >
< / table >
< / th >
< th class = "small-24 large-24 columns" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:497.14px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
<!-- post #4 tag & post #4 author -->
< p class = "text-left text-left author-tag" style = "Margin:0;Margin-bottom:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;margin-bottom:0;padding:0;text-align:left;text-transform:uppercase" >
{{blog.post[i]['tag']}} / {{blog.post[i]['author']}}
< / p >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "7px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:7px;font-weight:400;hyphens:auto;line-height:7px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
<!-- post #4 url & post #4 title -->
< h2 class = "post-title" style = "Margin:0;Margin-bottom:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:30px;font-weight:400;line-height:1.3;margin:0;margin-bottom:0;padding:0;text-align:left;word-wrap:normal" >
2016-08-18 22:29:46 +03:00
< a href = "{{blog.post[i]['url']}}" target = "_blank" style = "Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:21px;font-weight:700;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none" > < font color = "#242628" >
HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
{{blog.post[i]['title']}}< / font >
< / a >
< / h2 >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "5px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:5px;font-weight:400;hyphens:auto;line-height:5px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
<!-- post #4 text -->
2016-08-18 22:29:46 +03:00
< p class = "text-left post-text" style = "Margin:0;Margin-bottom:0;color:#7d878a!important;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:22px;margin:0;margin-bottom:0;padding:0;text-align:left" >
HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
{{blog.post[i]['text']}}
< / p >
< / th >
< / tr >
< / table >
< / th >
< th class = "small-2 large-2 columns last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:41.43px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >   < / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
<!-- only if not last blog post -->
< % if (i < blog.post.length-1 ) { % >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "40px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:40px;font-weight:400;hyphens:auto;line-height:40px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< % } %>
<!-- / only if not last blog post -->
< % } %>
<!-- / End blog posts -->
<!-- Start footer -->
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:100%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "62px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:62px;font-weight:400;hyphens:auto;line-height:62px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-3 large-3 columns first" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:10.71429%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >   < / th >
< / tr >
< / table >
< / th >
< th class = "small-22 large-22 columns" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:78.57143%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
<!-- blog URL && blog title -->
< table class = "button secondary large rounded expanded find-more-button" style = "Margin:0;border-collapse:collapse;border-spacing:0;color:#FFF!important;font-size:17px!important;margin:0;padding:0;text-align:left;vertical-align:top;width:100%!important" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:42px;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:middle;width:100%;word-wrap:break-word" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#949A9F;border:0;border-collapse:collapse!important;border-radius:500px;color:#FFF;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:42px;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:middle;width:100%;word-wrap:break-word" >
< center data-parsed = "" style = "min-width:0;width:100%" >
< a href = "{{blog.url}}" align = "center" class = "float-center" style = "Margin:0;border:0 solid #949A9F;border-radius:5px;color:#FFF!important;display:inline-block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:17px;font-weight:400;line-height:1.3;margin:0;padding:10px 30px 10px 30px;padding-left:0;padding-right:0;text-align:center;text-decoration:none;width:100%" > < font color = "#FFFFFF" >
Find more on {{blog.title}}< / font >
< / a > < / center >
< / td >
< / tr >
< / table >
< / td >
< td class = "expander" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0!important;text-align:left;vertical-align:top;visibility:hidden;width:0;word-wrap:break-word" > < / td >
< / tr >
< / table >
< / th >
< / tr >
< / table >
< / th >
< th class = "small-3 large-3 columns last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:10.71429%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >   < / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:100%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "10px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:10px;font-weight:400;hyphens:auto;line-height:10px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
<!-- twitter blog URL & facebook blog URL -->
< p class = "text-center social-links" style = "Margin:0;Margin-bottom:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:17px;font-weight:400;line-height:20px;margin:0;margin-bottom:0;padding:0;text-align:center" > or follow us on
< a href = "{{blog.twitterUrl}}" target = "_blank" style = "Margin:0;color:#5BA4E5!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:none" > < font color = "#5BA4E5" > Twitter< / font > < / a > &
< a href = "{{blog.facebookUrl}}" target = "_blank" style = "Margin:0;color:#5BA4E5!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:none" > < font color = "#5BA4E5" > Facebook< / font > < / a >
for instant updates
< / p >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:100%" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "57px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:57px;font-weight:400;hyphens:auto;line-height:57px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< % } %>
<!-- /if number of posts > 3 -->
< % } %>
<!-- /if number of posts > 2 -->
< % } %>
<!-- /if number of posts > 1 -->
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
<!-- newsletter interval unsubscribe link & blog title -->
2016-08-18 22:29:46 +03:00
< p class = "unsubscribe-text" style = "Margin:0;Margin-bottom:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:16px;margin:0;margin-bottom:0;padding:0;text-align:center" >
HTML newsletter template for subscribers (#7045)
refs #7023
The template can be used for all cases (different newsletter interval, different amount of blog posts, with or without blog picture).
The template can be filled with the following data structure:
- `blog.logo` is the blog logo from settings
- `blog.title` is the title of the current blog
- `blog.url` is the URL of the blog
- `blog.twitterURL` is the twitter profile URL of the blog from settings
- `blog.facebookURL` is the facebook page URL of the blog from settings
- `blog.unsubscribe` is the link for the reader to unsubscribe from the blog
- `newsletter.interval` is the interval in words like 'weekly', 'daily', 'monthly'
- `newsletter.date` is the date of the newsletter issue in a format like 'June 9th, 2016'
- `blog.post` is expected to be an array:
- `blog.post[i].picture` is the picture of the blog post. There are also conditionals, which change the inline CSS to either show a border-top if there's no picture (in that case the HTML code, that shows the picture is not active)
- `blog.post[i].title` is the title of the current blog post
- `blog.post[i].text` is the text of the current blog post, which needs to be cut down to 278 letters, plus ending with `…`
- `blog.post[i].url` is the URL of the current blog post
- `blog.post[i].tag` is the tag of the current blog post
- `blog.post[i].author` is the author of the current blog post
Important is, that only HEX HTML entities will work, especially in Outlook. So instead of `—` we need to use `—` and `’` instead of `'` or `'` and so on.
Added unit test for newsletter template in `test/unit/mail/utils_spec.js`.
2016-07-09 06:40:32 +03:00
You’ re receiving this email because you subscribed to {{newsletter.interval}} emails from {{blog.title}}< br > If you’ d prefer not to receive these, you can
< a href = "{{blog.unsubscribe}}" target = "_blank" style = "Margin:0;color:#7d878a!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:underline" > < font color = "#7d878a" >
unsubscribe instantly< / font >
< / a > .
< / p >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
< table class = "row" style = "border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th class = "small-28 large-28 columns first last" style = "Margin:0 auto;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:580px" >
< table style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< th style = "Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left" >
< table class = "spacer" style = "border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%" >
< tbody >
< tr style = "padding:0;text-align:left;vertical-align:top" >
< td height = "38px" style = "-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:38px;font-weight:400;hyphens:auto;line-height:38px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" >   < / td >
< / tr >
< / tbody >
< / table >
< / th >
< / tr >
< / table >
< / th >
< / tr >
< / tbody >
< / table >
<!-- / End footer -->
< / td >
< / tr >
< / tbody >
< / table >
< / center >
< / td >
< / tr >
< / table >
<!-- prevent Gmail on iOS font size manipulation -->
< div style = "display:none;white-space:nowrap;font:15px courier;line-height:0" >                                                             < / div >
< / body >
< / html >
