ref DES-571
- padding does not work well with paragraph inside blockquote as
horizontal spacing on Outlook
- using margin instead of padding makes sure the spacing is consistent
across Outlook versions
ref DES-571
- iOS Mail app ignores spacing on the \<blockquote\> element, but will
respect spacing on the \<p\> element inside it
- for that reason, we started to enforce always rendering \<p\> inside
\<blockquote\> for emails
- these changes move the spacing related styles from blockquote to p
inside
DES-459
The font size of subtitles/excerpts in newsletters was similar to the
body font size which doesn't reflect the content hierarchy
appropriately. Also, the spacing should be adjusted to represent that
the title and the subtitle belong together.
Fixes
https://linear.app/tryghost/issue/DES-4/image-caption-size-in-email-newsletter.
There were no styles defined for captions for cards beyond the featured
image (bookmark, gallery, video), and we had no way of targeting those
captions with CSS. They are now wrapped in a div with a specific class,
which allows for more selective styling, and are styled similarly to the
caption of the featured image.
ref DES-347
- adjusted title and excerpt length of latest posts in emails
- as the layout is same (horizontal) on both desktop and mobile, truncateHtml() needed some update
- now maxLength is expected to be larger than maxLengthMobile, because the mobile layout isn't stacked anymore
- some spacing adjustment has been made as well
no issue
We've settled on using "excerpt" naming in place of "subtitle" to better reflect the underlying property name and tie in with themes and historical usage.
- added migration to rename the `show_subtitle` newsletter setting to `show_excerpt`
- renamed all places in the codebase that referenced subtitle
MOM-190
MOM-192
- The subtitle style (serif/sans) was tied to the body style which was
misleading. It makes more sense to connect it to the title style both
from the UX and the output POV.
- Newsletter design preview was not updated according to subtitle
styles.
---------
Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
closes https://linear.app/tryghost/issue/MOM-194
- whilst working on the feature our naming changed from "Subhead" to "Subtitle"
- this rename of the newsletter design setting column brings naming back into a consistent state before public release
closes https://linear.app/tryghost/issue/MOM-173
- updated email renderer to add `post.customExcerpt` data
- updated template to skip rendering subtitle when no custom excerpt is present
- updated template to use actual custom excerpt
REF MOM-147
- Updated newsletter preview in settings to match the newsletter
template
- Updated spacing for a few edge-case newsletter template combinations
REF MOM-119
- Split subhead feature flag into two: editorSubtitle and
newsletterSubtitle
- Updated UI copy, feature flag names and class names from subhead to
subtitle
REF MOM-146
- These styling changes are a general newsletter template improvement,
and are also laying the groundwork for including a subhead in the
newsletter header. Both the newsletter template as well as the
newsletter preview in settings have been updated.
fixes
https://linear.app/tryghost/issue/DES-260/footer-link-text-smaller-than-regular-text
There was a bit of CSS in a media query aimed at other parts of the
newsletter template that was causing the footer styling to break. I
added some more specific styling for the footer as well, to make sure
span's within the `<p>` element are covered as well.
ref https://linear.app/tryghost/issue/TRI-65
In the context of referrals, we want to understand how useful our
“Powered by Ghost” badges are.
There are currently a few places where the “Powered by Ghost” badge can
be rendered:
- in newsletters (enabled/disabled by publisher, on a newsletter basis)
- in Portal popups, e.g. member signup/signin/account settings
- in the footer of some themes, including Source & Casper
We're adding the query param ?via to evaluate the usage of the badge in
newsletters.
refs https://github.com/TryGhost/Ghost/pull/18587/files and
https://github.com/TryGhost/Ghost/pull/17475/files
- In October 2022, `juice`, a library Ghost uses to inline CSS for email
rendering, introduced a small change that began inlining `width: auto`
and `height: auto` from CSS on image tags, resulting in `width="auto"`
and `height="auto"` attributes being added to image tags in rendered emails
(cb62062794)
- This change in `juice` broke our email rendering in Outlook, which
doesn't play well with `width="auto"` attributes. The first two attempts
to workaround this new behavior in `juice` ended up fixing the issue in
Outlook, but breaking the rendering in other clients
- This commit stores the `height` and `width` attributes of all images
_before_ inlining the CSS with `juice`, and resets them to their
original values, only if they were set to `auto`
no issue
- product card outputs the original width/height of the image in emails
which results in overflown images in Outlook
- Combined with https://github.com/TryGhost/Koenig/pull/983/files, this
change fixes rendering for product card images in Outlook
---------
Co-authored-by: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
no issues
- product card images have explicit width/height attributes, and when the width value is large (e.g. 2560), it causes an overflow on Gmail on Android
- the reason why there's no issue on other email clients is that Gmail on Android has autofit feature which makes the email width fit inside the screen automatically, and it made the email width very narrow when the product card image width isn't responsive
- this fix makes the product card image width responsive by explicitly setting it 100%
refs https://github.com/TryGhost/Product/issues/3704
- the site icon has sizes defined in CSS and it works great for most
browsers
- but it becomes very large in Outlook and it requires explicit sizes in
the image markup for some reason
refs TryGhost/Product#3609
- author and publisher styles were mixed up in mobiledoc
- made consistent for author coming after publisher for md and lexical
- updated renderer packages
