Laravel Image Manager

A little Image Manager to use in forms and API's.

This is the stable version for Laravel 5.x.

Requirements

1. Jquery
2. Bootstrap 3
3. Laravel 5.*

The package will insert colorbox JS and Plupload JS, make sure you import colorbox.css to your templates.

Installation

In your composer.json file add:

"joselfonseca/image-manager" : "2.1.*"

Run composer update

Add the service provider

'Joselfonseca\ImageManager\ImageManagerServiceProvider'

Then publish the package assets, config and migration.

php artisan vendor:publish --provider=Joselfonseca\ImageManager\ImageManagerServiceProvider --force --tag=IMpublic
php artisan vendor:publish --provider=Joselfonseca\ImageManager\ImageManagerServiceProvider --force --tag=IMconfig
php artisan vendor:publish --provider=Joselfonseca\ImageManager\ImageManagerServiceProvider --force --tag=IMmigration

Migrate the database

php artisan migrate

Finally reference the assets in the layout

<link href="{{asset('vendor/image-manager/css/imagemanager.css')}}" rel="stylesheet">
<link href="{{asset('vendor/image-manager/vendors/colorbox/colorbox.css')}}" rel="stylesheet">
<script src="{{asset('vendor/image-manager/js/imageManager.min.js')}}"></script>

Usage

Make sure you have a field in your database to store the image id and inside your form add

<label for='titulo'>Image</label>
{!! ImageManager::getField(['text' => 'Select the File', 'class' => 'btn btn-primary', 'field_name' => 'your_field_name', 'default' => '12']) !!}
// the default parameter is the image id in your table for your resource.

Parameters

    - text: the text for the button
    - class: the class to apply to the button
    - field_name: the field name for the image selected, this creates a hidden input with the field_name to get the id of the image selected when you post the form
    - default: the id for the image to be selected by default

Multiple Images

To add a multi images selector, inside your form add

    <h2>Slider Home</h2>
    {!! ImageManager::getMultiField(['field_name' => 'images', 'default' => $model->slides->pluck('file', 'file')->toArray()]) !!}

Parameters

    - field_name: the field name for the image selected, this creates a hidden input with the field_name to get the id of the image selected when you post the form
    - default: array of id's for the images to be added by default

This will create hidden inputs with the name as an array, how you save the images is up to you.

How to render an image?

To render an image you can add to the src the route route('showthumb', $id)

// this will show a thumb
<img src="{{route('showthumb', $default)}}" />
// this the full image
<img src="{{route('media', $default)}}" />
// this the full image resized by with
<img src="{{route('media', ['id' => $default, 'width' => 300])}}" />
// this the full image resized by with and height
<img src="{{route('media', ['id' => $default, 'width' => 300, 'heigth' => 300])}}" />
// this the full image resized by with and height in the canvas, not the image
<img src="{{route('media', ['id' => $default, 'width' => 300, 'heigth' => 300, 'canvas' => 'canvas'])}}" />

API

You can use the following methods with out the image selector modal.

ImageManager::doUpload(); //this method receives the input file like Input::file('file')
ImageManager::resize($id, $width = null, $height = null); //this method will render the image according to the parameters
ImageManager::imageInfo($id); //this method will return an instance of Joselfonseca\ImageManager\Models\ImageManagerFiles which is the eloquent model for the image_manager_files table for the id given.

Please report Bugs!

This is a new component that needs PR and bug report, use the repo to raise any issues.

To Do

    1. Unit Testing
    2. Image resizing and cropping
    3. Anything else cool!

Thanks!

I would like to thank anyone who uses the component and report bugs. This will always be a work in progress.