[WordPress] 外掛分享： Picture Element Responsive and Retina Images

前言介紹

  • 這款 WordPress 外掛「Picture Element Responsive and Retina Images」是 2017-02-20 上架。
  • 目前有 10 個安裝啟用數。
  • 上一次更新是 2017-02-23，距離現在已有 2992 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 4.0.0 以上版本才可以安裝。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

christhewanderer |

外掛標籤

picture | retina images | responsive images |

內容簡介

WordPress已經將srcset功能加入核心，這是好事，但這個外掛程式更進一步幫助主題開發人員使用picture元素，並回退到標準的圖像標籤和srcset。

此外，該外掛還支持即時圖像生成外掛。實際上，將其與即時圖像生成外掛一起使用是極其鼓勵的，否則該外掛會使圖像上傳速度變慢。

它還支援視網膜屏幕的2x和3x圖像，因此您可以為訪問者提供最佳的圖像。

定義圖像大小

首先，您需要像add_image_size一樣定義圖像大小。這個特定函數是可選的，但建議使用它，因為它還為視網膜創建了2x和3x圖像。
例如： add_image_size_for_picture('mobile_images', 320, 0, true);

在模板中使用圖像

一旦定義了您的大小，您可以像這樣在模板中調用它們：

generate_picture($some_attachment_id, [
'mobile_images' => '(max-width: 320px)'
], [
'class' => 'some-class-name',
'data-item' => 1
]);

第二個參數陣列是格式為image size name : media query，因此您可以指定所需的多個響應式尺寸。
第三個參數允許您向source / img標籤添加屬性。

與即時圖像生成外掛整合

將上傳大小添加到WordPress並使圖像上傳顯著變慢，因為我們會為每個大小生成三倍的圖像。如果您使用CPU核心較少的服務器，這可能會導致上傳超時。

要解決這個問題，建議使用一個插件來獨立創建這些圖像，而不會影響用戶。為此，我們為您提供了三個過濾器，讓您可以更改底層調用的函數。

responsive_retina_images_add_size_function是添加新大小時的調用函數，默認情況下它會調用`add_image_size`
'responsive_retina_images_source_function是從數據庫中拉取圖像時的調用函數，默認情況下它會調用`wp_get_attachment_image_src`
responsive_retina_images_source_function_index是訪問從`responsive_retina_images_source_function`返回的URL的索引，默認情況下為0

例如，如果您要與Fly Dynamic Image Resizer整合，可以在functions.php中添加以下內容。

add_filter('responsive_retina_images_add_size_function', function() { return 'fly_add_image_size'; });
add_filter('responsive_retina_images_source_function', function() { return 'fly_get_attachment_image_src'; });
add_filter('responsive_retina_images_source_function_index', function() { return 'src'; });

原文外掛簡介

WordPress has introduced the srcset feature into core which is great but this plugin goes a step further to help theme developers use the picture element with a fallback to a standard image tag and srcset.
This plugin also offers support for on the fly image generation plugins. In fact it’s hugely encouraged to use one as this plugin can cause image uploads to slow down otherwise.
It also offers support for 2x and 3x images for retina screens so you can serve the best image possible for your visitors.
Define image sizes
First you need to define your image sizes, similar to add_image_size. This particular function is optional but recommended because it also creates 2x and 3x images for retina.
E.G. add_image_size_for_picture('mobile_images', 320, 0, true);
Using images in your template
Once your sizes are defined you can call them in your template like so:
generate_picture($some_attachment_id, [
'mobile_images' => '(max-width: 320px)'
], [
'class' => 'some-class-name',
'data-item' => 1
]);

The second argument array is in the format of image size name : media query that way you can specify as many different responsive sizes as you need to.
The third argument allows you to add attributes to the source/img tag.
Integrating with on the fly image generation plugins
Adding upload sizes to wordpress and slow down the image upload significantly as we generate three times as many images that you add a size for. This can cause the upload to time out if you are using a server with a low amount of cpu cores.
To solve this we recommend using a plugin that will create these images independent of the upload and not affect users. For this purpose we have three filters available for you to change the functions we call underneath the hood.
responsive_retina_images_add_size_function is the function to call when adding a new size, by default this calls `add_image_size`
'responsive_retina_images_source_function is the function to call when pulling the image from the database, by default this calls `wp_get_attachment_image_src`
responsive_retina_images_source_function_index is the index at which to access the url returned from `responsive_retina_images_source_function`, by default this is `0`

For example if you were to integrate with Fly Dynamic Image Resizer you could add the following to your functions.php.
add_filter('responsive_retina_images_add_size_function', function() { return 'fly_add_image_size'; });
add_filter('responsive_retina_images_source_function', function() { return 'fly_get_attachment_image_src'; });
add_filter('responsive_retina_images_source_function_index', function() { return 'src'; });

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Picture Element Responsive and Retina Images」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

最新版本

延伸相關外掛（你可能也想知道）

  • Adaptive Images for WordPress 》Adaptive Images, 透明地調整和優化傳輸到行動設備的圖像，大幅減少總下載時間。該插件作為 WordPress 網站和設備之間的過濾器，向設備提供較小的圖像。, 請...。
  • RICG Responsive Images 》這個 WordPress 外掛可以自動提供預設的響應式圖片。, 此外掛會在上傳每個圖片時包含所有可用的圖片尺寸。每當 WordPress 透過媒體上傳器輸出圖片或是產生特...。
  • Disable Responsive Images Complete 》這個外掛程式完全停用了 WordPress 4.4 版本中引入的 WP 響應式圖片功能。它適用於那些知道自己在做什麼，並想使用自己的響應式圖片技術的使用者。, 功能:, ,...。
  • Responsify WP 》Responsify WP 是關心響應式圖片的 WordPress 外掛程式。, 功能, , 使用帶有 srcset/sizes 屬性的 img 標籤。, ... 或者是 picture 元素。, 支援使用或不使用...。
  • Responsive Image Sizes Divi 》使用圖片 srcset 在 Divi 主題中讓你的網站更快加載。, 問題 – Divi 網頁上的圖片僅顯示單一大小的圖片，而不管裝置大小, 你的 Divi 網頁速度緩慢嗎？, 對裝...。
  • Force HTTPS srcset 》「Responsive Image」自WordPress 4.4開始使用，但當您從「https」訪問時，它的URL有時會是「http」而非「https」。, 本外掛會強制使用「https」的srcset，當...。
  • Simple Responsive Images 》這個外掛可以在你的內容中生成帶有反應式圖像屬性的圖像。, 選擇斷點和相關尺寸。, 你插入的下一個圖像和使用 wp_attachement 函數生成的元素將使用正確的屬...。
  • Responsive Divi Backgrounds 》「Responsive Divi Backgrounds」能夠讓你最佳化網站的圖片呈現。此外掛僅能與「Divi Builder」(屬於 Divi 主題)一同使用。不需要任何配置。。
  • PB Responsive Images 》PB Responsive Images 外掛會自動將文章內容中的所有圖片重新格式化為與 Responsive Images Community Group 在 w3.org 上提出的 picture 標籤類似的格式。, ...。
  • SrcSet Responsive Images for WordPress 》SrcSet 可為 WordPress 提供回應式圖像，讓您可以將 SrcSet 群組指定給 WordPress 內的圖像大小 (例如，中等或大型)。任何使用該圖像大小的文章或頁面中的圖...。
  • Picturefill.WP 》注意：這是 Picturefill.js 1.2.x 版本的實作。如果要使用 Picturefill.js 2.x 版本的實作，請參閱 GitHub 存儲庫的主分支。, Picturefill.WP 是一個簡單且不...。
  • Post Script Responsive Images 》簡而言之，這個外掛程式修改了 "the_content()" 和文章縮略圖功能，通過重新渲染圖片並使用SRCSET屬性，實現在內容區域本身進行圖片自適應調整大小。其他外掛...。
  • HootProof SSL Broken Images Fix 》在以下網址中提供另一種解決方法 (僅限德文)：https://hootproof.de/wissensdatenbank/wordpress-4-4-fehlende-bilder/, 翻譯, , 英文：預設, 。
  • BC Responsive Images 》BC Responsive Images 是一個 WordPress shortcode 外掛程式，讓編輯和開發人員能夠透過 WP 編輯器和模板檔案來自動產生和管理Responsive Images。, 最初由聯...。
  • Disable Auto-Sizes 》總結：「Disable Auto-Sizes」外掛阻止 WordPress 在圖片的大小屬性中添加自動關鍵字 auto，確保完全控制大小屬性，對於進階自定義或除錯非常有用。, , HTML ...。

文章
Filter
Apply Filters
Close
Mastodon