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