Croping multible images with laravel 5

Of course first of all we need to add some routes in which we call a page with a get request and store the data with a post request. it’ll look somethign like this:

Route::get('/uploads', 'UploadController@index');
Route::post('/uploads', 'UploadController@store');

After this we need that Controller, I called it UploadController, as you know there are 2 ways how to add a new controller and I chose the Terminal one, by pressing the command

php artisan make:Controller UploadController

Or as I like to do it 

php artisan make:model Upload -r

Which makes a model and a resourceful controller for the model. 

with a first method you allso need to add a model but also pressing the command

php artisan make:model Upload

in the controller for the index methode as we saw on the get request route we just need to write it like this

public function index(){
   return view('uploads');
}

so we get the desired view. 

let’s just continue with the view for the upload images. first you need to get a +2 Jquery version and add it tot the head of your project, something like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

and also add the cropit js which you can find here move to, Cropit > dist > jquery.cropit.js then just call it like this:

<script src="js/cropit.js"></script>

the css

      .cropit-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-top: 7px;
        width: 250px;
        height: 250px;
      }

      .cropit-preview-image-container {
        cursor: move;
      }

      .image-size-label {
        margin-top: 10px;
      }

      input {
        display: block;
      }

      button[type="submit"] {
        margin-top: 10px;
      }

      #result {
        margin-top: 10px;
        width: 900px;
      }

      #result-data {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: break-word;
      }
    

the html

 <form action="uploads" method="post" enctype="multipart/form-data">
      {{ csrf_field() }}
      
        <div class="image-editor">
          <input type="file" class="cropit-image-input">
          <div class="cropit-preview"></div>
          <div class="image-size-label">Resize image</div>
          <input type="range" class="cropit-image-zoom-input">
          <input type="hidden" name="data" class="hidden-image-data" />
        </div>

        <div class="image-editor2">
          <input type="file" class="cropit-image-input">
          <div class="cropit-preview"></div>
          <div class="image-size-label">Resize image</div>
          <input type="range" class="cropit-image-zoom-input">
          <input type="hidden" name="data2" class="hidden-image-data2" />
        </div>
        <button type="submit" id="sub">Submit</button>
</form>

of course you can modify the html as you wish as long as you add all the right componens with ti. also don’t forget the javascript wich is an important part of all this

    <script>

      $(function() {
        $('.image-editor').cropit();
        $('.image-editor2').cropit();

        $('form').submit(function() {
          // Move cropped image data to hidden input
          let imageData = $('.image-editor').cropit('export');
          let imageData2 = $('.image-editor2').cropit('export');
          $('.hidden-image-data').val(imageData);
          $('.hidden-image-data2').val(imageData2);

          // Print HTTP request params
          let formValue = $(this).serialize();
          $('#result-data').text(formValue);

          // Prevent the form from actually submitting
          return true;
        });
      });
    </script>

here is the refactored version of this if you don’t like to write too much code.

//crop functionality
$(function() {
for(let i = 1; i <= 12; i++) {
$('.image-editor' + i).cropit();
}
// $('.image-editor' + photoTypeId).cropit();
$('form').submit(function() {
// Move cropped image data to hidden input
for(let p = 1; p <= 12; p++) {
let imageData = $('.image-editor' + p).cropit('export');
$('.hidden-image-data' + p).val(imageData);
}
// Print HTTP request params
letformValue = $(this).serialize();
$('#result-data').text(formValue);
// Prevent the form from actually submitting
return true;
});
});

after you’ve added everything as you want, you can open the page wich should look like this

Lets continue with the second part of the adventure, the store medoth on the controller

public function store(Request $request)
    {
       $imageData = $request->file('data');
       $imageData2 = $request->get('data2');

       $info = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $imageData));
       $info2 = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $imageData2));

       Image::make($info)->save(public_path('/images/1.png'));
       Image::make($info2)->save(public_path('/images/2.png'));

       return redirect()->back();
    }

You’re still not done, you need to add a package in order to make this work, thankfully you can do this with laravel and a simple command.

as you can see we used a phasade called Image we’ve dont this by importing intervention.io folow the instructions there and add it to your project font forget the add it to the beggining of the project like so:

use Intervention\Image\ImageManagerStatic as Image;

after you’ve added this and the data is right you now can crop and store the croped images on the server.

have fun.

Add multible wysiwig editors to use in one page

In this tutorial we will see how to add multible wysiwig editors, converting textareas to wysiwig editors. 

Dependecies: For this we will use CKeditor

CKEditor is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications. Its core code is written in JavaScript and it is developed by CKSource. CKEditor is available under open source and commercial licenses more here

First things first, we will need to import ckeditor so we are able to use it depending on what you are using you can call is as you want like so for example:

<script type="text/javascript" src="{{ asset('plugins/ckeditor-basic/ckeditor.js') }}"></script>

or use the CDN the currect version is 4.10.1

<script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>

add the textarea like so:

<textarea name="shortProfilePartnerOrganisation" class="form-control ckeditor" rows="5" id="shortProfilePartnerOrganisation"></textarea>

Than the js that makes it posible to add multible ckeditors like so

<script> 
// To make a text area with wysiwyg editor add a class to that textarea with name ckeditor
function transgormToWYSIWYG() {
var ckeditors = $('.ckeditor');
$.each(ckeditors, function (index, ckeditor) {
CKEDITOR.replace(ckeditor, {
wordcount: {
// Whether or not you want to show the Word Count
showWordCount: true,

// Whether or not you want to show the Char Count
showCharCount: true,

// Maximum allowed Word Count
// maxWordCount: 4,
// Maximum allowed Char Count
maxCharCount: 1000
}
});
});
}
</script>

Afterwards just use it we you need it with the js function we made right above.

transgormToWYSIWYG();

Get a database value of another table in laravel

In laravel database relationships are simple, and to get a value of another table to another view based on the values you got in this view you simple connect these two tables with a relationship. 

Lets get a real world problem about this, For this I’ll get a website I’ve done before. 

lets say I’ve submitted a form and in this form I got a result. like in the image below.

Now based on this “ISFJ” result, I want to get a short description of this type from another table, where the descriptions are stored.

So what I’ve to do is to link them together So a the results belongs to a short description right?

to the Test class add this relationship code

public function tipi()
{
return $this->belongsTo(Tipi::class, 'finaltype', 'type');
}

so what we are doing there is connect the finaltype column which stores the ISFJ type, to the “type” table of the type description.

on the view, just add this code.

{!! $results->tipi->shortDescription !!}

So the $results variable is what you already use to connect to your table of this view, but you simply say use the connection mentioned above, in this case the function is public function tipi() so you used tipi as $results->tipi and at last what you want to get, in our case we need the short description.

and here you have it, based on the final type you get the short description