Crear un Thumbnail con Laravel 5 y Bootstrap

Ya sabemos como subir y almacenar imágenes pero siempre es útil crear pequeñas imágenes o «thumbnails», ya sea para mostrar productos, fotos de perfil, álbum de fotos, entre otros. hoy aprenderemos como crear un simple thumbnail.

Primero la base de datos, vamos a crear el modelo y la migración.

php artisan make:model Thumbnail

Nota: cuando creamos nuestro modelo con artisan automáticamente Laravel nos crea la migración.

El modelo quedaría:

protected $table = 'thumbnails';
protected $fillable = ['name', 'image'];

Y la migración «create_thumbnails_table» quedaría:

/**
 * Run the migrations.
 *
 * @return void
 */
public function up()
{
   Schema::create('thumbnails', function(Blueprint $table)
   {
      $table->increments('id');
      $table->string('name');
      $table->string('image');
      $table->timestamps();
   });
}

/**
 * Reverse the migrations.
 *
 * @return void
 */
public function down()
{
   Schema::drop('thumbnails');
}

Recuerda instalar tu migración:

php artisan migrate:install

Ahora, vamos a crear el controlador ThumbnailController

php artisan make:controller ThumbnailController

Creamos la ruta que apunte al Controlador:

Route::resource('thumbnail', 'ThumbnailController');

Creamos la vista thumbnailForm con el formulario:

@extends('app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Crear Banner</div>

                <div class="panel-body">

                        {!! Form::open(['route' => 'thumbnail.store', 'method' => 'POST', 'files' => 'true']) !!}
                        <div class="form-group">
                            {!! form::label('name','Nombre')!!}
                            {!! form::text('name',null,['class' => 'form-control']) !!}
                        </div>
                        <div class="form-group">
                            {!! form::label('image','Imagen')!!}
                            {!! form::file('image',null,['class' => 'form-control']) !!}
                        </div>
                        <button type="submit" class="btn btn-default">Guardar Banner</button>
                        {!! Form::close() !!}

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Luego colocamos el llamado a la vista en la función create del controlador:

public function create()
{
    return view('thumbnailForm');
}

Puedes ir viendo que la aplicación va bien, dirígete a la url: nombre_de_tu_aplicacion/thumbnail/create donde se mostrará el siguiente formulario:

Ahora bien, ya tenemos el formulario y la base de datos está perfecta, ahora vamos a subir las imágenes, pero antes que nada sería buenos instalar la librería Intervention.image que nos permite cambiarles el tamaño. Para ello debemos:

En la consola:

composer require intervention/image

Agregar a los Providers en ‘config/app.php‘:

'Intervention\Image\ImageServiceProvider'

Agregar el alias:

//Intervention image
 'Image' => 'Intervention\Image\Facades\Image',

Y por último de nuevo en la consola:

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

Listo, ahora podemos utilizar todas las funciones que nos ofrece, por ahora vamos a usar los métodos save() y resize(). La función store de nuestro controlador, quedaría:

public function store(){
   $file = Input::file('image');
   //Creamos una instancia de la libreria instalada   
   $image = \Image::make(\Input::file('image'));
   //Ruta donde queremos guardar las imagenes
   $path = public_path().'/thumbnails/';

   // Guardar Original
   $image->save($path.$file->getClientOriginalName());
   // Cambiar de tamaño
   $image->resize(240,200);
   // Guardar
   $image->save($path.'thumb_'.$file->getClientOriginalName());
   
   //Guardamos nombre y nombreOriginal en la BD
   $thumbnail = new Thumbnail();
   $thumbnail->name = Input::get('name');
   $thumbnail->image = $file->getClientOriginalName();
   $thumbnail->save();
   
   return redirect()->route('thumbnail.index');
}

Perfecto, ya podemos guardarlas, ahora vamos a pasar toda la información a la vista, la función index del controlador quedaría de la siguiente manera:

<?php namespace App\Http\Controllers;

use Illuminate\Support\Facades\Input;
use App\Http\Requests;
use App\Thumbnail;

class ThumbnailController extends Controller {

	/**
	 * Display a listing of the resource.
	 *
	 * @return Response
	 */
	public function index()
	{
        $thumbnails = Thumbnail::all();
        return view('thumbnails', compact('thumbnails'));
	}

Excelente, ahora a crear la vista donde mostraremos el thumbnail. Para ello utilizaremos uno de los componentes que nos ofrece bootstrap, bootstrap-thumbnail:

@extends('app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">Listado
                        <a href="{{url('thumbnail/create')}}" class="btn-xs btn-primary pull-right" role="button">Agregar</a>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            @foreach($thumbnails as $thumbnail)
                            <div class="col-sm-6 col-md-4">
                                <div class="thumbnail">
                                    <img src="thumbnails/{{$thumbnail->image}}" alt="{{$thumbnail->name}}">
                                    <div class="caption">
                                        <h3>{{$thumbnail->name}}</h3>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Nota: la plantilla extiende de nuestra vista «app» que viene por defecto.

Listo, luego de cargar varias imágenes veremos nuestro resultado. Url: nombre_de_tu_aplicacion/thumbnail/