Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Alex Lindgren 159 posts 356 karma points
    Dec 22, 2017 @ 14:51
    Alex Lindgren
    0

    Height and Width resizing issue with images inserted into Richtext Edtior

    When we insert an image into the Richtext Editor, it adds HTML like this:

    <img style="width: 640px; height: 342.46489859594385px;" src="/media/3562/2017-12-acwis-img-final.jpg?width=640&amp;height=342.46489859594385" alt="" rel="4958" data-id="4958" />
    

    (Note we changed the max width setting of the RTE property editor from 500 to 640 because that fits our design.)

    The problem is, at least with some images, it will display a blackline on the right edge:

    enter image description here

    The line does not go away if I manually edit the URL (something I can expect our editors to do) and remove the height parameter, so that it looks like this:

    The image then looks like this:

    enter image description here

    So how can I eliminate the black line on the right edge? How can I get the media picker to not set a height?

  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Dec 23, 2017 @ 19:04
    Dan Diplo
    0

    There's a few issues related to this on the Issue Tracker:

    http://issues.umbraco.org/issues/U4?q=black%20line

  • John Bergman 483 posts 1132 karma points
    Dec 26, 2017 @ 16:15
    John Bergman
    0

    We have this issue as well, hardcoding image sizes does not make for a very good responsive experience. We ended up writing code to remove the inline height/width style settings in favor of using a responsive image

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Jan 02, 2018 @ 11:27
    Jeavon Leopold
    0

    We added a option in Slimsy v2 to remove the style tag so that RTE images can be made responsive too.

    You could make your own extension method based on this code or use it as is...

    https://github.com/Jeavon/Slimsy#4-optional-adjust-the-rendering-of-your-tinymce-richtext-editors

Please Sign in or register to post replies

Write your reply to:

Draft