Skip to content

Latest commit

 

History

History
433 lines (328 loc) · 14.7 KB

README.md

File metadata and controls

433 lines (328 loc) · 14.7 KB
Raw

Laravel Thumbnails

Stars Downloads StyleCI Build Status Scrutinizer Code Quality CodeFactor License Laravel News MadeWithLaravel.com shield

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

Laravel Thumbnails

Todos

  • Error Handling
  • Image Caching
  • Maintainabilty

Package Used

License

MIT

DOCTYPE NEPAL || DR.H2SO4