內容簡介
生成媒體庫圖像的Base64編碼、縮小和模糊版本,可以用作占位符。
靈感
在Wolt展示了他們的Blurhash技術後,我想做一些與WordPress類似的東西。我選擇了Base64,而不是像這家外賣公司一樣將圖像編碼為base83,以使開發體驗更容易。
如何開始使用插件
在您的環境中安裝並啟用此插件
插件應該在啟用時為每個圖像生成模糊版本。
檢查媒體庫中圖像的詳細信息。它應該列出了所有生成的模糊。
要將模糊添加到模板中,請使用get_post_meta()。請檢查插件存儲庫中的範例主題。
自定義
該插件提供了一些過濾器,因此開發人員可以根據自己的需求修改生成的模糊圖像。默認情況下,生成的圖像寬度為8像素,通過高斯模糊函數傳遞一次,這將產生長度大約為250-1000個字符的字符串。要更改這些內容,請使用以下鉤子:
function modify_image_blur_width( int $width ): int {
return 15;
}
add_filter("image-blur-modify-width", "modify_image_blur_width");
function modify_gaussian_blur_strength( int $strength ): int {
return 10;
}
add_filter("image-blur-modify-gaussian-blur-strength", "modify_gaussian_blur_strength");
開發者團隊
原文外掛簡介
Generates base64 encoded, downscaled and blurred versions of media library’s images, which can be used f.e. as a placeholder.
Inspiration
After Wolt showcased their Blurhash technique, I wanted to make something similar to WordPress. Instead of encoding images to base83 like the food delivery company does, I went with base64 so development experience was easier.
How to start using the plugin
Install and activate this plugin in your environment
The plugin should generate blurs for each image on the activation.
Check an image’s details in your media library. It should have listing of all generated blurs.
To get a blur to a template, use get_post_meta(). Check example theme in plugin’s repository
Customization
The plugin provides few filters, so developers can modify generated blur images to their needs. By default, generated images are 8 pixels wide and passed once through gaussian blur function, which will result in roughly 250-1000 characters long string. To change these, use following hooks:
function modify_image_blur_width( int $width ): int {
return 15;
}
add_filter("image-blur-modify-width", "modify_image_blur_width");
function modify_gaussian_blur_strength( int $strength ): int {
return 10;
}
add_filter("image-blur-modify-gaussian-blur-strength", "modify_gaussian_blur_strength");
