在电子邮件中处理内容图像

假设您正在使用 RSS 到电子邮件服务。它们非常有用。许多人喜欢通过电子邮件订阅内容。您有一个 CMS，它可以从您创建的内容生成 RSS。RSS 到电子邮件服务可以监视新的条目，将这些新条目格式化为电子邮件，并将其发送给订阅者列表。 MailChimp 和 Campaign Monitor 都提供此服务，我相信它们并非唯一提供此服务的公司。

但是，您如何在这些电子邮件生成条目中处理图像？实际上，这可能有点棘手，因为网站上有效的图像 HTML 在电子邮件中可能不太好。

这是一个例子。您写了一篇博文，这篇博文的发布结果如下

<p>Blah blah blah. Blog post about ponies. Here's a cool and hip pony:</p>

<img src="//cdn.ponies.what/pony.jpg" width="1200" height="800">

<p>Isn't that the best pony of all?</p>

注意 width 和 height 属性。这并不完全不常见。如果您使用媒体上传器，WordPress 会默认自动添加它们。

即使您删除它们，pony.jpg 文件仍然是 1200x800px 大小，并且会以这种方式呈现。在网络上，就布局而言，这没什么大不了，因为我们有 CSS。我们可以做经典的

article img {
  max-width: 100%;
  height: auto;
}

以确保图像不会超出其所在的容器的边界，或者拉伸得比适当的宽度更宽。图像的这种大小是合理的。这将是 600px 宽列中内容图像的 @2x 版本，有时需要这样做才能使光栅图像看起来漂亮且清晰。

我们甚至可以采用 响应式图像技术，同时利用 JavaScript 和 CSS。这也是您可能想做的明智和合理的事情。

但我们在电子邮件中无法使用 CSS 或 JavaScript。因此，1200x800px 的图像将在电子邮件布局中以 1200x800px 的大小呈现。这很糟糕。即使在桌面电脑上，这也令人讨厌地宽，会影响舒适地阅读电子邮件，因为它会导致水平滚动。

我过去使用 FeedBurner 为此网站提供电子邮件订阅，这就是人们会收到的内容。

这不是 FeedBurner 独有的问题。我最近切换到 MailChimp 来提供此服务。这不是他们的“错”，但巨大的图像也会破坏他们的电子邮件布局。这是一个经典的示例，您可以在 Gmail 中点击“在下方显示图像”以显示图像，但这样做会导致布局略微被破坏

因此，我们需要在 HTML 级别解决此问题。

更改 HTML

我们需要

1. 如果 <img> 具有 width/height 属性，则将其删除
2. 添加一个新的 width 属性，并使用一个友好的值

因此这些

<img src="image.jpg" width="1200" height="800">

<img src="image.png" alt="image">

将变为

<img src="image.jpg" width="320">

<img src="image.png" width="320" alt="image">

计划很简单，但您实际如何操作呢？

一种方法是在内容中首先在 <img> 上放置电子邮件友好的 with 属性，并在需要时允许图像使用 CSS 在您的网站上更大。

另一种方法是创建一个特殊的提要，它会解析内容并根据需要更改 <img> 上的属性。我喜欢这种方式，因为它为您提供了一个地方，可以进行专门针对电子邮件的更改。

在 WordPress 中解决问题

Russell Heimlich 在这个 论坛主题中帮助了我。感谢 Russell！

您需要在 WordPress 中创建一个新的 RSS 提要，专门用于此。幸运的是，WordPress 使这变得很容易，可以使用 add_feed()。对于您的 functions.php 文件或自定义插件

function css_tricks_custom_feeds() {
  add_feed('email', 'get_me_the_email_feed_template');
}
add_action('init', 'css_tricks_custom_feeds');

email 字符串使用 slug email 创建一个新的提要，因此现在有一个新的提要 URL 位于

https://css-tricks.cn/feed/email/

get_me_the_email_feed_template 字符串引用了一个回调函数

function get_me_the_email_feed_template() {
  add_filter('the_content_feed', 'css_tricks_super_awesome_feed_image_magic');
  include(ABSPATH . '/wp-includes/feed-rss2.php' );
}

它引用了一个过滤器函数。此过滤器函数负责神奇地更改帖子中的 HTML。

function css_tricks_super_awesome_feed_image_magic($content) {
  // Weirdness we need to add to strip the doctype with later.
  $content = '<div>' . $content . '</div>';
  $doc = new DOMDocument();
  $doc->LoadHTML($content);
  $images = $doc->getElementsByTagName('img');
  foreach ($images as $image) {
    $image->removeAttribute('height');
    $image->setAttribute('width', '320');
  }
  // Strip weird DOCTYPE that DOMDocument() adds in
  $content = substr($doc->saveXML($doc->getElementsByTagName('div')->item(0)), 5, -6);
  return $content;
}

这对我来说真的感觉很神奇。我不知道 PHP 具有原生功能，可以像 DOM 一样查询 HTML 块，并调整属性等，就像 JavaScript 可以做的那样。但它确实可以。显示我知道什么。

请注意，如果您插入到 RSS 条目中的图像来自类似于 the_post_thumbnail（WordPress 中的“特色图像”）功能，那么您已经在做一些特殊的事情来将其放入提要中，因此您将使用 the_post_thumbnail('medium'); 而不是 the_post_thumbnail('large'); 或其他任何内容。

使用新的提要

现在此新的提要已存在，您可以将 RSS 到电子邮件服务指向它。对于 CSS-Tricks，我使用的是 MailChimp，它会读取该提要

MailChimp 还会尽其所能，通过电子邮件中的媒体查询，使模板在小屏幕上友好

它可以工作！

我应该说，它在 支持媒体查询 的移动电子邮件客户端中有效。这不支持 iOS 或 Android 上的 GMail 应用，这很不幸。

移动优先？

鉴于电子邮件经常在小屏幕设备上阅读，因此很有诱惑力让电子邮件模板在小屏幕上具有良好的宽度，并且只在大型屏幕上拉伸它。如果您使用的是固定宽度，即使您使用媒体查询进行调整，不支持的浏览器也会遇到问题

我和 Fabio Carneiro，MailChimp 的电子邮件大师，谈了一些关于移动优先电子邮件的想法，这些电子邮件适用于不支持媒体查询的应用程序。

当我们可以开始使用它时，我会更新它。我还想尝试在图像上设置 width="100%"，以便它们只适合容器，而不是我现在使用的 width="320"。我只是有点害怕 100% 仍然会拉伸容器，而 320 肯定会不拉伸。需要更多测试。

我对基于 <table> 的设计取得了一些成功，该设计没有固定宽度，只有最大值和最小值……

<!-- main content-wrapping table -->
<table style="min-width: 320px; max-width: 600px;">

</table>

但我不能百分百保证它。