responsive pics
Version 1.8.3
ResponsivePics是一個 WordPress 插件，使 WordPress 主題作者能夠在響應式佈局中自動調整圖片大小* 。
*ReponsivePics 不處理 WordPress wysiwig 編輯器中的圖像，它僅對在主題中使用圖像或照片的主題作者有用。它透過媒體查詢自動處理視網膜或 hdpi 影像。
如需完整文件和範例，請造訪：responsive.pics
| 先決條件 | 如何檢查 |
|---|---|
| PHP >= 5.6.x | php -v |
| WordPress >= 3.5.x | wp core version |
| 啟用WP-Cron或設定真正的 cron 作業 | test WP-Cron |
您可以透過命令列或 WordPress 管理面板安裝此外掛程式。
如果您使用 Composer 來管理 WordPress，請將ResponsivePics新增至專案的依賴項。
composer require clarifynl/responsive-pics然後透過 wp-cli 啟動插件。
wp plugin activate responsive-pics目前，除Internet Explorer 11之外的所有現代瀏覽器都支援<picture>元素以及<img>元素上的srcset和sizes屬性。
為了在尚不支援圖片元素的瀏覽器中啟用對圖片元素和相關功能的支持，您可以使用polyfill。我們建議使用 Picturefill。
若要將Picturefill作為節點模組安裝在 WordPress 主題中，請從主題目錄執行以下指令：
npm install --save picturefill
yarn add picturefill
並將套件匯入到主題的全域 javascript 檔案： import 'picturefill';
ResponsivePics 使用以下預設變數：
| 多變的 | 類型 | 預設 | 定義 |
|---|---|---|---|
$columns | 數位 | 12 | 網格佈局使用的列數 |
$gutter | 數位 | 30 | 裝訂線寬度（以像素為單位）（網格列之間的空間） |
$breakpoints | 大批 | ['xs' => 0, 'sm' => 576, 'md' => 768, 'lg' => 992, 'xl' => 1200, 'xxl' => 1400] | ResponsivePics 將用於建立和提供圖像來源的媒體查詢斷點 |
$grid_widths | 大批 | ['xs' => 576, 'sm' => 540, 'md' => 720, 'lg' => 960, 'xl' => 1140, 'xxl' => 1320] | ResponsivePics 將用於調整影像大小的佈局的最大寬度（以像素為單位） |
$max_width_factor | 數位 | 2 | 用於調整影像來源大小和裁切影像來源高度的最大寬度係數 |
$lazyload_class | 細繩 | lazyload | 啟用lazyload時要新增到img標籤上的 css 類 |
$lqip_width | 數位 | 100 | 用於LQIP （低品質影像佔位符）的影像寬度 |
$lqip_class | 細繩 | blur-up | 啟用LQIP （低品質影像佔位符）時要新增至img標籤上的 css 類 |
$image_quality | 數位 | 90 | 調整影像大小時WP_Image_Editor中使用的影像壓縮品質百分比 |
$wp_rest_cache | 布林值 | false | 是否在 WP Rest API 回應標頭中啟用快取 |
$wp_rest_cache_duration | 數位 | 3600 | WP Rest API Cache-Control 標頭的快取持續時間 (max-age)（以秒為單位） |
預設情況下，ResponsivePics 將使用 Bootstrap 4 SCSS 變數來定義：
網格列數： $grid-columns: 12;
網格裝訂線寬度（以像素為單位）： $grid-gutter-width: 30px;
網格斷點（以像素為單位）：
$grid-breakpoints : (
xs : 0 ,
sm : 576 px ,
md : 768 px ,
lg : 992 px ,
xl : 1200 px ,
xxl : 1400 px
);以及容器的最大寬度（以像素為單位）：
$container-max-widths : (
sm : 540 px ,
md : 720 px ,
lg : 960 px ,
xl : 1140 px ,
xxl : 1320 px
);注意：ResponsivePics 將根據預設的 sm 網格斷點 (= 576px) 新增xs容器最大寬度 (= 576)。
如果您自訂了引導預設值，或者如果您使用不同的網格系統（Foundation、Materialize 等），或者即使您想要新增額外的斷點和容器寬度，您也可以將自己的網格變數傳遞到ResponsivePics庫。
將這些行加入主題的functions.php中，並確保檢查ResponsivePics類別是否存在：
/*
* Set ResponsivePics variables
*/
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setColumns ( 12 );
ResponsivePics:: setGutter ( 30 );
ResponsivePics:: setBreakPoints ([
' xs ' => 0 ,
' sm ' => 576 ,
' md ' => 768 ,
' lg ' => 992 ,
' xl ' => 1200 ,
' xxl ' => 1400 ,
' xxxl ' => 1600 ,
' xxxxl ' => 1920
]);
ResponsivePics:: setGridWidths ([
' xs ' => 576 ,
' sm ' => 768 ,
' md ' => 992 ,
' lg ' => 1200 ,
' xl ' => 1400 ,
' xxl ' => 1600 ,
' xxxl ' => 1920
]);
ResponsivePics:: setMaxWidthFactor ( 4 );
ResponsivePics:: setLazyLoadClass ( ' lozad ' );
ResponsivePics:: setLqipWidth ( 200 );
ResponsivePics:: setLqipClass ( ' blurred ' );
ResponsivePics:: setImageQuality ( 85 );
ResponsivePics:: setRestApiCache ( true );
ResponsivePics:: setRestApiCacheDuration ( 86400 );
}您可以透過執行以下輔助函數之一來檢索 ResponsivePics 中使用的任何變數：
ResponsivePics:: getColumns (); // Will return $columns
ResponsivePics:: getGutter (); // Will return $gutter
ResponsivePics:: getBreakpoints (); // Will return $breakpoints
ResponsivePics:: getGridWidths (); // Will return $grid_widths
ResponsivePics:: getMaxWidthFactor (); // Will return $max_width_factor
ResponsivePics:: getLqipWidth (); // Will return $max_width_factor
ResponsivePics:: getLazyLoadClass (); // Will return $lazyload_class
ResponsivePics:: getLqipWidth (); // Will return $lqip_width
ResponsivePics:: getLqipClass (); // Will return $lqip_class
ResponsivePics:: getImageQuality (); // Will return $image_quality
ResponsivePics:: getRestApiCache (); // Will return $wp_rest_cache
ResponsivePics:: getRestApiCacheDuration (); // Will return $wp_rest_cache_duration 若要在範本中插入響應式<img>元素，請使用get_image函數或responsive-pics/v1/image API 端點以及可用參數。
ResponsivePics:: get_image (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
| 範圍 | 類型 | 必需的 | 預設 | 定義 |
|---|---|---|---|---|
| ID | 數位 | 是的 | WordPress 圖片 ID（例如 1）。 | |
| 尺寸 | 細繩 | 是的 | 以逗號分隔的首選圖像大小字串（例如'xs-12, sm-6, md-4, lg-3' ）。有關詳細信息，請參閱尺寸部分。 | |
| 莊稼 | 數字/字串 | 選修的 | false | 所需高度的寬度裁剪因子，預設範圍為0-2 （例如0.75 ），具有（可選）裁剪位置（例如0.75|ct ）。有關更多信息，請參閱裁剪部分。 |
| 類別 | 細繩 | 選修的 | null | 要加入 img 元素的附加 CSS 類別的逗號分隔字串（例如'my_img_class'或'my_img_class, my_second_img_class' ）。 |
| 延遲載入 | 布林值/字串 | 選修的 | false | 當true啟用lazyload類別和 data-srcset 屬性時。當native啟用本機loading="lazy"屬性。有關詳細信息，請參閱延遲加載部分。 |
| 利奇普 | 布林值 | 選修的 | false | 當true時啟用LQIP類別和 src 屬性。有關詳細信息，請參閱 LQIP 部分。 |
要檢索主題中的響應式<img>數據，您可以使用get_image_data函數或responsive-pics/v1/image-data API 端點以及可用參數id 、 sizes 、 crop 、 classes 、 lazyload和lqip 。
ResponsivePics:: get_image_data (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image-data/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
這將傳回一個數組，其中包含每個斷點的可用圖像來源、替代文字、mime 類型、alpha 通道和延遲加載的布林值、lqip 圖像的 url 以及 css 類的數組。
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' lqip ' => ( string ) $ lqip ,
' classes ' => ( array ) $ classes
];若要在範本中插入響應式<picture>元素，請使用get_picture函數或responsive-pics/v1/picture API 端點以及可用參數。
ResponsivePics:: get_picture (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
| 範圍 | 類型 | 必需的 | 預設 | 定義 |
|---|---|---|---|---|
| ID | 數位 | 是的 | WordPress 圖片 ID（例如 1）。 | |
| 尺寸 | 細繩 | 是的 | 以逗號分隔的首選圖像大小字串（例如'xs-12, sm-6, md-4, lg-3' ）。有關詳細信息，請參閱尺寸部分。 | |
| 類別 | 細繩 | 選修的 | null | 要新增至圖片元素的附加 CSS 類別的逗號分隔字串（例如'my_picture_class'或'my_picture_class, my_second_picture_class' ）。 |
| 延遲載入 | 布林值/字串 | 選修的 | false | 當true啟用lazyload類別和 data-srcset 屬性時。 native啟用本機loading="lazy"屬性。有關詳細信息，請參閱延遲加載部分。 |
| 固有的 | 布林值 | 選修的 | false | 當true時啟用intrinsic類別和資料縱橫比屬性。有關詳細信息，請參閱內在縱橫比部分。 |
要檢索主題中的響應式<picture>數據，您可以使用get_picture_data函數或responsive-pics/v1/picture-data API 端點以及可用參數id 、 sizes 、 classes 、 lazyload和intrinsic 。
ResponsivePics:: get_picture_data (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture-data/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
這將傳回一個數組，其中包含每個斷點的可用圖片來源、替代文字、mime 類型、alpha 通道和內在的布林值、圖片 css 類別的數組和 img css 類別的陣列。
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' intrinsic ' => ( bool ) $ intrinsic ,
' picture_classes ' => ( array ) $ picture_classes ,
' image_classes ' => ( array ) $ image_classes
];若要在範本中插入響應式背景映像，請使用get_background函數或responsive-pics/v1/background API 端點以及可用參數。
ResponsivePics:: get_background (id, sizes, classes); GET /wp-json/responsive-pics/v1/background/<id>?sizes=<sizes>&classes=<classes>
| 範圍 | 類型 | 必需的 | 預設 | 定義 |
|---|---|---|---|---|
| ID | 數位 | 是的 | WordPress 圖片 ID（例如 1）。 | |
| 尺寸 | 細繩 | 是的 | 以逗號分隔的首選圖像大小字串（例如'xs-12, sm-6, md-4, lg-3' ）。有關詳細信息，請參閱尺寸部分。 | |
| 類別 | 細繩 | 選修的 | null | 要加入到背景元素的附加 CSS 類別的逗號分隔字串（例如'my_bg_class'或'my_bg_class, my_second_bg_class' ）。 |
要檢索主題中的響應式背景圖像數據，您可以使用get_background_data函數或responsive-pics/v1/background-data API 端點以及可用參數id 、 sizes和classes 。
ResponsivePics:: get_background_data (id, sizes, classes); GET /wp-json/responsive-pics/v1/background-data/<id>?sizes=<sizes>&classes=<classes>
這將傳回一個數組，其中包含每個斷點的可用背景圖像來源、替代文字、mime 類型、布林值（如果圖像具有 Alpha 通道）、背景 id 和背景 css 類別的數組。
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' id ' => ( string ) $ id ,
' classes ' => ( array ) $ classes
];支援以下圖像檔案格式：
| 文件格式 | MIME 類型 | 特性 |
|---|---|---|
| 太平紳士 | 圖片/jpeg | |
| 網頁 | 圖片/網頁 | 需要 WordPress 5.8 或更高版本。 |
| PNG | 圖片/png | 當 png 包含alpha 通道時，額外的'has-alpha'類別將被添加到圖片圖像元素中以用於附加樣式。 |
| 動圖 | 圖片/gif | 當 gif動畫時（它將檢查多個標題幀），不會調整圖像大小或裁剪圖像以防止丟棄動畫。 |
任何其他圖像格式都不會調整大小或裁剪。
以下語法適用於sizes參數中的每個影像尺寸：
breakpoint:width| 範圍 | 類型 | 必需的 | 預設 | 定義 |
|---|---|---|---|---|
| 斷點 | 數字或字串 | 是的 | 如果未定義，且width是數字，則斷點將與寬度相同。如果未定義，且width是列定義，則斷點將是相應的斷點（例如，如果 width 是'xs-8' ，斷點將為'xs' ）。 | |
| 寬度 | 數字或字串 | 是的 | 列定義是$grid_widths中的鍵加上破折號和列跨度編號（例如'xs-8' ）。如果列跨度編號以 -full為後綴（例如'xs-8-full' ），則列寬將計算為$grid_width的百分比，但作為下一個匹配的$breakpoint寬度（如.container-fluid中所示） ）。您也可以根據下一個符合的 $breakpoint寬度使用full作為跨度編號（例如'xs-full' ）作為全寬度大小。 |
由於<picture>元素和背景圖像支援藝術指導圖像，因此以下完整語法可用於sizes參數中的每個圖像尺寸：
breakpoint:width [/factor|height]|crop_x crop_y大小語法中提供以下參數：
| 範圍 | 類型 | 必需的 | 預設 | 定義 |
|---|---|---|---|---|
| 斷點 | 數字或字串 | 是的 | 如果未定義，且width是數字，則斷點將與寬度相同。如果未定義，且width是列定義，則斷點將是相應的斷點（例如，如果 width 是'xs-8' ，斷點將為'xs' ）。 | |
| 寬度 | 數字或字串 | 是的 | 影像的所需（最大）寬度（例如800 ）。列定義是$grid_widths中的鍵加上破折號和列跨度編號（例如'xs-8' ）。如果列跨度編號以 -full為後綴（例如'xs-8-full' ），則列寬度將計算為$grid_width的百分比，但作為下一個匹配的$breakpoint寬度（如.container-fluid中所示） ）。您也可以根據下一個符合的 $breakpoint寬度使用full作為跨度編號（例如'xs-full' ）作為全寬度大小。 | |
| 高度 | 數位 | 選修的 | 影像的所需（最大）高度（例如500 ）。 | |
| 因素 | 數位 | 選修的 | 所需高度的寬度裁切因子，預設範圍為0-2 （例如0.75 ）。 | |
| 作物_x | 數字或字串 | 選修的 | c | 水平方向的裁剪位置（例如c ）。有關更多信息，請參閱裁剪部分。 |
| 作物_y | 數字或字串 | 選修的 | c | 垂直方向的裁剪位置（例如b ）。有關更多信息，請參閱裁剪部分。 |
以下選項可用作有效的裁剪位置：
您可以在水平方向 (x) 上使用以下裁切位置簡寫：
l : 左c : 中心r ：對f ：焦點（有關更多信息，請參閱焦點部分）在垂直方向（y）：
t : 頂部c : 中心b ：底部如果未設定垂直方向，則水平方向x將被視為快捷方式：
c ：中心中心t : 頂部中心r : 右中心b : 中心底部l : 左中f ：焦點（有關更多信息，請參閱焦點部分）您也可以使用百分比作為有效的裁剪位置語法：
75 10 ：左起 75%，從上起 10%25 80 ：從左側 25%，從頂部 80%50 100 ：從左側起 50%，從頂部起 100%（等於center bottom ）在這種情況下，座標x和y都需要傳遞。
當您想要裁切影像但保留影像的特定區域在視圖中時，可以使用f(ocal)簡寫功能。為了設定影像的焦點區域，我們為 Wordpress 媒體框架的多個視圖新增了焦點選擇器介面。
當您點擊 WordPress 媒體庫網格視圖中的縮圖時，您將看到Attachment details模式。這將是選擇焦點的最準確的視圖： 
在頁面或貼文中設定或取代特色圖像時，您將看到Featured image模式。在此視圖中，您可以在右側邊欄頂部的縮圖中選擇焦點： 
在頁面或貼文的所見即所得編輯器或元欄位中上傳或編輯圖像時，您將看到Edit image模式。在此視圖中，您可以在左上角的縮圖中選擇焦點： 
您可以透過 3 種方式使用介面設定影像的焦點：
透過使用這些選項之一，名為responsive_pics_focal_point的帖子元鍵將被新增或更新到附件，其中包含以百分比表示的x和y座標的陣列值：
[
' x ' => ' 86 ' ,
' y ' => ' 39 '
]要在主題中的其他位置使用此值，您可以透過呼叫以下命令來檢索它：
$ focal_point = get_post_meta ( $ attachment_id , ' responsive_pics_focal_point ' , true );ResponsivePics函數時，該程式庫將使用 Action Scheduler 將調整大小和/或裁切映像任務作為作業新增至後台進程佇列。後台處理庫 Action Scheduler 有一個內建管理螢幕，用於監視、調試和手動觸發計劃的圖像調整大小作業。管理介面可透過以下方式存取：
Tools > Scheduled Actions每個調整大小作業都將按其 WordPress 圖片 ID 進行分組
當您使用內建的 WP-Cron 時，後台進程佇列將僅處理每次頁面載入時的任何任務。
如果您在設定中停用了WP-Cron ，並且在伺服器上使用自己的 cron 作業，則 Action Scheduler 將使用該 cron 作業中設定的時間間隔來處理下一批作業。
define ( ' DISABLE_WP_CRON ' , true );如果您像我們一樣使用 Trellis ❤️，預設的 cron 間隔設定為每 15 分鐘一次。
您可以透過將每個 WordPress 網站的cron_interval （或多站點的cron_interval_multisite ）變數設為*/1來覆寫此設置，例如 1 分鐘：
例如，在trellis/group_vars/development/wordpress_sites.yml ：
wordpress_sites :
example.com :
site_hosts :
- canonical : example.test
redirects :
- www.example.test
local_path : ../site # path targeting local Bedrock site directory (relative to Ansible root)
admin_email : [email protected]
multisite :
enabled : false
ssl :
enabled : false
provider : self-signed
cache :
enabled : false
cron_interval : ' */1 '更改此值後，不要忘記重新配置您的伺服器。
如果在調整大小過程中發生錯誤或存在無效語法，ResponsivePics 將顯示或傳回錯誤。
響應式圖片錯誤 - 斷點 xxs 既未定義也不是數字
{
"code" : " responsive_pics_invalid " ,
"message" : " breakpoint xxs is neither defined nor a number " ,
"data" : {
"xs" : 0 ,
"sm" : 576 ,
"md" : 768 ,
"lg" : 992 ,
"xl" : 1200 ,
"xxl" : 1400
}
}以下操作可讓您連接到影像調整大小過程時間軸。您可以將它們放在主題的functions.php 檔案中。
responsive_pics_request_scheduled當 ResponsivePics 已將新的圖像調整大小請求安排到 ActionScheduler 佇列時，將觸發此操作。
do_action ( ' responsive_pics_request_scheduled ' , ( int ) $ post_id , ( array ) $ resize_request );$post_id
（整數）附件 ID
$調整大小_請求
（陣列）調整大小請求參數：
[
' id ' => ( int ) The attachment ID ,
' quality ' => ( int ) The requested image quality,
' width ' => ( int ) The requested image width,
' height ' => ( int ) The requested image height,
' crop ' => ( array ) The requested image crop positions,
' ratio ' => ( float ) The requested image ratio,
' path ' => ( string ) The requested image file path,
' rest_route ' => ( string ) The requested rest api route
]responsive_pics_request_processed當ActionScheduler處理了佇列中的圖像調整大小請求時，將觸發此操作。
do_action ( ' responsive_pics_request_processed ' , ( int ) $ post_id , ( int ) $ quality , ( int ) $ width , ( int ) $ height , ( array ) $ crop , ( float ) $ ratio , ( string ) $ resize_path , ( string ) $ rest_route );$post_id
(int)附件 ID
$品質
(int)要求的影像質量
$寬度
(int) 請求的圖像寬度
$高度
(int) 請求的圖片高度
$作物
（陣列）請求的影像裁切位置百分比：
[
' x ' => ( int ) The horizontal crop position as percentage,
' y ' => ( int ) The vertical crop position as percentage
] $比率
(float) 請求的圖像比例
$調整路徑大小
（字串）請求的圖像檔案路徑
responsive_pics_file_saved_local當ResponsivePics成功在本機上儲存調整大小的圖片檔案時，將觸發此操作。
do_action ( ' responsive_pics_file_saved_local ' , ( int ) $ post_id , ( array ) $ file );$post_id
(int)附件 ID
$文件
（陣列）已儲存的檔案包含：
[
' path ' => ( string ) The saved image filepath,
' file ' => ( string ) The saved image filename,
' width ' => ( int ) The saved image file width,
' height ' => ( int ) The saved image file height,
' mime-type ' => ( string ) The saved image file mime-type,
' filesize ' => ( int ) The saved image filesize
]responsive_pics_file_s3_uploaded當WP Offload Media將調整大小的圖片檔案上傳到您的 S3 儲存空間時，將觸發此操作。
do_action ( ' responsive_pics_file_s3_uploaded ' , ( int ) $ post_id , ( array ) $ file );$post_id
(int)附件 ID
$文件
（陣列） S3 上傳的檔案包含：
[
' path ' => ( string ) The uploaded image filepath,
' file ' => ( string ) The uploaded image filename,
' width ' => ( int ) The uploaded image file width,
' height ' => ( int ) The uploaded image file height,
' mime-type ' => ( string ) The uploaded image file mime-type,
' filesize ' => ( int ) The uploaded image filesize
]responsive_pics_file_deleted_local當ResponsivePics成功刪除本地已調整大小的圖像檔案時，將觸發此操作。
do_action ( ' responsive_pics_file_deleted_local ' , ( int ) $ post_id , ( string ) $ file );$post_id
(int)附件 ID
$文件
（字串）刪除的圖像檔案路徑
responsive_pics_file_s3_deleted當WP Offload Media刪除了 S3 儲存中已調整大小的圖片檔案時，會觸發此操作。
do_action ( ' responsive_pics_file_s3_deleted ' , ( int ) $ post_id , ( array ) $ file_paths );$post_id
(int)附件 ID
$檔案路徑
（陣列） S3 儲存中刪除的已調整大小的檔案路徑。
當您安裝並啟用 WP Offload Media (Lite) 外掛程式時，該程式庫會自動：
筆記
當在Offload Media Lite設定中啟動從伺服器刪除檔案選項時，此外掛程式將不會刪除此外掛程式產生的任何調整大小/裁剪的圖片！
當在get_picture或get_image函數或具有布林值true API 端點中啟用lazyload選項時，該程式庫會自動：
lazyload類別新增至<img>元素。srcset與圖片<source>或<img>元素上的data-srcset屬性交換。這將使您能夠使用延遲加載插件，例如 Lazysizes。
您也可以透過將其傳遞到主題的functions.php中的ResponsivePics庫來設定您自己的延遲載入類別：
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLazyLoadClass ( ' lazy ' );
}若要將Lazysizes作為節點模組安裝在 WordPress 主題中，請從主題目錄執行以下命令：
npm install --save lazysizes
yarn add lazysizes
並將套件匯入到主題的全域 javascript 檔案：
import 'lazysizes' ;當使用字串值native啟用lazyload載入時，該函式庫會自動：
loading="lazy"屬性新增至<img>元素。在get_image函數或/responsive-pics/v1/image API 端點中啟用lqip選項時，該程式庫會自動：
<img>元素中新增blur-up類別。<img>元素上新增一個後備src屬性，其中包含預設寬度為 100px 的低品質佔位符影像。這將使您能夠在加載實際的高品質圖像之前設定佔位符圖像的樣式。
您也可以透過將其傳遞到主題的functions.php中的ResponsivePics庫來設定您自己的lqip類別：
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLqipClass ( ' blurred ' );
}當在get_picture函數或/responsive-pics/v1/picture API 端點中啟用intrinsic選項時，該程式庫會自動：
<picture>元素中新增一個內在類，為圖片<img>元素新增一個intrinsic__item類。<source>和<img>元素上加入data-aspectratio屬性。這將使您能夠透過使用內部插件（例如lazysizesspectratio擴充）根據圖像寬度計算高度或根據高度計算寬度來預先佔用圖像所需的空間。
要在 WordPress 主題中使用Lazysizes 寬高比擴展，請先按照 Lazyloading 部分中的說明將lazysizes安裝為節點模組，然後將擴展導入到主題的全局 javascript 文件中：
import 'lazysizes/plugins/aspectratio/ls.aspectratio.js' ; 請在 Github 上提交您在使用ResponsivePics庫時遇到的任何問題。
ResponsivePics由以下人員開發和維護：
@monokai（創建者）
@twansparant（創建者）
程式碼和文件版權所有 2017-2023，歸 Clarify 所有。
根據 MIT 許可證發布的代碼。
在知識共享下發布的文件。
