Change code inserted for image

The forum operates in read-only mode. Please head to StackOverflow for support.

Mon, 10/05/2009 - 20:43

mreeves

Joined: 05/10/2009

Posts: 1

Change code inserted for image

In order to handle the fact that users may upload some very big images I would like to use phpthumb to resize images on the fly based on the width and height provided in the image popup. So for example a user may upload a photo that is 1024x768 pixels and 1mb in file size. Now if they change the width and height to something smaller people viewing the article with the image in are still downloading the 1mb file. What I would like to do is change the image code inserted from, for example:

<img src="/images/news/wilmslow-dark.jpg" width="205" height="60" alt="description" />

to

<img src="/phpthumb/phpThumb.php?src=/images/news/wilmslow-dark.jpg&w=205&h=60" width="205" height="60" alt="description" />

basically changing the image src by preceeding it with "/phpthumb/phpThumb.php?src=" and adding in the width and height into that src url based on the width and height inputted into the popup.

How can I do this?

Mon, 05/07/2012 - 20:15

gthvidsten

Joined: 07/05/2012

Posts: 4

Re: Change code inserted for image

Sorry to bumb this very old post, but I have this exact same question and I've yet to find a good answer.
How can I define that the width and height attributes of an image tag should be appended as query variables instead of tag attributes?

Sat, 05/26/2012 - 17:46

gthvidsten

Joined: 07/05/2012

Posts: 4

Re: Change code inserted for image

Okay, I've gotten quite a bit further on this and found this code that I've inserted into config.js:

CKEDITOR.on('dialogDefinition', function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    var dialog = dialogDefinition.dialog;
    var editor = ev.editor;

    if (dialogName == 'image') {
        dialogDefinition.onOk = function (e) {
            var imageSrcUrl = e.sender.originalElement.$.src;
            var width = e.sender.originalElement.$.width;
            var height = e.sender.originalElement.$.height;
            var imgHtml = CKEDITOR.dom.element.createFromHtml('<img src="' + imageSrcUrl + '?width=' + width + '&height=' + height + '" alt="" style="width:' + width + 'px;height:' + height + 'px;" />');
            editor.insertElement(imgHtml);
        };
    }
});

However, the width and height variables contain the image's original size, not the custom size set in the popup window.
What would be the syntax to retrieve the custom size?

Mon, 05/28/2012 - 09:58

sebstefanov

Joined: 03/02/2012

Posts: 1329

Re: Change code inserted for image

In CKFinder these variable are easily changed with the following code:

$config['Images'] = Array(
'maxWidth' => 1600,
'maxHeight' => 1200,
'quality' => 80);

http://docs.cksource.com/CKFinder_2.x/D ... ion/Images

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn

If you think you found a bug in CKEditor, read this!

Mon, 05/28/2012 - 23:13

gthvidsten

Joined: 07/05/2012

Posts: 4

Re: Change code inserted for image

I'm not using CKFinder.

Mon, 06/11/2012 - 21:07

gthvidsten

Joined: 07/05/2012

Posts: 4

Re: Change code inserted for image

Here's a solution (finally):

Add the following to your config.js:

CKEDITOR.on('instanceReady', function (ev) {
    var editor = ev.editor,
        dataProcessor = editor.dataProcessor,
        htmlFilter = dataProcessor && dataProcessor.htmlFilter;

    htmlFilter.addRules( {
        elements : {
            $ : function( element ) {
                // Output dimensions of images as width and height attributes on src
                if ( element.name == 'img' ) {
                    var style = element.attributes.style;
                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
                            width = match && match[1];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
                        var height = match && match[1];

                        var imgsrc = element.attributes.src + "?width=" + width + "&height=" + height;

                        element.attributes.src = imgsrc;
                        element.attributes['data-cke-saved-src'] = imgsrc;
                    }
                }
            }
        }
    });
});

This code is run whenever the CKEditor generates the actual HTML, which happens when you either view the source by clicking the "Source" button, or by performing an HTTP POST of that page.

A small warning, though. The code above will keep appending the width and height query strings for each click on the "Source" button, or for each postback, so you might want to add some extra logic to filter out the width and height query strings before appending them to the src attribute.

CKEditor 4