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?

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>