.idea
/public/plugins
/public/css
+/public/bower
/storage/images
\ No newline at end of file
use Illuminate\Filesystem\Filesystem as File;
use Illuminate\Http\Request;
+use Intervention\Image\Facades\Image as ImageTool;
+use Illuminate\Support\Facades\DB;
use Oxbow\Http\Requests;
use Oxbow\Image;
abort(404);
}
+ /**
+ * Get all images, Paginated
+ * @param int $page
+ * @return \Illuminate\Http\JsonResponse
+ */
+ public function getAll($page = 0)
+ {
+ $pageSize = 25;
+ $images = DB::table('images')->orderBy('created_at', 'desc')
+ ->skip($page*$pageSize)->take($pageSize)->get();
+ foreach($images as $image) {
+ $image->thumbnail = $this->getThumbnail($image, 150, 150);
+ }
+ return response()->json($images);
+ }
+
+ /**
+ * Get the thumbnail for an image.
+ * @param $image
+ * @param int $width
+ * @param int $height
+ * @return string
+ */
+ public function getThumbnail($image, $width = 220, $height = 220)
+ {
+ $explodedPath = explode('/', $image->url);
+ array_splice($explodedPath, 3, 0, ['thumbs-' . $width . '-' . $height]);
+ $thumbPath = implode('/', $explodedPath);
+ $thumbFilePath = storage_path() . $thumbPath;
+ if(file_exists($thumbFilePath)) {
+ return $thumbPath;
+ }
+
+ //dd($thumbFilePath);
+ $thumb = ImageTool::make(storage_path() . $image->url);
+ $thumb->fit($width, $height);
+ if(!file_exists(dirname($thumbFilePath))) {
+ mkdir(dirname($thumbFilePath), 0775, true);
+ }
+ $thumb->save($thumbFilePath);
+ return $thumbFilePath;
+ }
+
/**
* Handles image uploads for use on pages.
* @param Request $request
public function upload(Request $request)
{
$imageUpload = $request->file('file');
- $name = $imageUpload->getClientOriginalName();
+ $name = str_replace(' ', '-', $imageUpload->getClientOriginalName());
$imagePath = '/images/' . Date('Y-m-M') . '/';
$storagePath = storage_path(). $imagePath;
$fullPath = $storagePath . $name;
$this->image->name = $name;
$this->image->url = $imagePath . $name;
$this->image->save();
- return response()->json(['link' => $this->image->url]);
+ return response()->json($this->image);
}
Route::post('/upload/image', 'ImageController@upload');
+Route::get('/images/all', 'ImageController@getAll');
+Route::get('/images/all/{page}', 'ImageController@getAll');
Route::get('/images/{any}', 'ImageController@getImage')->where('any', '.*');
Route::get('/', function () {
class Image extends Model
{
- //
+ public function getFilePath()
+ {
+ return storage_path() . $this->url;
+ }
}
display: block;
width: 100%;
font-size: 1.4em;
+}
+
+.overlay {
+ background-color: rgba(0, 0, 0, 0.2);
+ position: fixed;
+ display: block;
+ z-index: 95536;
+ width: 100%;
+ height: 100%;
+ min-width: 100%;
+ min-height: 100%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+#image-manager {
+ background-color: #EEE;
+ max-width: 90%;
+ max-height: 90%;
+ width: 90%;
+ height: 90%;
+ margin: 2% 5%;
+ //border: 2px solid $primary;
+ border-radius: 4px;
+ box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
+ overflow: hidden;
+ .image-manager-display img {
+ width: 150px;
+ height: 150px;
+ display: inline-block;
+ margin: $-s 0 0 $-s;
+ cursor: pointer;
+ }
+}
+.image-manager-left {
+ background-color: #FFF;
+ height: 100%;
+ width: 100%;
+ text-align: left;
+ .image-manager-display {
+ height: 75%;
+ width: 100%;
+ text-align: left;
+ overflow-y: scroll;
+ }
+}
+
+.image-manager-title {
+ font-size: 2em;
+ text-align: left;
+ margin: 0 $-m;
+ padding: $-xl $-m;
+ color: #666;
+ border-bottom: 1px solid #DDD;
+}
+
+.image-manager-dropzone {
+ background-color: lighten($primary, 40%);
+ height: 25%;
+ text-align: center;
+ font-size: 2em;
+ line-height: 2em;
+ padding-top: $-xl*1.2;
+ color: #666;
+ border-top: 2px solid $primary;
}
\ No newline at end of file
@extends('base')
@section('head')
- <link rel="stylesheet" href="/plugins/css/froala_editor.min.css">
- <link rel="stylesheet" href="/plugins/css/froala_style.min.css">
- <script src="/plugins/js/froala_editor.min.js"></script>
+ <script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script>
+ <script src="/bower/dropzone/dist/min/dropzone.min.js"></script>
+ <script src="/js/image-manager.js"></script>
@stop
@section('content')
@include('pages/form', ['model' => $page])
</form>
+ <section class="overlay" style="display:none;">
+ <div id="image-manager">
+ <div class="image-manager-left">
+ <div class="image-manager-header">
+ <button type="button" class="button neg float right" data-action="close">Close</button>
+ <div class="image-manager-title">Image Library</div>
+ </div>
+ <div class="image-manager-display">
+ </div>
+ <form action="/upload/image" class="image-manager-dropzone">
+ {{ csrf_field() }}
+ Drag images or click here to upload
+ </form>
+ </div>
+ {{--<div class="sidebar">--}}
+
+ {{--</div>--}}
+ </div>
+ </section>
+
<script>
$(function() {
- $('#html').editable({
- inlineMode: false,
- imageUploadURL: '/upload/image',
- imageUploadParams: {
- '_token': '{{ csrf_token() }}'
+ //ImageManager.show('#image-manager');
+
+ tinymce.init({
+ selector: '.edit-area textarea',
+ content_css: '/css/app.css',
+ body_class: 'container',
+ plugins: "autoresize image table textcolor paste link imagetools",
+ content_style: "body {padding-left: 15px !important; padding-right: 15px !important;}",
+ file_browser_callback: function(field_name, url, type, win) {
+ ImageManager.show('#image-manager', function(image) {
+ win.document.getElementById(field_name).value = image.url;
+ if ("createEvent" in document) {
+ var evt = document.createEvent("HTMLEvents");
+ evt.initEvent("change", false, true);
+ win.document.getElementById(field_name).dispatchEvent(evt);
+ } else {
+ win.document.getElementById(field_name).fireEvent("onchange");
+ }
+ });
}
});
+
+
+
});
</script>
@stop
\ No newline at end of file
projects / bookstack / commitdiff