前言介紹
- 這款 WordPress 外掛「Picturefill.WP」是 2013-04-16 上架。
- 目前有 60 個安裝啟用數。
- 上一次更新是 2014-08-03，距離現在已有 3926 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 3.2 以上版本才可以安裝。
- 有 7 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
images | retina | picturefill | retina images | responsive images |
內容簡介
注意：這是 Picturefill.js 1.2.x 版本的實作。如果要使用 Picturefill.js 2.x 版本的實作，請參閱 GitHub 存儲庫的主分支。
Picturefill.WP 是一個簡單且不需要選項的外掛，用於在 WordPress 網站上為 HDPI 和響應式圖像提供服務。
此外掛會解析文章和頁面內容，以特殊的語法替換圖像，這與 HTML5 的 picture 元素提案語法相似，然後使用修改版的 picturefill.js 載入適當的圖像至瀏覽器。
安裝前的考慮事項
啟用時載入緩慢
在啟用 Picturefill.WP 後首次加載頁面或文章時，需要為文章或頁面內容中的圖像創建新的 @2x 大小的圖像。這可能需要幾秒鐘，對於圖像較重的文章需要更長時間。一旦創建了這些圖像，文章加載速度應該與或快於沒有外掛時的速度。
如果您要在圖像較重的大型網站上安裝 Picturefill.WP，您可能需要考慮使用其他外掛，例如 Regenerate Thumbnails，為現有文章和頁面建立新的圖像大小。
500 或 504 服務器錯誤
這些錯誤與上述載入緩慢有關。如果服務器在處理新圖像之前達到了超時限制，則會返回 500 或 504 錯誤。刷新頁面通常會給服務器足夠的時間來完成圖像處理。對於一些圖像較重的文章，可能需要多次刷新。
圖像大小
按照預設，WordPress 會為每個上傳的圖像創建多達 3 種不同大小的圖像（" large"、"medium" 和 "thumbnail"），此外還有 " full" 圖像大小。
此外掛會根據圖像的寬度添加響應斷點。除非瀏覽器寬度小於圖像寬度 + 20px，否則會顯示最大可用的圖像。為了最有效地使用此外掛，請將預設的圖像大小（"large"、"medium" 和 "thumbnail"）設置為反映您的主題設計中有用的斷點。
錯誤和警告
自版本 1.3.3 開始，Picturefill.WP 禁止在解析 DOM 過程中出現的錯誤和警告。現在可以使用 picturefill_wp_syntax_present_libxml_errors 和 picturefill_wp_get_images_libxml_errors 過濾器收集錯誤和警告。
add_filter('picturefill_wp_get_images_libxml_errors', 'handle_errors');
function handle_errors($errors){
foreach($errors as $error){
// Handle errors here.
}
}
主題 CSS
如 "詳細資訊" 部分所述，picturefill.js 語法使用嵌套的 span 元素。如果主題的 CSS 對未綁定類別的 span 元素應用樣式，啟用 Picturefill.WP 後可能會顯示一些意外的 span。如果可能的話，最好從主題文件中刪除有問題的代碼，但是將以下代碼添加到主題 CSS 文件的底部也可以重置這些樣式。
span[data-picture]{display:inline;margin:0;padding:0;border:0;}
span[data-picture] span{display:inline;margin:0;padd
原文外掛簡介
Note: This is an implementation of Picturefill.js version 1.2.x. For an implementation of Picturefill.js 2.x, see the master branch of the GitHub repository.
Picturefill.WP is a simple and option-less plugin to serve HDPI and responsive images on a WordPress website.
This plugin parses post and page content replacing images with a special syntax similar to the proposed syntax for the HTML5 picture element, then uses an adapted version of picturefill.js to load the appropriate image to the browser.
Considerations before installing
Slow Loading on Activation
The first time a page or post is loaded after activating Picturefill.WP, new @2x size images will need to be created for the images in the post or page content. This can take several seconds and will take longer on image heavy posts. Once these images are created, posts should load at least as fast or faster than they do without the plugin.
If you are installing Picturefill.WP on a large and image heavy site, you may want to consider using another plugin like Regenerate Thumbnails to create the new image sizes for existing posts and pages.
500 or 504 server errors
These errors are related to the slow loading listed above. If the server reaches its timeout limit before it is finished processing new images, it will return a 500 or 504 error. Refreshing the page usually gives the server the time it needs to finish processing the images. On some image-heavy posts, it may take more than one refresh.
Image Sizes
By default, WordPress creates as many as 3 images of different sizes for each uploaded image (“large”, “medium”, and “thumbnail”), in addition to the “full” image size.
This plugin adds responsive breakpoints based on the width of the image. The largest available image will display unless the browser width is less than the image width + 20px, in which case the next size down is displayed.
To use this plugin most effectively, set the default image sizes (“large”, “medium”, and “thumbnail”) to reflect useful breakpoints in your theme design.
Errors and Warnings
As of version 1.3.3 Picturefill.WP suppresses errors and warnings in parsing the DOM. Errors and warnings can now be collected via the picturefill_wp_syntax_present_libxml_errors and picturefill_wp_get_images_libxml_errors filters.
add_filter('picturefill_wp_get_images_libxml_errors', 'handle_errors');
function handle_errors($errors){
foreach($errors as $error){
// Handle errors here.
}
}
Theme CSS
As described in the Details section, the picturefill.js syntax uses nested span elements. If a theme’s CSS applies styles to un-classed span elements, you may notice some of these spans showing up unexpectedly on the page after activating Picturefill.WP. If possible, it is best to remove the offending code from your theme files, but adding the flowing to the bottom of your theme’s CSS file should also work to reset these styles.
span[data-picture]{display:inline;margin:0;padding:0;border:0;}
span[data-picture] span{display:inline;margin:0;padding:0;border:0;}
Caching
To improve performance, especially in image heavy posts, Picturefill.WP uses transient caching. The cache will be refreshed automatically every time a post is updated or Picturefill.WP is updated. The cache can be manually refreshed by deactivating and reactivating Picturefill.WP from the plugins menu.
If you suspect that Picturefill.WP’s caching is causing trouble with another plugin or theme feature, first try deactivating and reactivating Picturefill.WP. If problems persist, try lowering the priority for Picturefill.WP to be executed by adding the following to your functions.php file:
remove_filter('the_content', array(Picturefill_WP::get_instance(), 'apply_picturefill_wp_to_the_content'), 11);
add_filter('the_content', array(Picturefill_WP::get_instance(), 'cache_picturefill_output'), 9999);
If you still encounter problems with other plugins or theme features, you may want to disable caching all together. See the subsection on how to disable caching under the “Extending Picturefill.WP” section of the GitHub repository.
Details
Picturefill.WP looks through the_content to find elements like this:
then replaces them with something like this (visit the GitHub repository for a breakdown of the syntax):
The adapted version of picturefill.js then looks for the last data-src listed where the associated data-media matches the device and browser, and loads the appropriate image inside the matched element.
Extending Picturefill.WP
See the Extending Picturefill.WP subsection of the GitHub repository for a list of plugin hooks and examples.
Advanced Use
Markup Tricks
Limit Responsiveness
The responsiveness of an image can be limited by adding the class min-size-{image size}. For example, an image with the class min-size-medium will not load an image smaller than size medium.
Skip Images
To skip images and load them normally add the attribute data-picturefill-wp-ignore to the tag.
Helper Functions
See the helper functions section of the documentation on GitHub.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Picturefill.WP」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0 | 1.1 | 1.1.1 | 1.1.2 | 1.1.3 | 1.2.0 | 1.2.1 | 1.2.2 | 1.2.3 | 1.2.4 | 1.2.5 | 1.2.6 | 1.3.0 | 1.3.1 | 1.3.2 | 1.3.3 | 1.3.4 | 1.3.5 | trunk |
延伸相關外掛（你可能也想知道）
RICG Responsive Images 》這個 WordPress 外掛可以自動提供預設的響應式圖片。, 此外掛會在上傳每個圖片時包含所有可用的圖片尺寸。每當 WordPress 透過媒體上傳器輸出圖片或是產生特...。
Picturefill fix for WooCommerce 》如果您喜歡 WooCommerce 和 WP Retina 2x，並且使用建議的 retina 圖片方法 picturefill 在可變產品頁面遇到問題。當選擇帶有圖像的變量時，它應該替換顯示的...。