PHPackages dnabeast/bladeimagecrop - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. dnabeast/bladeimagecrop ActiveLibrary[Image & Media](/categories/media) dnabeast/bladeimagecrop ======================= Creates a blade component that grabs an image and resizes it and crops it to match the blade settings. 3.4.16(1mo ago)0224MITPHPPHP ^7.3|^8.0 Since Mar 13Pushed 1mo ago1 watchersCompare [ Source](https://github.com/dnabeast/BladeImageCrop)[ Packagist](https://packagist.org/packages/dnabeast/bladeimagecrop)[ Docs](https://github.com/dnabeast/bladeimagecrop)[ RSS](/packages/dnabeast-bladeimagecrop/feed)WikiDiscussions master Synced 1w ago READMEChangelog (10)Dependencies (15)Versions (41)Used By (0) Blade Image Crop ================ [](#blade-image-crop) About Blade Image Crop 3 ------------------------ [](#about-blade-image-crop-3) Use WebP without the headache. Provide alternate image sizes for your user's preferred display. Reference one image on your server then specify its dimensions in a blade component. All the image work you're too lazy to do but with the ease of a single blade tag. This crops and resizes automatically and creates multiple versions for high DPI devices and new image formats. It then creates the HTML required to display them. It supports - Automatic cropping to a specified aspect ratio and focus point - Multiple files for different DPI - webp with jpeg as a fallback (In a picture tag) - Inline backgrounds that display first on slow connections - Mobile and desktop versions - local AND online images - queuing the image processing Installation ------------ [](#installation) You can install the package via composer: ``` composer require dnabeast/bladeimagecrop ``` You can publish the config file ``` php artisan vendor:publish --provider="DNABeast\BladeImageCrop\BladeImageCropServiceProvider" ``` By default the system is set to use the Laravel public storage path so don't forget to set up ``` php artisan storage:link ``` Or make whatever changes you wish to the storage. (more info below) Upgrade Guide ------------- [](#upgrade-guide) Because it uses the Laravel Http helper this program no longer supports Laravel 6. By default we use Image Magick which comes installed by default on Laravel Forge. There is still the option to switch to GD library by publishing the config file and selecting the GD options. The system now grabs the original src from the public directory OR an URL (rather than the weird workaround needed by the FileStorage system ) The next time you load an image using the blade component it will duplicate your image to a holding directory and remake your resized images. It will only do this once. You can safely remove older versions of files. If you've turned the images\_from\_public\_path to false then it's not going to work any more and you'll have to update your img src attributes. No longer upscales images if the original image is too small. (It allows the browser to do this) Usage ----- [](#usage) ### The easy image tag [](#the-easy-image-tag) #### Only resizing the image [](#only-resizing-the-image) If you want your image to resize to a specific width and not trim the height you may have had your image like so ``` ``` Instead you would put ``` ``` The initial image would be resized and saved to a 300px wide version and a 600px wide version (for hi-res displays) in JPG format. The resulting output would be ``` ``` This will result in ``` 50, // percentage 'offset_y' => 50, ``` If for some mad reason you wanted the default cropping to not be in the centre. ### 'pixel\_device\_ratios' => \['1x', '2x'\] [](#pixel_device_ratios--1x-2x) If you want to support ultra hi def screens you can change this to whatever multipler you want. ie.\['1x', '2x', '4x'\] Or if you don't want any DPI options just set it to \['1x'\] ### 'backgrounds' => true, [](#backgrounds--true) The inline backgrounds can be turned off. If you need to add style tags on your image you may need to turn this off. ### 'text\_labels' => env('BLADE\_CROP\_TEST\_LABELS', false), [](#text_labels--envblade_crop_test_labels-false) If you need to test to make sure the correct image is being displayed turning this to true will write the filename onto the image itself. **Beware:** Any files created with this flag on will keep this label once you turn it off again. The images should be deleted so that they can be recreated. ### 'compress\_held\_image' => env('BLADE\_CROP\_COMPRESS\_HELD\_IMAGE', true) [](#compress_held_image--envblade_crop_compress_held_image-true) The package creates and stores a Held Image that it uses for reference. If the original image vanishes for some reason there is always a source of truth. If this image is not compressed at all we can ensure that it's at least stored as slightly lossy else your storage fills up with lossless images. 'render\_source\_tag\_if\_unavailable' => env('BLADE\_CROP\_RENDER\_SOURCE', false), --------------------------------------------------------------------------------------- [](#render_source_tag_if_unavailable--envblade_crop_render_source-false) When developing if can be useful to see the source tags even when an error has occurred. In production you can turn this off. If you rely on JS to detect image errors turn this off. ie. ``` ``` ### Build Classes [](#build-classes) The default build classes can be switched out here. The keys will be the file types that are created. If you want to replace the way the image files are compressed you can build your own. The class accepts an image string in the constructor and needs to save that to your drive. ``` 'build_classes' => [ //'avif' => 'DNABeast\BladeImageCrop\Builder\IM_AVIFBuilder', 'webp' => 'DNABeast\BladeImageCrop\Builder\IM_WebPBuilder', // 'webp' => 'DNABeast\BladeImageCrop\Builder\GD_WebPBuilder', 'jpg' => 'DNABeast\BladeImageCrop\Builder\IM_JPGBuilder', // 'jpg' => 'DNABeast\BladeImageCrop\Builder\GD_JPGBuilder', // 'jpg' => 'DNABeast\BladeImageCrop\Builder\ShortPixelJPGBuilder', ], ``` The order of keys is the order the files will load in your browser. So if you put JPG first it won't even try to load WebP. ### 'background\_builder' => 'DNABeast\\BladeImageCrop\\BGBuilder' [](#background_builder--dnabeastbladeimagecropbgbuilder) The background builder can also be over written. Currently it takes the images and resizes it to 4px x 4px. It then converts that to base64 and return the style tag with the background info. This is cached by Laravel. If you wanted to (for instance) change this to load the same loading image you can write your own builder and swap it in with the config. Troubleshooting --------------- [](#troubleshooting) **Is the site crashing and you're freaking out?**Sometimes a weird file get through. I've tried my best to get rid of potential crashes but I can never underestimate the ingenuity of fools. If you need to turn off the process there is a config option. ``` 'enabled' => env('BLADE_CROP_ENABLED', false), ``` or set it in your .env ``` BLADE_CROP_ENABLED=false ``` **Are you getting this error?** ``` syntax error, unexpected end of file, expecting "elseif" or "else" or "endif" ``` It probably means you haven't closed the blade component tag. Use one of these solutions. ``` ``` **How about this one?** ``` File not found at path: imageNotFound ``` or the image is appearing as an empty 4x3 aspect rectangle. The original image isn't where you told it. It should be looking in the public path. If you've done something weird to your public path this is a good place to start looking. In your local environment you can check the img's output image path to see the full path that it's looking for the image. **Server failures? 500 errors?** When loading a page of many images or some big images the php service can get overwhelmed. BladeImageCrop does the image processing asynchronously so perhaps try setting up your queue drivers. **Images are showing sideways or upside down** Some images taken on devices that register orientation (smart phones etc) will show the image upright and then display in the browser at the incorrect angle. This is slowly getting fixed by browsers but until then the solution exists only when you're using Image Magick. If Image Magick in installed on your server they will auto align but with only GD there is no current fix for ths issue. You will need to resave this image using your photo processing software of choice. ### Testing [](#testing) ``` vendor/bin/phpunit ``` ### Changelog [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. ### Security [](#security) If you discover any security related issues, please email instead of using the issue tracker. Credits ------- [](#credits) - [Dan Beeston](https://github.com/dnabeast) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. Laravel Package Boilerplate --------------------------- [](#laravel-package-boilerplate) This package was generated using the [Laravel Package Boilerplate](https://laravelpackageboilerplate.com). ### Health Score 49 — FairBetter than 94% of packages Maintenance92 Actively maintained with recent releases Popularity12 Limited adoption so far Community7 Small or concentrated contributor base Maturity70 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~49 days Recently: every ~68 days Total 40 Last Release 38d ago Major Versions 1.0.0 → 2.0.02021-09-10 2.0.11 → 3.0.02022-10-04 PHP version history (3 changes)1.0.0PHP ^7.3 2.0.0PHP ^7.3|^8.0 3.1.0PHP ^7.3|^8.2 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3229763?v=4)[Dan](/maintainers/dnabeast)[@dnabeast](https://github.com/dnabeast) --- Top Contributors [![dnabeast](https://avatars.githubusercontent.com/u/3229763?v=4)](https://github.com/dnabeast "dnabeast (49 commits)") --- Tags dnabeastbladeimagecrop ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/dnabeast-bladeimagecrop/health.svg) ``` [![Health](https://phpackages.com/badges/dnabeast-bladeimagecrop/health.svg)](https://phpackages.com/packages/dnabeast-bladeimagecrop) ``` ### Alternatives [craftcms/cms Craft CMS 3.6k3.7M3.3k](/packages/craftcms-cms)[illuminate/http The Illuminate Http package. 11938.5M7.9k](/packages/illuminate-http)[spatie/laravel-export Create a static site bundle from a Laravel app 679153.2k6](/packages/spatie-laravel-export)[eslazarev/wildberries-sdk Wildberries OpenAPI clients (generated). 293.1k](/packages/eslazarev-wildberries-sdk)[fleetbase/core-api Core Framework and Resources for Fleetbase API 1239.7k25](/packages/fleetbase-core-api)[jasara/php-amzn-selling-partner-api A fluent interface for Amazon's Selling Partner API in PHP 1349.3k1](/packages/jasara-php-amzn-selling-partner-api) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)