Fly Dynamic Image Resizer

外掛說明

請查看外掛 GitHub 存放庫 ♥

佈景主題開發者最頭痛的問題之一,就是圖片的多種尺寸。當網站載入媒體庫的圖片時,WordPress 會自動以開發者使用 add_image_size() 所定義的全部圖片尺寸建立縮圖,但是卻不考慮這些尺寸的圖片是否有真的使用。正因為如此,在 wp-content/uploads 目錄中的圖片,絕大多數都是浪費儲存空間,也使用不到。這不是建立圖片縮圖的最佳方式。

With this plugin, you can create as many image sizes as you want without the guilt of unnecessary image sizes taking up your disk space!

This is because the images created using this plugin are dynamically created when the image is called for the first time, rather than when it is uploaded. You can also delete the cached images for each image individually, or all the cached images.

How this plugin works

  1. You either define an image size in your code using the fly_add_image_size() function, or directly call the image size in the code
  2. The admin uploads the image in the media library, but the fly dynamic images are not created
  3. The user visits the page for the first time, and the image is dynamically created and is stored
  4. The user visits the page again for the second time, and the stored version of the image is served

Documentation

Here are some functions and example code to get you started!

fly_get_attachment_image_src( $attachment_id, $size, $crop )

  • attachment_id (integer)(required) : The ID of the image attachment
  • size (string/array)(required) : Either the name of the pre-defined size defined using fly_add_image_size, or an array with the width and height. Ex: array( 500, 500 )
  • crop (boolean/array)(optional) : Whether the image should be cropped, or the crop position

傳回陣列:

array(
    'src' => string,
    'width' => integer,
    'height' => integer
)

 

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

  • attachment_id (integer)(required) : The ID of the image attachment
  • size (string/array)(required) : Either the name of the pre-defined size defined using fly_add_image_size, or an array with the width and height. Ex: array( 500, 500 )
  • crop (boolean/array)(optional) : Whether the image should be cropped, or the crop position
  • attr (array)(optional) : An array of attributes. Ex: array( 'alt' => 'Alt text', 'title' => 'Title text', 'class' => 'my-class', 'id' => 'my-id' )

Returns a HTML IMG element string:

<img src="http://yoursite.com/wp-content/uploads/fly-images/10/your-image-500x500-c.jpg" width="500" height="500" alt="Alt text" />

 

Example 1: Pre-defined Image Sizes

In this method, you define as many image sizes as you want in your functions.php file.

if ( function_exists( 'fly_add_image_size' ) ) {
    fly_add_image_size( 'home_page_square', 500, 500, true );
    fly_add_image_size( 'home_page_square_2x', 1000, 1000, true );
    fly_add_image_size( 'cropped_top_left', 1000, 1000, array( 'left', 'top' ) );
}

Now, lets get the post thumbnail using the image sizes we just defined:

<?php echo fly_get_attachment_image( get_post_thumbnail_id(), 'home_page_square' ); ?>

Here’s another way you can do this:

<?php $image = fly_get_attachment_image_src( get_post_thumbnail_id(), 'home_page_square' ); echo '<img src="' . $image['src'] . '" width="' . $image['width'] . '" height="' . $image['height'] . '" />'; ?>

Let’s get the image from our example above which has a crop position defined:

<?php echo fly_get_attachment_image( get_post_thumbnail_id(), 'cropped_top_left' ); ?>

 

Example 2: Dynamic Image Sizes

Lets get the post thumbnail using some dynamic image sizes:

<?php echo fly_get_attachment_image( get_post_thumbnail_id(), array( 500, 500 ), true ); ?>

Here’s another way you can do this:

<?php $image = fly_get_attachment_image_src( get_post_thumbnail_id(), 'home_page_square', array( 500, 500 ), true ); echo '<img src="' . $image['src'] . '" width="' . $image['width'] . '" height="' . $image['height'] . '" />'; ?>

Lets get the post thumbnail cropped from the bottom right:

<?php echo fly_get_attachment_image( get_post_thumbnail_id(), array( 500, 500 ), array( 'right', 'bottom' ) ); ?>

 

A note on Crop Positions

Crop positions are set using an array. The first parameter of the array needs to be the x-axis crop and the second parameter needs to be the y-axis crop. This feature will not work the other way around.

程式碼範例:

fly_get_attachment_image( get_post_thumbnail_id(), array( 500, 500 ), array( 'right', 'bottom' ) ) 可以正確執行!:)

fly_get_attachment_image( get_post_thumbnail_id(), array( 500, 500 ), array( 'bottom', 'right' ) ) 無法正確執行!:(

詳細說明文件

請查看外掛 GitHub 存放庫的 Wiki 頁面以閱讀完整說明文件:https://github.com/junaidbhura/fly-dynamic-image-resizer/wiki

螢幕擷圖

  • The Tools page
  • Delete individual images' cached fly images

安裝方式

Upload ‘fly-dynamic-image-resizer’ to the ‘/wp-content/plugins/’ directory

Activate the plugin through the ‘Plugins’ menu in WordPress

Create dynamic image sizes in your PHP code!

使用者評論

2020 年 4 月 24 日
One of my "go to" plugins for just about any site - straightforward and does the job well. One modification that I have made is so that you can specify just the height OR width and are not required to specify both.
2020 年 3 月 27 日
Amazing plugin, and it hits the nail on the head as far as how WP should approach images. This plugin would benefit from some other image processing options - but overall, incredible work.
2019 年 12 月 19 日
I have clients with sites that are 1GB large because of image sizes I need to create for Pagespeed or just layout purposes. One client has a 20GB /wp-content folder. That is ridiculous, but before this plugin, seemed necessary. This is an amazing, elegant solution and really should be included in core, i.e., "Don't create an image size until it's actually used." Thank you!
2019 年 5 月 20 日
Hello, thank you for this great plugin I use it on every web! I have one question - is there a way to process image from URL from another web? For example to download and crop youtube thumbnails... I can write script to do it store image locally and then use one of fly_ functions, but my question is if there is something in your plugin that can process URL directly
閱讀全部 19 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈Fly Dynamic Image Resizer〉的開發相關工作。

參與者

將 Fly Dynamic Image Resizer 外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

2.0.8

  • Fix error for WP_Filesystem in some edge cases #38

2.0.7

  • Fix file extensions in edge cases #38

2.0.6

  • New filter to potentially modify image path to work better with optimization plugins #33

2.0.5

  • Better multi-site support #19

2.0.4

  • Performance improvements #15

2.0.3

  • Added two new helper functions to get previously defined image sizes #14

2.0.2

  • Better handling of file names with decimals #10

2.0.1

2.0.0

1.0.5

  • Added support for crop positions. Images can now be cropped from the top, left, right, bottom or the default: center.
  • Added new hook ‘fly_image_created’.

1.0.4

1.0.3

  • Added new filter ‘fly_dir_path’.

1.0.2

  • Fixed IIS URLs.

1.0.1

  • Fixed user capabilities.
  • “Full” size for fly_get_attachment_image_src now returns wp_get_attachment_image_src

1.0.0

  • First stable release.