CKEditor doesn't set height attribute on img tag

[sebr]

Hi

I'm working on my tempate to provide an AMP (Accelerated Mobile Page) template version.

But there is a problem with CKEditor. AMP needs width AND height attributes to all images. Then when I instert an image in my body field from CKEditor the source code juste includes width attributes.

How can I add automaticaly height width CKEditor ? Or if not possible width CKEditor, how can I dow from URL image to get height image ?

Thanks in advance

[SamC]

Hi @sebr and welcome to the forum.

Out of curiosity, I tried this. My JS skills are not great but I managed to get it working by copying the folder:

/wire/modules/Inputfield/InputfieldCKEditor/plugins/pwimage

...into:

/site/modules/InputfieldCKEditor/plugins/pwimage

So our custom plugin is used instead of the '/wire/' one. Then changed a few lines in '/site/modules/InputfieldCKEditor/plugins/pwimage/plugin.js'

Lines 11-18, added height to allowed and required. Like this:

// These are the allowed and required elements & attributes for images. 
// It should clean all other classes but hidpi and three align classes that are generated by ProcessWire
var allowed = 
    'img[alt,id,!src,title,width,height](align_left,align_center,align_right,hidpi,align-left,align-center,align-right);' + 
    'a[!href];' + 
    'figure{width}(align_left,align_center,align_right,hidpi,align-left,align-center,align-right);' + 
    'figcaption;';
var required = 'img[alt,src,width,height]';

Then on line 211, added another like:

if(width > 0) $insertHTML.attr('width', width); 

if(height > 0) $insertHTML.attr('height', height); // << add this

Inserted an image and:

Not sure if it has any knock on effects but the height's in there for sure. I tried double clicking image, cropping, resizing and re-inserting image and the new values are reflected in ckeditor.

There's possibly an 'easier' way which another member might know but maybe you can try this to get started 

[Macrura]

the only problem with overriding the core pwimage plugin is keeping up with changes to the core, otherwise, if it works, and you are not planning to upgrade the core, then that should be ok...

I'd say my first instinct in this situation would be to use a textformatter, and then be able to manipulate the elements in the ck editor field; You could use dom parsing and then should be able to add those attributes, though i haven't tried this yet (but will be doing so soon for a site that needs AMP pages)...

i have used image interceptor in the past, (http://modules.processwire.com/modules/textformatter-image-interceptor/ ) Not sure if it works on 3x branch, i think i had to fix some things in that for a site i upgraded to 3x, but never logged my changes, just fixed some errors and let the site work..

This is a new module that manipulates images, so possibly having a look at if you were going to make a textformatter... ( http://modules.processwire.com/modules/textformatter-fluid-images/ ) 

 

[SamC]

18 hours ago, Macrura said:

I’d say my first instinct in this situation would be to use a textformatter, and then be able to manipulate the elements in the ck editor field; You could use dom parsing and then should be able to add those attributes

Interesting. Could you elaborate on this a bit? I presume a textformatter module runs when you save the page. How do you then get the width/height info from the image field and then add them on to the resulting image that’s displayed on the webpage?

Would you use JS inside the PHP module to do the dom parsing?

I’ll also look at the code from the fluid images module but tbh, I’m not good enough to read code and know what it does yet. Just after a brief outline.

I’d like to try something like this, would be a good learning experience.

[Macrura]

Textformatters are applied when the field is output on the frontend, or when you echo the content somewhere (with output formatting on).

in terms of how you'd get the image attrs of the actual image, i think you'd be getting the filename and then looking it up in the images field;

there is no JS involved, just native dom parsing or using simple_html_dom; you wouldn't even need a textformatter for this, you could just process the field at the template level;  there are several modules that do this, like the import external images;

if/when i get around to making the AMP pages i will post the code on it (if i'm able to do it!)

[dragan]

Is there any way to insert image width + height attributes, when I link to a bigger image with CKEditor?

i.e. to use Photoswipe, I have to supply a data-attribute that holds the width + height of the big image, e.g. data-size="1920x675".

The above code by @SamC works nice, but I would need the same for the linked image, in the href.

Where does that actually happen? Click on "link" icon in RTE -> wrap anchor around image? Is that core or a module?

I guess I'd rather try a PW hook than fiddling with CKE JS... 

edit: I just found this related forum thread... guess I will try this out 

 

 

Edited November 13, 2017 by dragan
discovered an old, similar thread

[sebr]

Hi @SamC

Your solution width JS adjustments works great. I just added in my CSS a "height: auto;" on image tag to respect image ratio. And It's OK to generate AMP tags. All is good.

Hi @Macrura

I don't understand your solution... Could you get me an example ?