Home

Welcome to the laravel-responsive-gallery wiki!

Installation

To use the package you should import it trough composer.

composer require davide-casiraghi/laravel-responsive-gallery

Then install Bricklayer.js and Fancybox 3

npm install bricklayer  
npm install @fancyapps/fancybox  

Load the CSS and JS files

With Laravel

Publish the JS, CSS and IMAGES

It's possible to customize the scss and the js publishing them in your Laravel application.

php artisan vendor:publish

This command will publish in your application this folders:

• /resources/scss/vendor/laravel-responsive-gallery/
• /resources/js/vendor/laravel-responsive-gallery/
• /public/vendor/laravel-responsive-gallery/images/

In this way it's possible for you to customize them.

Run the migration

php artisan migrate

To create the gallery_images table in your database.

Load the JS file

In the resources/js/app.js file of your application require the Bricklayer, Fancybox 3 and responsiveGallery.js files before the Vue object get instanciated:

require('./bootstrap');
window.Vue = require('vue');

window.Bricklayer = require('bricklayer');
require('./vendor/laravel-responsive-gallery/responsiveGallery');
import '@fancyapps/fancybox';

window.myApp = new Vue({  
    el: '#app'
});

In the resources/sass/app.scss file of your application import the scss

@import 'vendor/laravel-responsive-gallery/responsiveGallery';

Then you can run Laravel Mix

npm run dev

Usage

Passing to the getGallery() method any your text variable and the public path, you will get back the same text with all the occurrences of the gallery snippet substituted with the gallery HTML code. If you are using Laravel, you can use the method getGallery() in the show() method of any controller.

$gallery = new ResponsiveGalleryFactory();
$publicPath = public_path("storage");

$body = $gallery->getGallery($body, $publicPath);

Parameters

• src: the subpath of the storage folder that contains the galleries photos.
• column_width: it can be set to this specific values (150, 200, 250, 300, 350, 400). If you need you can add more in the SCSS file.
• gutter: it can be set to this specific values (0, 10, 20, 30, 40, 50).

Then in the Blade view to show the HTML.

{!!$body!!}