开发者 | kubiq |
---|---|
更新时间 | 2024年3月28日 22:15 |
捐献地址: | 去捐款 |
PHP版本: | 5.6 及以上 |
WordPress版本: | 6.5 |
版权: | GPLv2 or later |
版权网址: | 版权信息 |
uploads
folderwp_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:
123
or get_post_thumbnail_id()
or get_field('my_image')
[ 1920, 1080 ]
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)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:
123
or get_post_thumbnail_id()
or get_field('my_image')
[ 1920, 1080 ]
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)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' )
<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:
123
or get_post_thumbnail_id()
or get_field('my_image')
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 generate <source media="(max-width:767px)" srcset="image987_767x400.jpg">
and <source media="(max-width:9999px)" srcset="image_1200x500.jpg">
and <source media="(min-width:10000px)" srcset="image.jpg">
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' )
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
/wp-content/uploads/bis-images/{IMAGE_ID}/{IMAGE_FILENAME}-{IMAGE_SIZE}-f{IMAGE_FOCAL_POINT}.{IMAGE_EXTENSION}