Laravel 7.x and 6.x - image upload with create thumbnail image example

May 2, 2017 | Category : Laravel 5 Laravel PHP

In this example you can learn how to generate thumbnail image when upload image in laravel project. we always like to make very smooth load our web page. But if you have many images on your web page it can take time to load page on browser, as specially when image is large size. But if you have small size of image(thumbnail) like 300X300 or 100X100 etc. It will save time to load our page. That make load quick our web page. So in this tutorial we learn how to create thumbnail image using laravel folklore image package. folklore image package provide us to make resize image, thumbnail, greyscale image etc.

You have to follow tutorial and you will generate thumbnail picture for your laravel 5 application.

Installation Laravel 5:

we will start from scratch so, if you haven't laravel 5 application setup then we have to get fresh laravel 5 application. So run bellow command and get clean fresh laravel 5 application.

composer create-project --prefer-dist laravel/laravel blog

Install folklore image package:

In this step we will install Folkloreatelier/laravel-image for generate thumbnail image. this package through we can generate thumbnail image for our project. so first fire bellow command in terminal:

composer require folklore/image

Now we need to add provider path and alias path in config/app.php file so open that file and add bellow code.

config/app.php

return [

......

$provides => [

......

......,

'Folklore\Image\ImageServiceProvider',

],

$aliases => [

.....

.....,

'Image' => 'Folklore\Image\Facades\Image',

]

]

Create Route:

now we require to add routes and controller file so first add bellow route in your routes.php file.

routes/web.php

Route::get('thumbnailImage', 'ImageController@thumbnailImage');

Route::post('thumbnailImagePost',['as'=>'thumbnailImagePost','uses'=>'ImageController@thumbnailImagePost']);

Create ImageController:

Now require to create new ImageController for image uploading and create thumbnail image so first run bellow command :

php artisan make:controller ImageController

After this command you can find ImageController.php file in your app/Http/Controllers directory. open ImageController.php file and put bellow code in that file.

app/Http/Controllers/ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

use Image;

class ImageController extends Controller

{

public function thumbnailImage()

{

return view('thumbnailImage');

}

public function thumbnailImagePost(Request $request)

{

$this->validate($request, [

'title' => 'required',

'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',

]);

$image = $request->file('image');

$input['imagename'] = time().'.'.$image->getClientOriginalExtension();

$destinationPath = public_path('images/thumbnail');

$img = Image::make($image->getRealPath(),array(

'width' => 100,

'height' => 100,

'grayscale' => false

));

$img->save($destinationPath.'/'.$input['imagename']);

$destinationPath = public_path('images');

$image->move($destinationPath, $input['imagename']);

/*Code for create new row in database*/

return back()

->with('success','Image Upload successful')

->with('imageName',$input['imagename']);

}

}

Create View File:

Ok, now we will create thumbnailImage.blade.php file for photo upload form and manage error message and also success message. So first create thumbnailImage.blade.php file and put bellow code:

resources/views/thumbnailImage.blade.php

@extends('layouts.app')

@section('content')

<div class="container">

<h1>Thumbnail Image Uploading Demo</h1>

@if (count($errors) > 0)

<div class="alert alert-danger">

<strong>Whoops!</strong> There were some problems with your input.<br><br>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

@if ($message = Session::get('success'))

<div class="alert alert-success alert-block">

<button type="button" class="close" data-dismiss="alert">×</button>

<strong>{{ $message }}</strong>

</div>

<div class="row">

<div class="col-md-12">

<strong>Original Image:</strong>

<br/>

<img src="/images/{{ Session::get('imageName') }}" width="500px" />

</div>

<div class="col-md-12">

<strong>Thumbnail Image:</strong>

<br/>

<img src="/images/thumbnail/{{ Session::get('imageName') }}" />

</div>

</div>

@endif

{!! Form::open(array('route' => 'thumbnailImagePost','enctype' => 'multipart/form-data')) !!}

<div class="row">

<div class="col-md-4">

<strong>Add Title:</strong>

{!! Form::text('title', null,array('class' => 'form-control','placeholder'=>'Add Title')) !!}

</div>

<div class="col-md-12">

<strong>Add Image:</strong>

{!! Form::file('image', array('class' => 'image')) !!}

</div>

<div class="col-md-12">

<br/>

<button type="submit" class="btn btn-success">Upload Image</button>

</div>

</div>

{!! Form::close() !!}

</div>

@endsection

Create Upload directory:

At last we require to create images folder and inside images folder we need to create thumbnail folder. So make sure permission also. Now you can run your this example and Enjoy!.