Permalink
Browse files

Admin Banners - Crop image

  • Loading branch information...
bpocallaghan committed Jan 26, 2018
1 parent 03a267a commit 93d1e7fcffabbeeac614fa24c7c84c94c8d4b4d8
@@ -150,6 +150,9 @@ public function uploadBanner(
$path = upload_path_images($path);
// original
$imageTmp->save($path . $name . '-o.' . $extension);
// save the image
$image = $imageTmp->fit($size['o'][0], $size['o'][1])->save($path . $filename);
@@ -0,0 +1,82 @@
<?php
namespace App\Http\Controllers\Admin\Photos;
use Image;
use App\Models\Banner;
use App\Http\Requests;
use App\Http\Controllers\Admin\AdminController;
class CropResourceController extends AdminController
{
private $LARGE_SIZE = [800, 800];
private $THUMB_SIZE = [400, 400];
/**
* @param $photoable
* @return this
*/
private function showCropper($photoable)
{
return $this->view('photos.crop_resource')->with('photoable', $photoable);
}
/**
* @param Banner $banner
* @return this
*/
public function showBanner(Banner $banner)
{
return $this->showCropper($banner);
}
/**
* Crop a photo
* @return \Illuminate\Http\JsonResponse
*/
public function cropPhoto()
{
$photoable = input('photoable_type')::find(input('photoable_id'));
// if relationship not found
if (!$photoable) {
return json_response_error('Whoops', 'We could not find the photoable.');
}
// get the large and thumb sizes
if (isset($photoable::$LARGE_SIZE)) {
$largeSize = $photoable::$LARGE_SIZE;
$thumbSize = $photoable::$THUMB_SIZE;
}
else {
$largeSize = $this->LARGE_SIZE;
$thumbSize = $this->THUMB_SIZE;
}
// open file image resource
$path = upload_path('images');
$originalImage = Image::make($photoable->original_url);
// get the crop data
$x = intval(input('x'));
$y = intval(input('y'));
$width = intval(input('width'));
$height = intval(input('height'));
// crop image on cropped area
$imageTmp = $originalImage->crop($width, $height, $x, $y);
// resize the image to large size
$imageTmp->resize($largeSize[0], null, function ($constraint) {
$constraint->aspectRatio();
})->save($path . $photoable->image);
// resize the image to thumb size
$imageTmp->resize($thumbSize[0], null, function ($constraint) {
$constraint->aspectRatio();
})->save($path . $photoable->image_thumb);
return json_response('success');
}
}
@@ -19,6 +19,10 @@ class Banner extends TitanCMSModel
protected $dates = ['active_form', 'active_to'];
public static $LARGE_SIZE = [1920, 500];
public static $THUMB_SIZE = [576, 150];
/**
* Validation rules for this model
*/
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -27,7 +27,7 @@
<th>Active To</th>
<th>Image</th>
<th>Website</th>
<th style="min-width: 70px;">Action</th>
<th style="min-width: 100px;">Action</th>
</tr>
</thead>
<tbody>
@@ -42,7 +42,14 @@
<td>{{ isset($item->active_to)? format_date($item->active_to):'-' }}</td>
<td>{!! image_row_link($item->image_thumb, $item->image) !!}</td>
<td>{{ $item->is_website ? 'Yes':'No' }}</td>
<td>{!! action_row($selectedNavigation->url, $item->id, $item->title, ['show', 'edit', 'delete']) !!}</td>
<td>
<div class="btn-toolbar">
<a href="/admin/photos/banners/{{ $item->id }}/crop-resource" class="btn btn-info btn-xs" data-toggle="tooltip" title="Crop {{ $item->name }}">
<i class="fa fa-crop"></i>
</a>
{!! action_row($selectedNavigation->url, $item->id, $item->title, ['show', 'edit', 'delete'], false) !!}
</div>
</td>
</tr>
@endforeach
</tbody>
@@ -0,0 +1,160 @@
@extends('layouts.admin')
@section('styles')
<style>
.cropper-container {
text-align: center;
}
.cropper-box {
margin: auto;
min-height: 500px;
}
.preview {
width: 100%;
margin: auto;
overflow: hidden;
min-height: 200px;
/*border: 1px solid #444444;*/
}
</style>
@endsection
@section('content')
<div class="row cropper-container">
<div class="col-xs-12">
<div class="box box-primary box-solid">
<div class="box-header with-border">
<h3 class="box-title">
<span><i class="fa fa-crop"></i></span>
<span>Crop {{ $photoable->name }}</span>
</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-3">
<h4>Current Thumb</h4>
<img src="{{ $photoable->thumb_url }}" title="{{ $photoable->name }}" style="max-width: 100%;">
</div>
<div class="col-md-6">
<div class="cropper-box">
<h4>Crop</h4>
<img id="image-cropper" src="{{ $photoable->original_url }}" title="{{ $photoable->name }}" style="max-width: 100%;">
</div>
</div>
<div class="col-md-3">
<h4>Preview</h4>
<div class="preview"></div>
</div>
</div>
<div class="form-footer">
<button id="btn-crop-photo" class="btn btn-labeled btn-primary btn-ajax-submit">
<span class="btn-label"><i class="fa fa-fw fa-save"></i></span>
Update Photo
</button>
<a href="javascript:window.history.back();" class="btn btn-labeled btn-default">
<span class="btn-label"><i class="fa fa-fw fa-chevron-left"></i></span>Back
</a>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
@parent
<script type="text/javascript" charset="utf-8">
$(function () {
var cropperData = false;
var $image = $('#image-cropper');
var minCropWidth = 0;
var minCropHeight = 0;
var minWidth = {{ isset($photoable::$THUMB_SIZE)? $photoable::$THUMB_SIZE[0]:400 }};
var minHeight = {{ isset($photoable::$THUMB_SIZE)? $photoable::$THUMB_SIZE[1]:200 }};
$image.cropper({
// viewMode: 1, // restrict the crop box to not exceed the size of the canvas.
preview: '.preview',
aspectRatio: minWidth / minHeight,
ready: function () {
cropperData = $(this).cropper('getData', true);
// add restrictions when natural image is bigger than minimum allowed
if (cropperData.width > minWidth && cropperData.height > minHeight) {
// get the original cropbox data
var originalBoxData = $image.cropper('getCropBoxData');
// set the crop area to minimum image size
$image.cropper('setData', {
width: minWidth,
height: minHeight
});
// set the minimum cropbox width and height
var cropBoxData = $image.cropper('getCropBoxData');
minCropWidth = cropBoxData.width;
minCropHeight = cropBoxData.height;
// reset the cropbox area to initialize
$image.cropper('setCropBoxData', {
width: originalBoxData.width,
height: originalBoxData.height,
});
} else {
notifyError("Image Size", "The image uploaded is smaller than the minimum required size.");
}
},
crop: function (e) {
// console.log(e.x);
// console.log(e.y);
// console.log(e.width);
// console.log(e.height);
// get crop data - round to integer
cropperData = $(this).cropper('getData', true);
},
cropmove: function (e) {
if (minCropWidth > 0) {
var imageData = $image.cropper('getData', true);
// if image width is less than minimum
if (imageData.width < minWidth) {
$image.cropper('setCropBoxData', {
width: minCropWidth
});
}
// if image height is less than minimum
if (imageData.height < minHeight) {
$image.cropper('setCropBoxData', {
height: minCropHeight
});
}
}
}
});
$('#btn-crop-photo').click(function (e) {
e.preventDefault();
cropperData['photoable_id'] = "{{ $photoable->id }}";
cropperData['photoable_type'] = "{{ str_replace('\\','\\\\',get_class($photoable)) }}";
cropperData['photoable_type_name'] = "{{ (new \ReflectionClass($photoable))->getShortName() }}";
doAjax("/admin/photos/crop-resource", cropperData, function (response) {
BUTTON.reset('.btn-ajax-submit');
if (response.error) {
notifyError(response.error.title, response.error.content);
} else {
notify('Cropped', 'The photo was successfully cropped.', 'success', 'fa fa-smile-o bounce animated', 5000);
}
});
})
})
</script>
@endsection
@@ -183,6 +183,10 @@ function () {
Route::get('/news/{news}/crop/{photo}', 'CropperController@showNewsPhoto');
Route::get('/albums/{album}/crop/{photo}', 'CropperController@showAlbumsPhoto');
Route::get('/articles/{article}/crop/{photo}', 'CropperController@showArticlesPhoto');
// resource image crop
Route::post('/crop-resource', 'CropResourceController@cropPhoto');
Route::get('/banners/{banner}/crop-resource/', 'CropResourceController@showBanner');
});
// corporate

0 comments on commit 93d1e7f

Please sign in to comment.