getting image width and height

[Joe]

Hi all!

• Using CKEditor small images get added to the page´s main content field (body) with the option to link to the full-size image enabled.
• Then, in the page´s template file I want to add the width and height attributes to the img tags of the small images displayed (linking to the large versions)

On the page the image reference looks like this:

<a class="image-link" href="/cms/site/assets/files/1021/testflat.jpg"><img class="align_left" src="/cms/site/assets/files/1021/testflat.150x0.jpg" alt=""></img></a>

( class="image-link"  is inserted in the template file as a trigger for the lightbox script)

Then I try to add the width and height attributes to the img tags (of the small images linking to the full size ones) in the template file like so:

$changed_content = $page->body;
$changed_content = str_replace("<img ", "<img width='$image->width' height='$image->height' ", $changed_content);

But I get the with and height of the full size image instead of the small one displayed on the page.

What might be the reason for this?

Thanks.

[horst]

If you use a image with width(150) you also have to call for that variation width and height:

$changed_content = str_replace("<img ", "<img width='$image->width(150)->width' height='$image->width(150)->height' ", $changed_content);

[Joe]

$changed_content = str_replace("<img ", "<img width='$image->width(150)->width' height='$image->width(150)->height' ", $changed_content);

Thank you. That makes sense. However something still is not quite right in my code. After replacing my line with the above the result on the page is:

<a class="image-link" href="/cms/site/assets/files/1021/testflat.jpg"><img class="align_left" width="(150)->width" height="(150)->height" src="/cms/site/assets/files/1021/testflat.150x0.jpg" alt=""></img></a>

I´m sure it´s just some small thing, but for now I can´t see it...

[horst]

try to wrap curly-braces { } around the width and height properties: width='{$image->width(15)->width}'

If this doesn't work you may also interrupt your string and concatenate parts together like:  "<img width='" . $image->width(150)->width . "' height...>"

------

As a sidenote: I also see that you use <img ...></img> tags, but I think that this isn't valid HTML. I only know <img src='' width='' ... /> this sort of images tags.

[adrian]

Just a side note, I think you will likely run into trouble with a str_replace in this situation. What if the src or a class is straight after img instead (eg <img src="" width=""). You should use a regex or domdocument to make sure it is more robust.

Here is a bit of a writeup on how to do it: http://techpad.co.uk/content.php?sid=81

[horst]

@adrian: I don't think that this could make trouble because he searches for "<img " and replaces it with "<img width='150' height='150' "

This seems to be 100% robust as every html-image-tag has to begin with <img followed by at least one space

[adrian]

Hey horst - I guess I am a bit confused about how the img tag is being generated.

I just looked at Joe's code again and see that he is not replacing existing width and height attributes, but inserting them regardless. What if they are already in the img tag?

Tinymce is producing the tag in this format <img src width height />. 

In CkEditor it actually looks like it is not adding the width and height at all. Not sure if this is a bug in PW's enhancement of the insert image, or a problem in CK itself. Either way, if you are relying on code generated by an RTE, I don't think you can assume that there will be no width/height or the placement of them in the tag.

Maybe I am not understanding how the img tag is being generated in the first place

[horst]

I don't like working with RTEs, especially don't use them together with images.

So at least you are right: we shouldn't assume that there isn't embedded width and height in all situations.

[adrian]

I agree - I try to avoid giving clients the need / option to embed images in an RTE, but sometimes I don't have much choice

[Martijn Geerts]

I've build the texformatterImageInterceptor, but i've never used it. I just don't like images inserted in WYSIWYG. LIke a lot of people here.

[Joe]

Thank you all for answering, I was offline unexpectedly for a day, so I´m only back now to ponder the issue...

As a sidenote: I also see that you use <img ...></img> tags, but I think that this isn't valid HTML. I only know <img src='' width='' ... /> this sort of images tags.

Both CKEditor and also TinyMCE insert the </img> end-tag, at least in standard configuration it seems (maybe this can be configured differently, I don´t know). But for the current site I´m developing I´m using the XHTML Mobile Profile 1.2 doctype to assure maximum compatibility to mobile devices and as that it validates correctly.

Hey horst - I guess I am a bit confused about how the img tag is being generated.

I just looked at Joe's code again and see that

Tinymce is producing the tag in this format <img src width height />. 

In CkEditor it actually looks like it is not adding the width and height at all. Not sure if this is a bug in PW's enhancement of the insert image, or a problem in CK itself. Either way, if you are relying on code generated by an RTE, I don't think you can assume that there will be no width/height or the placement of them in the tag.

Maybe I am not understanding how the img tag is being generated in the first place

The img tag in this case is produced by CKEditor. And you are right, it does not add width and height. So that is what I am trying to do here. If it turns out this is too difficult this might be a reason to switch back to TinyMCE. I just felt that  CKEditor is easier to configure, but maybe I should have a closer look at TinyMCE...

Horst wrote:

"I don't like working with RTEs, especially don't use them together with images.

So at least you are right: we shouldn't assume that there isn't embedded width and height in all situations."

...but I assume in a given setup they should always produce similar output and that can then be re-written before outputting it to the page.

I agree - I try to avoid giving clients the need / option to embed images in an RTE, but sometimes I don't have much choice

...well, RTEs do cause a fair bit of extra headaches when setting up a site, that´s for sure. Especially it is always quite a lot of trouble trying to assure that the clients can´t do anything with them that messes up the page. On the other hand I feel that they provide the kind of intuitive feel that makes working with a CMS appealing to people.

I've build the texformatterImageInterceptor, but i've never used it. I just don't like images inserted in WYSIWYG. LIke a lot of people here.

I´ll have another look at texformatterImageInterceptor in this context then.

[adrian]

I would probably stick with CK over TinyMCE. There is something wrong somewhere in your setup if either CK or Tiny are producing closing </img> tags. I have tested both and they both produce <img .... /> as expected. Can you check the code in the editor before and after you save the page to see where the problem might be.

Hopefully Ryan will see this thread and sort out the missing dimensions from the CK img tag. If he doesn't chime in by the weekend, I would consider filing a bug report on github.

Either way I think your code needs to assume that the RTE will embed width and height and come up with a solution (like the domdocument one I linked to) to replace them with what you need.

[Joe]

As a sidenote: I also see that you use <img ...></img> tags, but I think that this isn't valid HTML. I only know <img src='' width='' ... /> this sort of images tags.

I would probably stick with CK over TinyMCE. There is something wrong somewhere in your setup if either CK or Tiny are producing closing </img> tags. I have tested both and they both produce <img .... /> as expected. Can you check the code in the editor before and after you save the page to see where the problem might be.

Hopefully Ryan will see this thread and sort out the missing dimensions from the CK img tag. If he doesn't chime in by the weekend, I would consider filing a bug report on github.

Either way I think your code needs to assume that the RTE will embed width and height and come up with a solution (like the domdocument one I linked to) to replace them with what you need.

@Horst and Adrian:

So I found out what it was with the </img> tags: They are not added by either CKEditor or TinyMCE. I was mistaken about that. What happened is that I have been using the "Inspect Element" feature in Firefox to view the output and that´s where it shows the </img> tag. Whereas when I use "Inspect Element with Firebug" or view the source (also from Firefox) the tag isn´t there! So this is a bug in Firefox, unless there is some reason I don´t understand.

As far as the missing image dimensions go I wonder if it´s not a CKEditor thing in general, not just in the Processwire module? Maybe if I have the time I will test this. So I did a brief test:

Downloaded the latest version of CKEditor (amazing amount of features and options!). When I use the standard samples they provide with the installation and look at the posted data from there I don´t see any image dimensions provided with the img tags! When I use their sample that produces XHTML compliant output it gives me style="float:right; height:109px; width:150px" in the img tag.

Maybe if I configure the CKE module to output this that will fulfill my need here (outputting mobile-optimized code). No, apparently not: to assure best mobile-readiness I check my output with http://ready.mobi/  ==> and it wants the width and height attributes, not just the style. Then there is also the possibility to configure CKEditor so it outputs valid HTML 4.01 code. However then the pages will likely fail as valid XHTML Mobile Profile 1.2 doctype. I only want width and height in the image tags, not sure if there is an easy way to get CKEditor to do that...

[Martijn Geerts]

You can make it depending on services etc. (ready.mobi) But the more you depend on services, the bigger the change that it will fail in the future. (google changes api, ready.mobi get bought by MicroSoft etc & developer winns the lottery and quit working at all)

We already have to deal with a lot of service depenencies. (Google maps, Twitter integration, FaceBook likes etc etc.)

For mobile detection (read available device width) I think it's better to handle it yourself. 

[Joe]

You can make it depending on services etc. (ready.mobi) But the more you depend on services, the bigger the change that it will fail in the future. (google changes api, ready.mobi get bought by MicroSoft etc & developer winns the lottery and quit working at all)

We already have to deal with a lot of service depenencies. (Google maps, Twitter integration, FaceBook likes etc etc.)

For mobile detection (read available device width) I think it's better to handle it yourself. 

> "& developer winns the lottery and quit working at all" ...the way to go, lol!

No, but I only use http://ready.mobi/ as a tool to check my output while I´m developing the site. I do handle mobile detection myself and I´m trying to output code that only has to be adapted slightly to be mobile-ready.

[Joe]

As for the issue at hand, I still have not resolved it. As I see it I have these options for proceeding:

1. My original idea of finding the (thumb-) image´s with and height and adding it by re-writing the CKEditor-created field content in the page´s template file.
2. configure CKEditor so it outputs XHTML compliant content and then re-write the style attributes for width and height as above
3. configure CKEditor to output img width and height without making other changes if possible -> EDIT: that seems the best solution and it is what finally worked for me
4. switch to TinyMCE and see if apart from outputting img width and height (which it does) I can configure it to have the formatting options I want
5.  see if TextformatterImageInterceptor can do it

...or maybe just live with not having img width and height for now. It´s gotten to be quite an involved thing for something not even visible on the page

[Joe]

Hey people, at last found the solution (getting width and height attributes for img tags into HTML created with CKEditor) :

In /site/modules/InputfieldCKEditor/ckeditor-4.1.2/  changed config.js from:

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	config.language = 'de';
	 config.uiColor = '#FEE673';
};

To the following (explanation in the comments):

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

 /**
 * ...finally found out how to force CKE to output attributes instead of styles for img width and height:
 * 
 * Important: additionally to adding everything form "CKEDITOR.on('instanceReady', function (ev)..." onward
 * also the line "config.allowedContent = true;" needs to be added or else it has no effect!
 *    Joe
 */
 
 
CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	config.language = 'de';
	config.uiColor = '#FEE673';
	config.allowedContent = true;

CKEDITOR.on('instanceReady', function (ev) {
// Ends self closing tags the HTML4 way, like <br>.
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                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];

                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
                    }
                }


                if (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        }
    });
});

};

That does it, problem solved! It just seems that img width and height attributes make images load faster than putting them in styles, so this is what I wanted to do here.

Found the solution here: http://ckeditor.com/forums/CKEditor/Forcing-img-tag-to-use-width-and-height-attributes-instead-of-style
in combination with the hint from dragan in: http://processwire.com/talk/topic/3972-ckeditor-with-attritbutes/?hl=ckeditor
 

I´m sure there might have been other solutions, like switching to TinyMCE or re-writing the CKEditor-created field content in the page´s template file as I wanted to do at first, but this seems to work nicely and so I´ll stick with it. Thanks everyone for your help!