Linux 软件免费装
Banner图

Better image sizes

开发者 kubiq
更新时间 2024年3月28日 22:15
捐献地址: 去捐款
PHP版本: 5.6 及以上
WordPress版本: 6.5
版权: GPLv2 or later
版权网址: 版权信息

标签

responsive media images sizes thumbnails optimize retina

下载

1.3 1.7 3.2 1.0 3.1 1.6 3.0 1.4 1.1 1.2 1.5 1.8 1.9 2.0 3.3 3.4 3.5 3.6

详情介绍:

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 <picture> 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: How it works
  1. if you disable existing autogenerated image sizes, then newly uploaded images will not create its sizes
  2. you need to specify in your code what size is needed for the image
  3. image is dynamically created on the first visit of the page and is stored in uploads folder
  4. 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: 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: Returns: <img src="https://web.com/wp-content/uploads/bis-images/1234/your-image-500x500-f50_50.jpg" width="500" height="500" alt="Alt text">   bis_get_attachment_picture( $attachment_id, $sizes, $attr ) Parameters: 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: <picture> <source media="(max-width:375px)" srcset="https://web.com/wp-content/uploads/bis-images/987/your-image-375x500-f50_50.jpg"> <source media="(max-width:575px)" srcset="https://web.com/wp-content/uploads/bis-images/987/your-image-575x500-f50_50.jpg"> <source media="(max-width:767px)" srcset="https://web.com/wp-content/uploads/bis-images/987/your-image-767x500-f50_50.jpg"> <source media="(max-width:991px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-991x500-f50_50.jpg"> <source media="(max-width:1199px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1199x500-f50_50.jpg"> <source media="(max-width:1399px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1399x500-f50_50.jpg"> <source media="(max-width:1600px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1600x500-f50_50.jpg"> <source media="(max-width:1920px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1920x500-f50_50.jpg"> <source media="(max-width:2560px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-2560x500-f50_50.jpg"> <source media="(max-width:3440px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-3440x500-f50_50.jpg"> <source media="(max-width:3840px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-3840x500-f50_50.jpg"> <source media="(min-width:3841px)" srcset="https://web.com/wp-content/uploads/2022/11/your-image.jpg"> <img width="4000" height="2000" src="https://web.com/wp-content/uploads/2022/11/your-image.jpg" alt="Some alt" loading="lazy"> </picture>   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

安装:

  1. Upload the plugin files to the /wp-content/plugins/ directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress

屏幕截图:

  • Single file regenerate thumbnails
  • Focal point picker

常见问题:

Images stored location

/wp-content/uploads/bis-images/{IMAGE_ID}/{IMAGE_FILENAME}-{IMAGE_SIZE}-f{IMAGE_FOCAL_POINT}.{IMAGE_EXTENSION}

更新日志:

3.6 3.5 3.4 3.3 3.2 3.1 3.0 2.0 1.9 1.8 1.7 1.6 1.5 1.4 1.3 1.2 1.1 1.0