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

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 Robin S
      An experimental module for adding images to a field via pasting one or more URLs.
      Add Image URLs
      Allows images to be added to an images field by pasting URLs.

      Usage
      Install the Add Image URLs module.
      A "Paste URLs" button will be added to all image fields. Use the button to show a textarea where image URLs may be pasted, one per line. Images are added when the page is saved.
       
      https://github.com/Toutouwai/AddImageUrls
    • By kalimati
      Processwire allows us to define predefined tags for images. What if I want to use a repeater field on the page for the purpose? How can I use values of this repeater field as the list of available tags for image fields?
      Thanks.
    • By benbyf
      HELLO! I always struggle adding additional functionality, buttons and other settings to the CKeditor and I guess other people might have the same issue at times.
      For those who are CKeditor aces would you share your settings in this post to help others with what I guess should be a simple task to extend the default settings.
       

      Extra color select and text formating
      toolbar
      Format, Styles Bold, Italic, Underline, -, RemoveFormat TextColor, BGColor JustifyLeft , JustifyCenter, JustifyRight, JustifyBlock NumberedList, BulletedList, -, Blockquote PWLink, Unlink, Anchor PWImage, Table, HorizontalRule, SpecialChar PasteText, PasteFromWord Scayt, -, Sourcedialog extra allowed content
      small[*] section font[style] span[style]{!color} code[*] custom config options
      colorButton_colors: ec4626,ffde43,00aaeb,004a87,7b9320,ffffff extra plugins
      colorButton  
    • By Peter Knight
      I have the following code which creates a 2 column div. In the first I check to see if there are any images present and only echo an image if there is.
      If I don't do this, I get an error.
      But I was wondering if there was a more efficient way to do this?
      I don't know the proper terminology but I suspect breaking the code into three parts as I have done ...
      First - the first <div class='uk-width-1-2@s'> Second - the image check Third - the final div ...is somewhat more verbose than it needs to be with more modern PHP
       
      <?php $imgoptions = array('quality' => 100,'upscaling' => false); $products = $page->siblings("id!=$page"); foreach ($products as $prod){ echo" <div class='uk-width-1-2@s'> "; if(count($prod->images)){ echo" <a href='$prod->url'> <img class='lazyload prod-thumb-ov' src='{$prod->images->first()->height(300, $imgoptions)->url}' data-src='{$prod->images->first()->height(300, $imgoptions)->url}' data-srcset=' {$prod->images->first()->width(414)->url} 414w, {$prod->images->first()->width(320)->url} 320w' data-sizes='auto' alt='{$prod->images->first()->description}'> </a> ";} echo " </div> <div class='uk-width-1-2@s'> {$prod->title} </div> ";} ?>  
      Thanks
       
       
    • By 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