Email template issues #11756
Comments
|
I was just rooting around in Discourse and, by coincidence, found this right before the closing body tag of their email template: Have not researched so far, so I don't know if it's related or relevant. Also https://css-tricks.com/override-gmail-mobile-optimized-email/ |
refs TryGhost/Ghost#11756 - we'd like to render fallbacks for embed cards in constrained environments such as emails where the `html` contents may not be suitable - oembed gives us data to be able to create fallbacks this such as a `thumbnail_url`, author information, and sizing but we were not storing it - this change removes the `html` and `type` data from the response object as the existing top-level payload properties then stores the remainder of the response under a `metadata` property
|
As of next Ghost release video embeds will render a thumbnail with a play button overlay in emails, the whole thumbnail is a link to the original video url. Note that this will only work for newly created embed cards, unfortunately we weren't storing thumbnail data alongside old embed cards. |
refs TryGhost/Ghost#11756 - Outlook versions that use the Word rendering engine do not support background images - added VML markup for video fallbacks and used conditional comments and `mso-hide: all` styles so that only the VML version is seen in Outlook while the table version is seen in all other clients
refs #11756 - updates `@tryghost/kg-default-cards` which includes a VML version of video embed card fallbacks - fixes play button styling for Yahoo Mail - adds a minimum height to video embeds so they appear more reasonable when images are not loaded
…le apps refs #11756 - fixed gmail scaling problems - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive - removed attribute selectors in the media query CSS - gmail does not support attribute selectors - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case - tested using litmus.com for all popular email clients
refs TryGhost/Ghost#11756 - gmail mobile web was stripping standalone `background-size: cover` so moved it to a shorthand `background` style - gmail mobile web was stripping `visibility: hidden` and `opacity: 0` from the opaque spacer image so switched provider to get a transparent png (transparent gifs were not loaded by gmail) - gmail mobile app was adjusting font-size and applying a height to the player button when the ` ` was present which broke the play button styling
refs #11756 - bumped kg-default-cards package to generate fixed html for video embed fallbacks
refs #11756 - we removed the fixed `width: 600px` to fix gmail scaling but that means we need a new way of creating a 600px centre column in Outlook
|
With the Gmail scaling / font-resizing fix I can't reproduce the bookmark spacing issues so I'm marking it as done and closing. We can revisit with more specific issues if/when we have further reports 🙂 |
|
@kevinansfield
In the image, "Ghost" is the author, and "Test Page" is the publisher. I tried overriding the CSS classes |
|
@aamatte please open new issues rather than commenting on closed ones |
There are several issues with our email templates at the moment:
Mobile font size
Occasionally font size is significantly reduced on mobile devices. It does not appear to matter what size of device, but it does appear to be specific to Apple Mail, or native iOS apps which use the Apple Mail ... mail renderer(?) - screenshots below are of FrontApp, on an iPhone 11 Pro Max
Bookmark cards
There seem to be some spacing issues around bookmark cards, FrontApp, Macbook Pro
Video embeds
Currently video embeds don't degrade at all for email, they just break / don't show up. It would be good if, at least, they could degrade to a bookmark card.
TODO:
The text was updated successfully, but these errors were encountered: