Resizing image after insertimage on summernote

Question

I am currently using summernote and have a php fileuploader for it that works great. However, the images inserted can sometimes be really large, 1920x1080 and larger.

Summernote comes with a great "scale" function for images, and i would love to programmatically trigger it. So when i upload and insert my image it would automatically be scaled down to a given percentage.

I know i can resize the image serverside, but im gonna do a lightbox on the images so i want them in their full size, but scaled down.

Has anyone done something similar?

Villar

I know this is old, but for further reference, I suggested a solution to automatically resize upon insertion (no user intervention). See issue#2344 – Cutlet

Answer 1

I faced the same problem and solved it by creating a plugin for that.

It automatically resizes, flips and rotates images before putting them into the summernote editor.

Download the Resized Data Image Plugin for Summernote here.

In addition you need Exif.js to read the EXIF data of images.

Also add this CSS Code to your page to make the input[type=file] button as an icon button:

button[data-name=resizedDataImage] {
    position: relative;
    overflow: hidden;
}

button[data-name=resizedDataImage] input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    font-size: 200px;
    max-width: 100%;
    -ms-filter: 'alpha(opacity=0)';
    direction: ltr;
    cursor: pointer;
}

Finally add the plugin resizedDataImage to your summernote toolbar.

The final setup of your page could look like this:

<link rel="stylesheet" type="text/css" href="design/css/summernote.min.css">
<script type="text/javascript" src="js/exif.js"></script>
<script type="text/javascript" src="js/summernote.min.js"></script>
<script type="text/javascript" src="js/summernote-ext-resized-data-image.js"></script>  
<style type="text/css">
    button[data-name=resizedDataImage]  {
        position: relative;
        overflow: hidden;
    }

    button[data-name=resizedDataImage] input {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        opacity: 0;
        font-size: 200px;
        max-width: 100%;
        -ms-filter: 'alpha(opacity=0)';
        direction: ltr;
        cursor: pointer;
    }
</style>

<script type="text/javascript">
    $(function () {
        $('.summernote').summernote({
            height: 250,
            toolbar: [
                ['insert', ['resizedDataImage', 'link']]
            ]
        });
    });
</script>

Olivier

Hey, great stuff! This does what i need and is tweakable :D – Villar

I just updated the code again, now all transformations (flipping and rotating) work properly: Resized Data Image Plugin for Summernote – Olivier

Any chance of this being updated to take in account the latest changes? github.com/summernote/summernote/issues/1361 – Chaos

I got summernote-ext-resized-data-image.self-41628b1……:18 Uncaught TypeError: Cannot read property 'getTemplate' of undefined. It seems $.summernote.renderer is undefined. – Mitigate

Answer 2

I fixed this issue using solutions from (Image Upload for Summernote v0.8.1) Summernote image upload

And using https://github.com/verot/class.upload.php library to verify/resize images

Instead of using the php file in Image for summernote v0.8.1 use this:

require_once("pathtoclassfile/src/class.upload.php");
if(!empty($_FILES['image'])){
    $handle = new upload($_FILES['image']);

if ($handle->uploaded) {
    $handle->allowed = array('image/*');
    $handle->mime_check = true; //this is set to true by default
    $handle->no_script = true;  //this is set to true by default
    $handle->forbidden = array('application/*','audio/*','multipart/*','text/*','video/*');
    $name = md5(uniqid()); //generate a new random name for your file
    $handle->file_new_name_body   = $name; 
    $handle->file_auto_rename = true;
    $handle->image_resize         = true;
    $handle->image_x              = 350;  //resize the image to what you want
    $handle->image_ratio_y        = true;
    $handle->image_convert = 'jpg';   //I converted to jpg so that all my extensions are jpg
    $handle->jpeg_quality = 50;   //you can adjust the image quality to resize further
    $handle->process('uploads'); //set the upload path
  if ($handle->processed) {

    $imagename = "$name.jpg"; //attach the extenstion to the file name
    $baseurl = $_SERVER['HTTP_HOST']; //your server host or use "example.com/";
    echo $baseurl.'uploads/summernote/'.$imagename;

    $handle->clean();
      }
}
}

Then in your javascript change success function to:

success: function(url) {
            if(url !== ''){
            var image = $('<img>').attr('src', 'http://' + url);
            $('#summernote').summernote("insertNode", image[0]);
            }else{
                alert('File is not an image!\nOnly jpg, png, jpeg and gif are allowed');
            }
        },

Get the rest of the codes from the links I posted above.

Rb

Nice explanition, this $handle->file_dst_name; handles file name, you can do like this $baseurl = $_SERVER['HTTP_HOST'];echo $baseurl.'uploads/summernote/'.$handle->file_dst_name; – Bellboy