This plugin is ment mostly for developers. You need to use its functions in your theme or plugin to make it works.<\/p>\n\n
This plugin offers functionality like face detection crop<\/strong>, focal point selector<\/strong> for every image, function to output responsive <picture> sizes<\/strong> and more.<\/p>\n\n WordPress will automatically create a lot of smaller images for every uploaded image.\nYou mostly need just 1 or 2 of them, so this is a waste of your server space and resources.\nAlso cropped images are generated from the center by default, which can be a problem many times.<\/p>\n\n This plugin allows you to:<\/strong><\/p>\n\n bis_get_attachment_image_src( $attachment_id, $size, $crop )<\/strong><\/p>\n\n Function inspired by default Parameters:<\/p>\n\n attachment_id<\/strong> (integer)(required)\nThe ID of the image attachment\nExample: size<\/strong> (array)(required)\nAn array with the width and height\nExample: crop<\/strong> (boolean\/integer\/array\/string)(optional)\nSkip this or pass Returns:<\/p>\n\n <\/p>\n\n bis_get_attachment_image( $attachment_id, $size, $crop, $attr )<\/strong><\/p>\n\n Function inspired by default Parameters:<\/p>\n\n attachment_id<\/strong> (integer)(required)\nThe ID of the image attachment\nExample: size<\/strong> (array)(required)\nAn array with the width and height\nExample: crop<\/strong> (boolean\/integer\/array\/string)(optional)\nSkip this or pass attr<\/strong> (array)(optional)\nAn array of attributes\nSpecial attribute Returns:<\/p>\n\n <\/p>\n\n bis_get_attachment_picture( $attachment_id, $sizes, $attr )<\/strong><\/p>\n\n Parameters:<\/p>\n\n attachment_id<\/strong> (integer)(required)\nThe ID of the image attachment\nExample: sizes<\/strong> (array)(required)\nAn array with the attr<\/strong> (array)(optional)\nAn array of attributes\nSpecial attribute Example:\nTo 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:<\/p>\n\n Returns:<\/p>\n\n <\/p>\n\n If you used Fly Dynamic Image Resizer<\/em> before, you need to remove and then just us it inside functions, like:<\/p>\n\n <\/p>\n\n This plugin works by default only with JPG, PNG and WEBP files,\nbut you can easily allow any other mime types,\njust use this code eg. in <\/p>\n\n Focal point data are stored in the attachement post metas.\nThere is also custom sanitize function, that you can use.<\/p>\n\n Returns:<\/p>\n\n which means that focal point is 50% from left and 80% from top<\/p>\n\n\n \/wp-content\/uploads\/bis-images\/{IMAGE_ID}\/{IMAGE_FILENAME}-{IMAGE_SIZE}-f{IMAGE_FOCAL_POINT}.{IMAGE_EXTENSION}<\/p><\/dd>\n\n<\/dl>\n\n\nWhy to use this plugin?<\/h3>\n\n
\n
How it works<\/h3>\n\n
\n
uploads<\/code> folder<\/li>\nFunctions<\/h3>\n\n
wp_get_attachment_image_src<\/code>.\nIf you used Fly Dynamic Image Resizer<\/em> before, you don't need to replace fly_get_attachment_image_src<\/code> functions in your code - there is a fallback, so you can deactivate Fly Dynamic Image Resizer<\/em> and it will still work.<\/p>\n\n\n
123<\/code> or get_post_thumbnail_id()<\/code> or get_field('my_image')<\/code><\/p><\/li>\n[ 1920, 1080 ]<\/code><\/p><\/li>\nfalse<\/code> or 0<\/code> if you don't want to crop, just rescale,\notherwise pass true<\/code> or 1<\/code> to use focal point crop that is selected in admin media (by default center),\nor pass array with string x-axis and y-axis parameters like [ 'right', 'bottom' ]<\/code>\nor pass array with numeric x-axis and y-axis parameters like [ 0.5, 0.8 ]<\/code>\nor pass string 'face'<\/code> to automatically detect face position (can be exhaustive on server resources)<\/p><\/li>\n<\/ul>\n\narray(\n 'src' => (string) url of the image,\n 'width' => (integer) width in pixels,\n 'height' => (integer) height in pixels\n)\n<\/code><\/pre>\n\nwp_get_attachment_image<\/code>.\nIf you used Fly Dynamic Image Resizer<\/em> before, you don't need to replace fly_get_attachment_image<\/code> functions in your code - there is a fallback, so you can deactivate Fly Dynamic Image Resizer<\/em> and it will still work.<\/p>\n\n\n
123<\/code> or get_post_thumbnail_id()<\/code> or get_field('my_image')<\/code><\/p><\/li>\n[ 1920, 1080 ]<\/code><\/p><\/li>\nfalse<\/code> or 0<\/code> if you don't want to crop, just rescale,\notherwise pass true<\/code> or 1<\/code> to use focal point crop that is selected in admin media (by default center),\nor pass array with string x-axis and y-axis parameters like [ 'right', 'bottom' ]<\/code>\nor pass array with numeric x-axis and y-axis parameters like [ 0.5, 0.8 ]<\/code>\nor pass string 'face'<\/code> to automatically detect face position (can be exhaustive on server resources)<\/p><\/li>\nretina<\/code> allows you to automatically generate srcset for @2x<\/code> retina devices\nExample: array( 'retina' => true, 'alt' => 'Custom alt text', 'class' => 'my-class', 'id' => 'my-id' )<\/code><\/p><\/li>\n<\/ul>\n\n<img src=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/1234\/your-image-500x500-f50_50.jpg\" width=\"500\" height=\"500\" alt=\"Alt text\">\n<\/code><\/pre>\n\n\n
123<\/code> or get_post_thumbnail_id()<\/code> or get_field('my_image')<\/code><\/p><\/li>\nkey => value<\/code> pair\nwhere key<\/code> means breakpoint<\/strong> \nand value<\/code> is array of width, height, crop and alternative_attachment_id<\/strong>\nExample: [ 767 => [ 767, 400, 1, 987 ], 9999 => [ 1200, 500, 1 ] ]<\/code>\nThis will generate <source media=\"(max-width:767px)\" srcset=\"image987_767x400.jpg\"><\/code>\nand <source media=\"(max-width:9999px)\" srcset=\"image_1200x500.jpg\"><\/code>\nand <source media=\"(min-width:10000px)\" srcset=\"image.jpg\"><\/code>\nIf you will provide also key 0<\/code> then it will replace <img><\/code>.<\/p><\/li>\nretina<\/code> allows you to automatically generate srcset for @2x<\/code> retina devices\nExample: array( 'retina' => true, 'alt' => 'Custom alt text', 'class' => 'my-class', 'id' => 'my-id' )<\/code><\/p><\/li>\n<\/ul>\n\necho bis_get_attachment_picture(\n get_post_thumbnail_id(),\n [\n 375 => [ 375, 500, 1, 987 ],\n 575 => [ 575, 500, 1, 987 ],\n 767 => [ 767, 500, 1, 987 ],\n 991 => [ 991, 500, 1 ],\n 1199 => [ 1199, 500, 1 ],\n 1399 => [ 1399, 500, 1 ],\n 1600 => [ 1600, 500, 1 ],\n 1920 => [ 1920, 500, 1 ],\n 2560 => [ 2560, 500, 1 ],\n 3440 => [ 3440, 500, 1 ],\n 3840 => [ 3840, 500, 1 ],\n ]\n);\n<\/code><\/pre>\n\n<picture>\n <source media=\"(max-width:375px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/987\/your-image-375x500-f50_50.jpg\">\n <source media=\"(max-width:575px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/987\/your-image-575x500-f50_50.jpg\">\n <source media=\"(max-width:767px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/987\/your-image-767x500-f50_50.jpg\">\n <source media=\"(max-width:991px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/123\/your-image-991x500-f50_50.jpg\">\n <source media=\"(max-width:1199px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/123\/your-image-1199x500-f50_50.jpg\">\n <source media=\"(max-width:1399px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/123\/your-image-1399x500-f50_50.jpg\">\n <source media=\"(max-width:1600px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/123\/your-image-1600x500-f50_50.jpg\">\n <source media=\"(max-width:1920px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/123\/your-image-1920x500-f50_50.jpg\">\n <source media=\"(max-width:2560px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/123\/your-image-2560x500-f50_50.jpg\">\n <source media=\"(max-width:3440px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/123\/your-image-3440x500-f50_50.jpg\">\n <source media=\"(max-width:3840px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/bis-images\/123\/your-image-3840x500-f50_50.jpg\">\n <source media=\"(min-width:3841px)\" srcset=\"https:\/\/web.com\/wp-content\/uploads\/2022\/11\/your-image.jpg\">\n <img width=\"4000\" height=\"2000\" src=\"https:\/\/web.com\/wp-content\/uploads\/2022\/11\/your-image.jpg\" alt=\"Some alt\" loading=\"lazy\">\n<\/picture>\n<\/code><\/pre>\n\nThere is no fallback for
fly_add_image_size<\/code> function<\/h3>\n\nfly_add_image_size<\/code> functions from your code.\nYou can create your own variables for sizes if you need it, like<\/p>\n\ndefine( 'MY_CUSTOM_SIZE', [ 1000, 200 ] );\n<\/code><\/pre>\n\necho bis_get_attachment_image( get_post_thumbnail_id(), MY_CUSTOM_SIZE );\n<\/code><\/pre>\n\nSupport other extensions than JPG, PNG and WEBP<\/h3>\n\n
wp-config.php<\/code> or in your functions.php<\/code><\/p>\n\ndefine( 'BIS_ALLOWED_MIME_TYPES', array( 'image\/jpeg', 'image\/png', 'any_other\/mime_type' ) );\n<\/code><\/pre>\n\nGet selected image focal point<\/h3>\n\n
$focal_point = sanitize_focal_point( get_post_meta( get_post_thumbnail_id(), 'focal_point', true ) );\n<\/code><\/pre>\n\narray( 0.5, 0.8 )\n<\/code><\/pre>\n\n\n
\n
Images stored location<\/h3><\/dt>\n
3.9<\/h4>\n\n
\n
3.8<\/h4>\n\n
\n
3.7<\/h4>\n\n
\n
3.6<\/h4>\n\n
\n
3.5<\/h4>\n\n
\n
3.4<\/h4>\n\n
\n
3.3<\/h4>\n\n
\n
3.2<\/h4>\n\n
\n
3.1<\/h4>\n\n
\n
3.0<\/h4>\n\n
\n
2.0<\/h4>\n\n
\n
1.9<\/h4>\n\n
\n
1.8<\/h4>\n\n
\n
1.7<\/h4>\n\n
\n
1.6<\/h4>\n\n
\n
1.5<\/h4>\n\n
\n
1.4<\/h4>\n\n
\n
1.3<\/h4>\n\n
\n
1.2<\/h4>\n\n
\n
1.1<\/h4>\n\n
\n
1.0<\/h4>\n\n
\n