Laravel Thumbnail Generator
Package for uploading the image and saving that image along with it's thumbnail.
What does it do ?
- Uploads Image
- Make its thumbnail i.e low quality, resized version of its parent image
Why use thumbnails ?
The small file size of thumbnails makes it possible for website designers to offer visitors a lot of content immediately without increasing the loading time of the page. Also why use full glory of that image if you just have to crunched it up to tiny space... Use thumbnail.
Installation
Run Composer Require Command
$ composer require drh2so4/thumbnail
Use thumbnail trait to your model
<?php
namespace App;
use drh2so4\Thumbnail\Traits\thumbnail;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
use Thumbnail;
protected $fillable = ['image'];
}
This model consists of following methods :-
- makeThumbnail
- thumbnail
- uploadImage
- hasThumbnail
- thumbnailCount
- imageDetail
- hardDelete
Usages
Package utilizes it's trait method, let us guide you to use that
makeThumbnail
This method is responsible for actually uploading the image and making its thumbnail.
public function store(Request $request)
{
$image = Image::create($this->validateData());
$image->makeThumbnail('image'); //This handles uploading image and storing it's thumbnail
return redirect('/imageUpload');
}
Same can go with update method.
thumbnail
Well, we created our thumbnail but how to use it, let me guide through that When we uploaded image with name suppose "batman". Image is upload with name batman-current_time_instant i.e (batman-1521549.jpg).
What about thumbnail... well thumbnail uses it's parent image name followed by -size i.e batman-1521549-medium-jpg, batman-1521549-small.jpg
How to make thumbnail ?
There are the options you can have for making thumbnails :-
- Default Option
- Universal Custom Thumbnails
- Specfic Custom Thumbnails
Default Option
you can just call the following and the packages will handle the rest
$image->makeThumbnail('image'); //Here the first parameter is image attribute name saved in db
Note : if the attribute dedicated for storing image is named 'image' you don't have to pass image attribute name jusr use $image->makeThumbnail();
Universal Custom Thumbnails
here you should mention the thumbnails that you want to be applied on every case. when you publish thumbnail.php config file you will find 'thumbnails' property where you can mention your custom thumbnails
/*
|--------------------------------------------------------------------------
| Custom Thumbnail Creation
|--------------------------------------------------------------------------
| Uncomment to create...
*/
/* "thumbnails" => [
[
"thumbnail-name" => "medium",
"thumbnail-width" => 800,
"thumbnail-height" => 600,
"thumbnail-quality" => 60
],
[
"thumbnail-name" => "small",
"thumbnail-width" => 400,
"thumbnail-height" => 300,
"thumbnail-quality" => 30
]
] */
Note: This will override default option
Specfic Custom Thumbnails
Suppose you have applied Universal Custom Thumbnails but need to have changes for specific image field then you can pass array of custom requirements :
$thumbnails = [
'storage' => 'customs/embed',
'width' => '600',
'height' => '400',
'quality' => '70',
'thumbnails' => [
[
'thumbnail-name' => 'customSmall',
'thumbnail-width' => '300',
'thumbnail-height' => '200',
'thumbnail-quality' => '50'
]
]
];
$image->makeThumbnail('image', $thumbnails);
How about multiple image uploads
If you are performing multiple image upload at once pass image key to thumbnail array. here $img is one of the image in chunk of images passed
// Controller Store Method
public function store(Request $request)
{
$image = Image::create(['images'=>$request->images]);
foreach($request->images as $img)
{
$this->multipleImageUpload($image,$img);
}
}
// Multiple Image Upload
private function multipleImageUpload($image, $img)
{
$multiple = [
'storage' => 'custom_test/folder/another_folder/image',
'width' => '600',
'height' => '400',
'quality' => '70',
'image' => $img,
'thumbnails' => [
[
'thumbnail-name' => 'small',
'thumbnail-width' => '300',
'thumbnail-height' => '200',
'thumbnail-quality' => '50'
]
]
];
$image->makeThumbnail('image', $multiple);
}
How to use thumbnail ?
Just call as following
// Here the first parameter 'image' is the name of sttribute that is saved in db for image
@foreach ($images as $image)
<img src="{{asset($image->thumbnail('image','small'))}}"> // For small thumbnail
<img src="{{asset($image->thumbnail('image','medium'))}}"> // For medium thumbnail
@endforeach
if you are using custom thumbnail configured from config file just call as follows
// Here the first parameter 'image' is the name of sttribute that is saved in db for image
// Second parameter is the name of thumbnail that you gave in 'thumbnail-name' in the config file on custom thumbnail field called 'thumbnails'
@foreach ($images as $image)
<img src="{{asset($image->thumbnail('image','small'))}}"> // For small thumbnail
<img src="{{asset($image->thumbnail('image','medium'))}}"> // For medium thumbnail
@endforeach
Notice that parameter of function thumbnail is string same as value given for "thumbnail-name" in config file.
Thumbnail's image property is predefined but if you wish to change that publish it's config file thumbnail.php
php artisan vendor:publish --tag=thumbnail-config
Image Property
You can obtaing the detail image property by using method imageDetail($image,$size)
// imageDetail method takes two parameter
// Model image attribute name (Mandatory)
// If you want thumbnail property pass its size (optional)
$image->imageDetail('image'); // Parent Image Detail Property
$image->imageDetail('image','small') // Small thumbnail related to parent image
What Image Property/Detail Gives
Default Thumbnail Image Properties
Property | Return Type | Description | Example |
---|---|---|---|
image | string | Image path stored in DB | $image->imageDetail('image')->image |
name | string | Image Stored Name (without extension) | $image->imageDetail('image')->name |
fullname | string | Image Stored Name (with extension) | $image->imageDetail('image')->fullname |
extension | string | Image Extension Name | $image->imageDetail('image')->extension |
path | string | Image Storage Path | $image->imageDetail('image')->path |
directory | string | Image Stored Directory | $image->imageDetail('image')->directory |
location | string | Image Full Location Path | $image->imageDetail('image')->location |
property | array | Image Property array | $image->imageDetail('image')->property |
Image Property array ($image->imageDetail('image')->property)
Property | Return Type | Description | Example |
---|---|---|---|
real_name | string | Image Real Name (without timestamp and size label) | $image->imageDetail('image')->property->name |
size | integer | Image Storage Size | $image->imageDetail('image')->property->fullname |
directory | string | Image Stored Directory | $image->imageDetail('image')->property->directory |
location | string | Image Full Location Path | $image->imageDetail('image')->property->location |
has_thumbnail | boolean | Image's Thumbnail Check | $image->imageDetail('image')->property->has_thumbnail |
thumbnail_count | integer | Image Thumbnail Count | $image->imageDetail('image')->property->thumbnail_count |
thumbnails | array | Return all thumbnail Detail | $image->imageDetail('image')->property->thumbnails |
Image Thumbnail Property
Property | Return Type | Description |
---|---|---|
image | string | Thumbnail Name |
real_name | string | Thumbnail Real Name (without timestamp and size label) |
size | integer | Thumbnail Storage Size |
created_date | Carbon | Thumbnail Created Date |
path | string | Thumbnail Storage Path |
directory | string | Thumbnail Stored Directory |
location | string | Thumbnail Full Location Path |
Check if image has thumbnail
$image->hasThumbnail('image'); // Check for any availabe thumbnail
$image->hasThumbnail('image','small'); // Second paremater is thumbnail size check
Obtain Image Thumbnail Count
$image->thumbnailCount('image');
Hard Delete Image with Thumbnails
$image->hardDelete('image'); // First parameter is db attribute name for image
Hard Delete Image with Thumbnails adn its parent
$image->hardDeleteWithParent('image'); // First parameter is db attribute name for image
Upload Only Umage
$solo_image = [
'storage' => 'solo',
'width' => '600',
'height' => '300',
'quality' => '70',
];
$image->uploadImage('image', $solo_image); // Second Parameter is not necessary if default settings is to be applied
// OR
$image->uploadImage('image'); // Image Upload with default setting
Our config file looks like follows :-
<?php
return [
/*
|--------------------------------------------------------------------------
| Thumbnail Feature
|--------------------------------------------------------------------------
|
| This option defines whether to use Package's Thumbnail feature or not
| Default option is true
|
*/
'thumbnail' => true,
/*
|--------------------------------------------------------------------------
| Thumbnail Qualities
|--------------------------------------------------------------------------
|
| These options are default post image and its thumbnail quality
|
|
*/
'image_quality' => 80,
'medium_thumbnail_quality' => 60,
'small_thumbnail_quality' => 30,
/*
|--------------------------------------------------------------------------
| Default Image Fit Size
|--------------------------------------------------------------------------
|
| These options is default post imahe height and width fit size
|
|
*/
'img_width' => 1000,
'img_height' => 800,
'medium_thumbnail_width' => 800,
'medium_thumbnail_height' => 600,
'small_thumbnail_width' => 400,
'small_thumbnail_height' => 300,
/*
|--------------------------------------------------------------------------
| Image and Thumbnail Storage Path
|--------------------------------------------------------------------------
|
| Define your default image storage location along with its thumbnail
|
|
*/
"storage_path" => "uploads",
/*
|--------------------------------------------------------------------------
| Custom Thumbnail Creation
|--------------------------------------------------------------------------
| Uncomment to create...
*/
/* "thumbnails" => [
[
"thumbnail-name" => "medium",
"thumbnail-width" => 800,
"thumbnail-height" => 600,
"thumbnail-quality" => 60
],
[
"thumbnail-name" => "small",
"thumbnail-width" => 400,
"thumbnail-height" => 300,
"thumbnail-quality" => 30
],
] */
];
Feel free to change the values
Default Thumbnail Image Properties
Thumbnail | Width | Height | Quality |
---|---|---|---|
Uploaded Image | 1000 | 800 | 80 |
Medium Thumbnail | 800 | 600 | 60 |
Small Thumbnail | 400 | 300 | 30 |
Todos
- Error Handling
- Image Caching
- Maintainabilty
Package Used
License
MIT
DOCTYPE NEPAL || DR.H2SO4