Added feature image caption and alt to labs email template

no issue

- when feature image redesign flag is enabled add the caption under the feature image when available
- adds extra class for feature image so spacing can be adjusted when the caption is present
This commit is contained in:
Kevin Ansfield 2021-06-18 16:03:58 +01:00
parent 22306c4b19
commit ca5c58030b
3 changed files with 26 additions and 2 deletions

View File

@ -36,6 +36,10 @@ module.exports.getAll = () => {
return labs;
};
/**
* @param {string} flag
* @returns {boolean}
*/
module.exports.isSet = function isSet(flag) {
const labsConfig = module.exports.getAll();

View File

@ -4,6 +4,7 @@ const template = require('./template');
const labsTemplate = require('./template-labs');
const config = require('../../../shared/config');
const settingsCache = require('../../services/settings/cache');
const labs = require('../../services/labs');
const urlUtils = require('../../../shared/url-utils');
const moment = require('moment-timezone');
const cheerio = require('cheerio');
@ -144,7 +145,8 @@ const getLabsTemplateSettings = async () => {
bodyFontCategory: settingsCache.get('newsletter_body_font_category'),
showBadge: settingsCache.get('newsletter_show_badge'),
footerContent: settingsCache.get('newsletter_footer_content'),
accentColor: settingsCache.get('accent_color')
accentColor: settingsCache.get('accent_color'),
labsFeatureImageMeta: labs.isSet('featureImageMeta')
};
if (templateSettings.headerImage) {

View File

@ -2,6 +2,7 @@
const iff = (cond, yes, no) => (cond ? yes : no);
module.exports = ({post, site, templateSettings}) => {
const date = new Date();
const hasFeatureImageCaption = templateSettings.labsFeatureImageMeta && templateSettings.showFeatureImage && post.feature_image && post.feature_image_caption;
return `<!doctype html>
<html>
@ -352,6 +353,18 @@ figure blockquote p {
width: 100%;
}
.feature-image-with-caption {
padding-bottom: 10px;
}
.feature-image-caption {
width: 100%;
padding-bottom: 30px;
text-align: center;
font-size: 13px;
color: #738a94;
}
.post-content {
max-width: 600px !important;
font-family: Georgia, serif;
@ -940,7 +953,12 @@ ${ templateSettings.showBadge ? `
</tr>
${ templateSettings.showFeatureImage && post.feature_image ? `
<tr>
<td class="feature-image"><img src="${post.feature_image}"${post.feature_image_width ? ` width="${post.feature_image_width}"` : ''}></td>
<td class="feature-image ${hasFeatureImageCaption ? 'feature-image-with-caption' : ''}"><img src="${post.feature_image}"${post.feature_image_width ? ` width="${post.feature_image_width}"` : ''} alt="${post.feature_image_alt}"></td>
</tr>
` : ``}
${ hasFeatureImageCaption ? `
<tr>
<td class="feature-image-caption" align="center">${post.feature_image_caption}</td>
</tr>
` : ``}
<tr>