WordPress Retina 图像 – 用于将图像插入到 Post 内容中的自定义语法

问题描述

我正在建立一个响应式房地产 WordPress 主题的过程中，我正在弄清楚如何正确添加对 HiDPI 屏幕的支持。我决定使用一个模拟 proposed picture HTML element 功能的 JavaScript 解决方案 Picturefill 。 WordPress 可以让我们创建自定义的图像大小，并且我已经决定了对于每个图像大小 (例如在单个列表页面上列出画廊图像)，我将需要四个图像尺寸：

适用于桌面设备的常规 low-res 映像
@ 2x hi-res 图像为 HiDPI 桌面设备 (目前只有 Retina MacBook)
用于智能手机的较小的 low-res 图像 (为什么智能手机需要加载全尺寸图像？)
较小的智能手机 hi-res 图像

对于平板电脑，我决定为桌面设备提供与大小相同的图像，只是因为 tablet-specific 图像尺寸与桌面设备的尺寸没有太大差异，因此带宽增益不足以证明添加两种图像尺寸 (每个图像位置) 到 WordPress(低和 hi-res) 并且混乱上传和 DOM 。

现在，当我们处理主题自动拉伸的图像 (如缩略图，自动展示位置等) 时，一切都很好，而且由于对于 Picturefill 脚本，我需要输出四个不同的图像路径 (使用适当的媒体查询) – 我将如何处理用户手动放入帖子内容的图片？

对于那些不想了解 Picturefill 如何工作的人，这里是脚本期望的语法：

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <div data-src="small.jpg"></div>
    <div data-src="medium.jpg"     data-media="(min-width: 400px)"></div>
    <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
    <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</div>

如果您对我建议的方法有任何建议，请分享，但是我将对您如何为用户手动放入帖子内容的图像创建上述语法感兴趣。

作为一方不要，请不要建议把这样的功能放入插件，在我看来，HiDPI 图像是明确的表现特征，应该由主题处理。

此外，我知道已经存在的 Wp Retina 2x 插件，但这不是我需要的，因为我的图像不仅要 hi-res，而且响应 – 我不想强制智能手机用户下载〜 800KB 桌面 hi-res 图像。

最佳解决方法

我自己没有这样做，但是我已经把 How to insert image in Markdown syntax in WordPress 藏起来了，以示如何自定义插入图像的标记。

它使用 get_image_send_to_editor()功能中的 image_send_to_editor 滤波器。

参考文献

Retina images – custom syntax for inserting images into post content

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

WordPress Retina 图像 – 用于将图像插入到 Post 内容中的自定义语法