prestoav

'Skip width attributes on image tags' not working?

Recommended Posts

Hi all,

PW: 3.0.42

I'm trying to have responsive images in the body field. First I need to stop the image tag generated by CKEditor adding the width attribute to the image tag on insertion. I found the 'Skip width attributes on image tags?' in the settings of ProcessPageEditImage and that suggests it does exactly what I'm after.

Sadly, even when this checkbox is checked and a new image is inserted the width attribute is still added.

Am I missing something?

TIA.

Screenshot 2017-09-25 14.35.04.png

Share this post


Link to post
Share on other sites

It applies to images added after the setting is changed. 

Share this post


Link to post
Share on other sites

Hi Abdus,

Actually I assumed that so, when testing, I removed the image from the page completely and added an all new one. Same result, the width attribute still keeps being added.

 

  • Like 1

Share this post


Link to post
Share on other sites

Hmm. I am having the same issue. 

I did some debugging. It looks like the module is working as intended, and sending response to frontend with 'data-nosize' attribute set correctly. But in pwimage plugin for CKEditor, nosize setting isn't used at all.

// pwimage/plugin.js
function insertImage(src) {
    var $i = $iframe.contents();
    var $img = jQuery("#selected_image", $i);
    // ...
    var $insertHTML = jQuery("<img />").attr('src', src).attr('alt', alt);
    // ...
    if (width > 0) $insertHTML.attr('width', width);

    // ...
    editor.insertHtml(html);
    // ...
}

 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By tpr
      A few usability tweaks and tips for the CKEditor "Styles" dropdown, which is by default not that user-friendly:

      As you can see it's small and if you add custom items to it they may look awkward as they may inherit styles from their targets (a 3rem bottom margin in the screenshot above).
      These are relatively easy to fix but you have to load your custom CSS files to two places (eg. with AdminOnSteroids): PW admin and CKEditor.
      After loading the CSS/Js assets (see code below) the dropdown looks nicer and more usable:

      The screencap contains other features that you can achieve with the snippets below.
      Code
      CSS - CKEditor (contains demo styles too)
      CSS - admin
      JavaScript - CKEditor custom styles
      P.s. in case you wonder whether the half-margin, no-margin stuff and font-sizes from 12px to 48px were real-life examples - yes, client request 🙂 
    • By LMD
      I'm wondering if it is possible to add a label to the description input in image fields (in the admin).
      I'm using the module Image Extra, which has labels for each input, but I'd like to add a label to the default 'description' input too. The image below illustrates this:

       
      If there is no way (no hook?) then, I suppose I could just not use the default description and add a new description input with the Image Extra module.  But I thought I'd ask in case I (or others) ever want to do this without using the module (i.e. just the one input required).
      I'm using PW 3.0.98
      Thanks.
      ---
      FYI: yes, that is a cat and not a quilt -- this is on my local dev server and I don't have the actual photos yet! She is on a quilt, so it counts... technically.
       
    • By Mustafa-Online
      CKEditor 5 v10.0.0 – the future of rich text editing looks stable
      .
       
    • By Rudy
      https://ckeditor.com/blog/CKEditor-5-v1.0.0-beta-released/
      Looks very clean. Hopefully we get to test it on PW soon.
       
    • By manuel1981
      Hey guys,
      I want to disable the crop and align features when placing an image into the CKEditor.
      The image should simply placed in a predefined width without any additional options.
      Can anybody help me with that?
      Thanks, Manuel