Ghost/ghost/email-service/lib/email-templates/template.hbs
Simon Backx 07ec33fb3a
Added latest posts to email template (#16448)
refs https://github.com/TryGhost/Team/issues/2769

Needs some extra styling and design, this is only a minimal version
behind the feature flag.
2023-03-20 14:30:42 +01:00

225 lines
15 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
<title>{{post.title}}</title>
{{>styles}}
</head>
<body>
<span class="preheader">{{preheader}}</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" width="100%">
<!-- Outlook doesn't respect max-width so we need an extra centered table -->
<!--[if mso]>
<tr>
<td>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<![endif]-->
<tr>
<td>&nbsp;</td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
{{#if headerImage}}
<tr class="header-image-row">
<td class="header-image" width="100%" align="center">
<img
src="{{headerImage}}"
{{#if headerImageWidth}}
width="{{headerImageWidth}}"
{{/if}}
>
</td>
</tr>
{{/if}}
{{#if (or showHeaderIcon showHeaderTitle showHeaderName) }}
<tr>
<td class="{{#if (and newsletter.showPostTitleSection showHeaderTitle) }}site-info-bordered{{else}}site-info{{/if}}" width="100%" align="center">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
{{#if (and showHeaderIcon site.iconUrl) }}
<tr>
<td class="site-icon"><a href="{{site.url}}"><img src="{{site.iconUrl}}" alt="{{site.title}}" border="0"></a></td>
</tr>
{{/if}}
{{#if showHeaderTitle }}
<tr>
<td class="site-url {{#unless showHeaderName}}site-url-bottom-padding{{/unless}}"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-title">{{site.title}}</a></div></td>
</tr>
{{/if}}
{{#if (and showHeaderName showHeaderTitle) }}
<tr>
<td class="site-url site-url-bottom-padding"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-subtitle">{{newsletter.name}}</a></div></td>
</tr>
{{/if}}
{{#if (and showHeaderName (not showHeaderTitle)) }}
<tr>
<td class="site-url site-url-bottom-padding"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-title">{{newsletter.name}}</a></div></td>
</tr>
{{/if}}
</table>
</td>
</tr>
{{/if}}
{{#if newsletter.showPostTitleSection}}
<tr>
<td class="{{classes.title}}">
<a href="{{post.url}}" class="{{classes.titleLink}}">{{post.title}}</a>
</td>
</tr>
<tr>
<td>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 48px;">
<tr>
<td class="{{classes.meta}} author-date" align="left">
By {{post.authors}} • <span class="post-meta-date">{{post.publishedAt}} </span>
{{#if newsletter.showCommentCta}}
<a href="{{post.commentUrl}}" class="comment-link" valign="middle">
• <img src="https://static.ghost.org/v5.0.0/images/comment-icon.png" border="0" width="16" height="16" alt="Comment">
</a>
{{/if}}
</td>
<td class="{{classes.meta}} view-online" align="right">
<a href="{{post.url}}" class="view-online-link">View in browser</a>
</td>
</tr>
</table>
</td>
</tr>
{{/if}}
{{#if showFeatureImage }}
<tr class="feature-image-row">
<td class="feature-image
{{#if post.feature_image_caption }}
feature-image-with-caption
{{/if}}
"><img
src="{{post.feature_image}}"
{{#if post.feature_image_width }}
width="{{post.feature_image_width}}"
{{/if}}
{{#if post.feature_image_alt }}
alt="{{post.feature_image_alt}}"
{{/if}}
></td>
</tr>
{{#if post.feature_image_caption }}
<tr>
<td class="feature-image-caption" align="center">{{{post.feature_image_caption}}}</td>
</tr>
{{/if}}
{{/if}}
<tr class="post-content-row">
<td class="{{classes.body}}">
<!-- POST CONTENT START -->
{{{html}}}
<!-- POST CONTENT END -->
{{#if paywall}}
{{>paywall}}
{{/if}}
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
{{#if (or feedbackButtons newsletter.showCommentCta) }}
<tr>
<td dir="ltr" width="100%" style="background-color: #ffffff; text-align: center; padding: 32px 4px 24px;" align="center">
<table class="feedback-buttons" role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
{{#if feedbackButtons }}
{{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this.png" width="145" height="36" }}
{{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this.png" width="142" height="36" }}
{{/if}}
{{#if newsletter.showCommentCta}}
{{> feedbackButton href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment.png" width="122" height="36" }}
{{/if}}
</tr>
</table>
<table class="feedback-buttons-mobile" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
{{#if feedbackButtons }}
{{> feedbackButtonMobile feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this-mobile.png" width="42" height="42" }}
{{> feedbackButtonMobile feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this-mobile.png" width="42" height="42" }}
{{/if}}
{{#if newsletter.showCommentCta}}
{{> feedbackButtonMobile href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment-mobile.png" width="42" height="42" }}
{{/if}}
</tr>
</table>
</td>
</tr>
{{/if}}
{{#if latestPosts.length}}
<tr>
<td>
{{> latestPosts}}
</td>
</tr>
{{/if}}
{{#if newsletter.showSubscriptionDetails}}
<tr>
<td>
<h3>Subscription details</h3>
<p>You are receiving this because you are a <strong data-gh-segment="status:-free">paid</strong><strong data-gh-segment="status:free">free</strong> subscriber to <span>{{site.title}}</span>.</p>
<p>Name: %%{name}%%</p>
<p>Email: %%{email}%%</p>
<p>Member since: %%{created_at}%%</p>
<p data-gh-segment="status:-free">Renewal date: todo</p>
</td>
</tr>
{{/if}}
<tr>
<td class="wrapper" align="center">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-top: 1px solid #e5eff5; padding-top: 40px; padding-bottom: 30px;">
{{#if footerContent }}
<tr><td class="footer">{{{footerContent}}}</td></tr>
{{/if}}
<tr>
<td class="footer">{{site.title}} &copy; {{year}} <a href="%%{unsubscribe_url}%%">Unsubscribe</a></td>
</tr>
{{#if showBadge }}
<tr>
<td class="footer-powered"><a href="https://ghost.org/"><img src="https://static.ghost.org/v4.0.0/images/powered.png" border="0" width="142" height="30" class="gh-powered" alt="Powered by Ghost"></a></td>
</tr>
{{/if}}
</table>
</td>
</tr>
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td>&nbsp;</td>
</tr>
<!--[if mso]>
</table>
</center>
</td>
</tr>
<![endif]-->
</table>
</body>
</html>