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 內容中的自定義語法