Creating Simple Image Galleries in Laravel 5.1

Published on Author craigzearfossLeave a comment

This bundle has code to create simple image galleries in Laravel 5.1 or higher on Ubuntu 14.04. It allows you to upload images and stores the original image along with three other sizes – thumb, medium and large. It stores all of the image information in the database along with things like title, caption, description, alt tag, etc.

The code here assumes the images will be attached to a model named Gallery, but you can attach it to any model you like. You will just need to find-and-replace all instances of “gallery” with your model name. (Make sure you do a case-sensitive replace.)

This is built using Intervention Image, an open source PHP image handling and manipulation library. Included below are the basic steps for installing Image Intervention, but if you want more information visit their website at http://image.intervention.io/.

To use this bundle, install Intervention Image and copy the code from the GitHub repository, modifying them as you need.

It might be nice to make a composer installable package for this but, for the time being, I do not have time to make one.

The files for this can be downloaded at GitHub – craigzearfoss/laravel-image-gallery


Installation

  • Install Intervention Image.
  • Create the gallery_images table by running the the database migration.

    • Copy the file database/migrations/2016_04_25_015344_create_gallery_images.php into your migrations directory database/migrations.
    • If you are using a different model than Gallery, then edit the migration file and find-and-replace ‘galleries’ and ‘gallery’ with your table and model names.
    • Run the migration.
      php artisan migrate
      
  • Copy the variables IMAGE_HOST, IMAGE_DIRECTORY and IMAGE_PATH from .env.example into your .env file and change them as needed.
  • Copy the model app/GalleryImage.php into your app.
  • Copy the request app/Http/Requests/GalleryImageRequest.php into your Requests directory app/Http/Requests.
  • Copy the controller app/Http/Controllers/GalleryImageController.php into your Controllers directory app/Http/Controllers.
  • In your service provider file app/Providers/RouteServiceProvider.php add the following binding in the boot method.

    $router->model('gallery_image', 'App\GalleryImage');
    
  • Add the following routes to your app/routes.php.

    Route::get('gallery/{gallery}/image', ['as' => 'gallery.gallery_image.index', 'uses' => 'GalleryController@galleryImageIndex']);
    Route::post('gallery/{gallery}/image', ['as' => 'gallery.gallery_image.store', 'uses' => 'GalleryController@galleryImageStore']);
    Route::get('gallery/{gallery}/image/create', ['as' => 'gallery.gallery_image.create', 'uses' => 'GalleryController@galleryImageCreate']);
    Route::patch('gallery/{gallery}/image/{gallery_image}', ['as' => 'gallery.gallery_image.update', 'uses' => 'GalleryController@galleryImageUpdate']);
    Route::get('gallery/{gallery}/image/{gallery_image}', ['as' => 'gallery.gallery_image.show', 'uses' => 'GalleryController@galleryImageShow']);
    Route::delete('gallery/{gallery}/image/{gallery_image}', ['as' => 'gallery.gallery_image.destroy', 'uses' => 'GalleryController@galleryImageDestroy']);
    Route::get('gallery/{gallery}/image/{gallery_image}/edit', ['as' => 'gallery.gallery_image.edit', 'uses' => 'GalleryController@galleryImageEdit']);
    
  • Copy the views from resource/views/gallery/gallery_image to your resources/views directory.

Troubleshooting

  • Make sure your that image directory IMAGE_DIRECTORY has the right permissions.

References:

Leave a Reply

Your email address will not be published. Required fields are marked *