[WordPress] 外掛分享： Better image sizes

前言介紹

• 這款 WordPress 外掛「Better image sizes」是 2022-11-17 上架。
• 目前有 1000 個安裝啟用數。
• 上一次更新是 2024-03-28，距離現在已有 400 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
• 外掛最低要求 WordPress 3.0.1 以上版本才可以安裝。
• 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
• 有 2 人給過評分。
• 論壇上目前有 1 個提問，問題解答率 100% ，不低，算是個很有心解決問題的開發者團隊了！

外掛協作開發者

kubiq |

外掛標籤

media | sizes | images | retina | thumbnails |

內容簡介

此外掛受Fly Dynamic Image Resizer啟發，但它提供更複雜的功能，例如為每個圖像提供焦點選擇器、輸出響應性大小等。

此外掛主要面向開發人員。您需要在您的佈景主題或外掛中使用其功能才能使其運作。

使用此外掛的原因

WordPress會自動為每個上傳的圖像創建許多較小的圖像。
通常您只需要其中的1或2個，這樣會浪費您的服務器空間和資源。
此外，預設情況下從中心生成裁剪的圖像，這在許多情況下可能是問題。

此外掛允許您：

禁用自動生成的圖像尺寸
只動態生成所需的圖像尺寸以及所需的圖像
逐個或全部從此外掛中刪除已生成的圖像尺寸
指定不同的焦點，它在創建圖像的裁剪版本時將處於焦點
禁用大型圖像尺寸閾值，因此大於2560x2560px的圖像不會縮小

其運作方式

如果您禁用現有的自動生成的圖像尺寸，則新上傳的圖像將不會創建其尺寸
您需要在您的代碼中指定圖像所需的尺寸
圖像在首次訪問頁面時動態創建，並存儲在上傳的文件夾中
接下來每次訪問該頁面時都會加載已生成的圖像

功能

bis_get_attachment_image_src( $attachment_id, $size, $crop )

這個功能是參考預設的wp_get_attachment_image_src而來。
如果您以前使用過Fly動態圖像調整大小，則不需要在您的代碼中更改fly_get_attachment_image_src的功能 - 這是一個後備，因此您可以停用Fly動態圖像調整大小，它仍然可以運作。

參數：

attachment_id (integer)(必要)
圖像附件的ID
例如：123 或 get_post_thumbnail_id() 或 get_field('my_image')

size (array)(必要)
一個有寬度和高度的陣列
例如：[ 1920, 1080 ]

crop (boolean/array)(選用)
如果您不想裁剪，只需縮放，請跳過這一步或傳遞 false 或 0，
否則傳遞true或1以使用在管理媒體中選擇的焦點裁剪（預設情況下中心），
或傳遞具有字符串x軸和y軸參數的數組，例如[ 'right', 'bottom' ]
或傳遞具有數字x軸和y軸參數的數組，例如[ 0.5, 0.8 ]

返回值：

array(
'src' => (string) 圖像url,
'width' => (integer) 寬度（像素）,
'height' => (integer) 高度（像素）
)

 

bis_get_attachment_image( $attachment_id, $size, $crop, $attr )

這個功能是參考預設的wp_get_attachment_image而來。
如果您以前使用過Fly動態圖像調整大小，則不需要在您的代碼中更改fly_get_attachment_image的功能 - 這是一個後備，因此您可以停用Fly動態圖像調整大小，它仍然可以運作。

參數：

attachment_id (integer)(必要)
圖像附件的ID
例如：123 或 get_post_thumbnail_id() 或

原文外掛簡介

This plugin is ment mostly for developers. You need to use its functions in your theme or plugin to make it works.
This plugin offers functionality like face detection crop, focal point selector for every image, function to output responsive sizes and more.
Why to use this plugin?
WordPress will automatically create a lot of smaller images for every uploaded image.
You mostly need just 1 or 2 of them, so this is a waste of your server space and resources.
Also cropped images are generated from the center by default, which can be a problem many times.
This plugin allows you to:

disable autogenerated image sizes
dynamically generate only needed image sizes for only needed images
delete generated image sizes from this plugin individually or all together
specify different focal point that will be in the focus while creating cropped versions of the image
automatically detect focal point by face detection algorithm
disable big image size threshold, so image bigger than 2560x2560px will be NOT scaled down

How it works

if you disable existing autogenerated image sizes, then newly uploaded images will not create its sizes
you need to specify in your code what size is needed for the image
image is dynamically created on the first visit of the page and is stored in uploads folder
every next visit of that page will just load already generated image

Functions
bis_get_attachment_image_src( $attachment_id, $size, $crop )
Function inspired by default wp_get_attachment_image_src.
If you used Fly Dynamic Image Resizer before, you don’t need to replace fly_get_attachment_image_src functions in your code – there is a fallback, so you can deactivate Fly Dynamic Image Resizer and it will still work.
Parameters:

attachment_id (integer)(required)
The ID of the image attachment
Example: 123 or get_post_thumbnail_id() or get_field('my_image')

size (array)(required)
An array with the width and height
Example: [ 1920, 1080 ]

crop (boolean/integer/array/string)(optional)
Skip this or pass false or 0 if you don’t want to crop, just rescale,
otherwise pass true or 1 to use focal point crop that is selected in admin media (by default center),
or pass array with string x-axis and y-axis parameters like [ 'right', 'bottom' ]
or pass array with numeric x-axis and y-axis parameters like [ 0.5, 0.8 ]
or pass string 'face' to automatically detect face position (can be exhaustive on server resources)

Returns:
array(
'src' => (string) url of the image,
'width' => (integer) width in pixels,
'height' => (integer) height in pixels
)

 
bis_get_attachment_image( $attachment_id, $size, $crop, $attr )
Function inspired by default wp_get_attachment_image.
If you used Fly Dynamic Image Resizer before, you don’t need to replace fly_get_attachment_image functions in your code – there is a fallback, so you can deactivate Fly Dynamic Image Resizer and it will still work.
Parameters:

attachment_id (integer)(required)
The ID of the image attachment
Example: 123 or get_post_thumbnail_id() or get_field('my_image')

size (array)(required)
An array with the width and height
Example: [ 1920, 1080 ]

crop (boolean/integer/array/string)(optional)
Skip this or pass false or 0 if you don’t want to crop, just rescale,
otherwise pass true or 1 to use focal point crop that is selected in admin media (by default center),
or pass array with string x-axis and y-axis parameters like [ 'right', 'bottom' ]
or pass array with numeric x-axis and y-axis parameters like [ 0.5, 0.8 ]
or pass string 'face' to automatically detect face position (can be exhaustive on server resources)

attr (array)(optional)
An array of attributes
Special attribute retina allows you to automatically generate srcset for @2x retina devices
Example: array( 'retina' => true, 'alt' => 'Custom alt text', 'class' => 'my-class', 'id' => 'my-id' )

Returns:

 
bis_get_attachment_picture( $attachment_id, $sizes, $attr )
Parameters:

attachment_id (integer)(required)
The ID of the image attachment
Example: 123 or get_post_thumbnail_id() or get_field('my_image')

sizes (array)(required)
An array with the key => value pair
where key means breakpoint
and value is array of width, height, crop and alternative_attachment_id
Example: [ 767 => [ 767, 400, 1, 987 ], 9999 => [ 1200, 500, 1 ] ]
This will generateandandattr (array)(optional)
An array of attributes
Special attribute retina allows you to automatically generate srcset for @2x retina devices
Example: array( 'retina' => true, 'alt' => 'Custom alt text', 'class' => 'my-class', 'id' => 'my-id' )

Example:
To generate perfect fullwidth hero image, that will looks great on 4K devices and also on small phones, but it will load only needed size, you can use:
echo bis_get_attachment_picture(
get_post_thumbnail_id(),
[
375 => [ 375, 500, 1, 987 ],
575 => [ 575, 500, 1, 987 ],
767 => [ 767, 500, 1, 987 ],
991 => [ 991, 500, 1 ],
1199 => [ 1199, 500, 1 ],
1399 => [ 1399, 500, 1 ],
1600 => [ 1600, 500, 1 ],
1920 => [ 1920, 500, 1 ],
2560 => [ 2560, 500, 1 ],
3440 => [ 3440, 500, 1 ],
3840 => [ 3840, 500, 1 ],
]
);

Returns:

 
There is no fallback for fly_add_image_size function
If you used Fly Dynamic Image Resizer before, you need to remove fly_add_image_size functions from your code.
You can create your own variables for sizes if you need it, like
define( 'MY_CUSTOM_SIZE', [ 1000, 200 ] );

and then just us it inside functions, like:
echo bis_get_attachment_image( get_post_thumbnail_id(), MY_CUSTOM_SIZE );

 
Support other extensions than JPG, PNG and WEBP
This plugin works by default only with JPG, PNG and WEBP files,
but you can easily allow any other mime types,
just use this code eg. in wp-config.php or in your functions.php
define( 'BIS_ALLOWED_MIME_TYPES', array( 'image/jpeg', 'image/png', 'any_other/mime_type' ) );

 
Get selected image focal point
Focal point data are stored in the attachement post metas.
There is also custom sanitize function, that you can use.
$focal_point = sanitize_focal_point( get_post_meta( get_post_thumbnail_id(), 'focal_point', true ) );

Returns:
array( 0.5, 0.8 )

which means that focal point is 50% from left and 80% from top

各版本下載點

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

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

---

3.2 | 3.3 | 3.4 | 3.5 | 3.6 | trunk |

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

• Easy Image Sizes 》Easy Image Sizes For WordPress 是一個非常簡單的外掛，允許您建立無限數量的不同圖片尺寸，並與內建的尺寸一起使用（例如縮略圖、小尺寸、中尺寸等等）。, ...。
• Responsify WP 》Responsify WP 是關心響應式圖片的 WordPress 外掛程式。, 功能, , 使用帶有 srcset/sizes 屬性的 img 標籤。, ... 或者是 picture 元素。, 支援使用或不使用...。
• Custom Image Sizes by 99 Robots 》Custom Image Sizes by 99 Robots 是一個快速且簡單的方式，讓您在 WordPress 網站中新增自己的圖片大小。, 也請查看我們的其他 外掛程式 🙂。
• Image Sizes Controller, Create Custom Image Sizes, Disable Image Sizes 》透過此 WordPress 外掛，您可更精確地控制網站上所建立的圖像尺寸。您可建立無限的圖像尺寸，選擇寬度、高度和裁剪方式，並可以停用任何圖像尺寸的建立，以不...。
• Replace Content Image Size 》WordPress會為每個上傳的圖像產生多個不同尺寸的版本。這些圖像將使用視覺編輯器插入到文章內容中，選擇適合當前主題的正確格式大小，以便在佈局中正確顯示圖...。
• Product Size charts for Woocommerce 》免費版本展示頁面 | 免費版本文件連結, 概述, 由於不同品牌的尺碼標籤不同，網上購物者常常訂購錯誤尺碼產品，退貨過程不必要地給客戶帶來不便。作為線上商店...。
• Image Sizes Panel 》當在管理區中查看媒體項目時，顯示一個元框，可顯示所有已生成的圖片大小。。
• WP Image Sizes 》在現代網頁設計中，設計師會在網頁上創建不同尺寸的圖像以營造吸引人的版面配置。 如果網頁是使用 WordPress 構建的，開發人員需要在主題中註冊每個圖像尺寸...。
• Calculate price by weight/dimension for WooCommerce 》這是一個 WooCommerce 外掛，讓顧客可以選擇他們想要的任何產品尺寸或重量，並根據所選值計算出正確的價格。, 免費選項：, – 長度 (公尺、公分、毫米、...。
• Multiple Cropped Images 》設置圖片尺寸，上傳和剪裁圖片, 多裁剪圖片（MCI）允許您在編輯頁面上上傳無限數量的圖片，並使用易於使用的圖片剪裁工具分別對它們進行縮放，並使您能夠選擇...。
• Avasize 》Avasize 提供創新和高效的購物體驗，讓您的客戶有更好的購物體驗。, Avasize 尺碼工具讓在線購物者能夠輕鬆購買適合自己或親友的衣服/鞋子，無需煩惱尺碼的問...。