Media Manager Extension for Laravel

Laravel media manager with multi-users & multi-theme support.

Requirements

• php >= 5.5
• Laravel 5
• requires intervention/image (to make thumbs, crop and resize images).

Notes

• For laravel 5.2 and laravel 5.3, please set 'middlewares' => ['web', 'auth'], in config/mediamanager.php

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require bsadnu/laravel-mediamanager "*"

or add

"bsadnu/laravel-mediamanager": "*"

to the require section of your composer.json.

Edit config/app.php :

Add service providers

    Bsadnu\Laravelmediamanager\LaravelMediamanagerServiceProvider::class,
    Intervention\Image\ImageServiceProvider::class,

And add class aliases

    'Image' => Intervention\Image\Facades\Image::class,

Code above is for Laravel 5.1. In Laravel 5.0 should leave only quoted class names.

Afterthat, publish the package's config and assets :

    php artisan vendor:publish --tag=mediamanager_config
    php artisan vendor:publish --tag=mediamanager_public

Ensure that the files & images directories (in config/mediamanager.php) are writable by your web server!

Usage

WYSIWYG Editor Integration:

Option 1: CKEditor

1. Install CKEditor in any prefferable way

2. Modify the views

   Sample 1 - Replace by ID:

   <script src="/vendor/path/to/ckeditor/ckeditor.js"></script>
   <textarea id="my-editor" name="content" class="form-control">{!! old('content', $content) !!}</textarea>
   <script>
     CKEDITOR.replace( 'my-editor', {
       filebrowserImageBrowseUrl: '/laravel-mediamanager?type=Images',
       filebrowserImageUploadUrl: '/laravel-mediamanager/upload?type=Images&_token={{csrf_token()}}',
       filebrowserBrowseUrl: '/laravel-mediamanager?type=Files',
       filebrowserUploadUrl: '/laravel-mediamanager/upload?type=Files&_token={{csrf_token()}}'
     });
   </script>

   Sample 2 - With JQuery Selector:

   <script src="/vendor/path/to/ckeditor/ckeditor.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
   <script src="/vendor/path/to/ckeditor/adapters/jquery.js"></script>
   <textarea name="content" class="form-control my-editor">{!! old('content', $content) !!}</textarea>
   <script>
     $('textarea.my-editor').ckeditor({
       filebrowserImageBrowseUrl: '/laravel-mediamanager?type=Images',
       filebrowserImageUploadUrl: '/laravel-mediamanager/upload?type=Images&_token={{csrf_token()}}',
       filebrowserBrowseUrl: '/laravel-mediamanager?type=Files',
       filebrowserUploadUrl: '/laravel-mediamanager/upload?type=Files&_token={{csrf_token()}}'
     });
   </script>

Option 2: TinyMCE4

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<textarea name="content" class="form-control my-editor">{!! old('content', $content) !!}</textarea>
<script>
  var editor_config = {
    path_absolute : "/",
    selector: "textarea",
    plugins: [
      "advlist autolink lists link image charmap print preview hr anchor pagebreak",
      "searchreplace wordcount visualblocks visualchars code fullscreen",
      "insertdatetime media nonbreaking save table contextmenu directionality",
      "emoticons template paste textcolor colorpicker textpattern"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
    relative_urls: false,
    file_browser_callback : function(field_name, url, type, win) {
      var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
      var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

      var cmsURL = editor_config.path_absolute + 'laravel-mediamanager?field_name=' + field_name;
      if (type == 'image') {
        cmsURL = cmsURL + "&type=Images";
      } else {
        cmsURL = cmsURL + "&type=Files";
      }

      tinyMCE.activeEditor.windowManager.open({
        file : cmsURL,
        title : 'Mediamanager',
        width : x * 0.8,
        height : y * 0.8,
        resizable : "yes",
        close_previous : "no"
      });
    }
  };

  tinymce.init(editor_config);
</script>

Independent use

If you are going to use mediamanager independently, meaning set the value of an input to selected photo/file url, follow this structure:

1. Create a button, input, and image preview holder if you are going to choose images.

   Specify the id to the input and image preview by data-input and data-preview.

       <div class="input-group">
         <span class="input-group-btn">
           <a id="mediamanager" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
             <i class="fa fa-picture-o"></i> Choose
           </a>
         </span>
         <input id="thumbnail" class="form-control" type="text" name="filepath">
       </div>
       <img id="holder" style="margin-top:15px;max-height:100px;">

2. Import mediamanager.js(run php artisan vendor:publish if you need).

       <script src="/vendor/laravel-mediamanager/js/mediamanager.js"></script>

3. Init filemanager with type. (requires jQuery)

       $('#mediamanager').filemanager('image');

   or

       $('#mediamanager').filemanager('file');

License

laravel-mediamanager is released under the MIT License. See the bundled LICENSE for details.