Copied to clipboard

Flag this post as spam?

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


  • Richard Green 6 posts 88 karma points
    Dec 03, 2016 @ 00:54
    Richard Green
    1

    Add CSS Class to All Images via TinyMCE

    Hi all,

    To me this seems like a really simple question so my apologies if I've missed something but I did try a search to little avail.

    I'm using Bootstrap and want all images added to my content pages via TinyMCE to use the img-responsive class.

    I believe I have found what I need regarding the removal of the fixed width and height values at http://www.logikfabrik.se/blog/responsive-images-in-umbraco/ but I need a way to have TinyMCE set the img-responsive class automatically for any images added.

    Is this possible or am I going to be stuck manually added what I need via the code view, assuming the code view isnt then going to strip it out as unapproved HTML.

  • Alex Skrypnyk 6131 posts 23950 karma points MVP 7x admin c-trib
    Dec 04, 2016 @ 23:12
    Alex Skrypnyk
    0

    Hi Richard,

    You can use macros when add new image to RTE, in macro you will have media id as param and custom html of img tag as output.

    Thanks,

    Alex

  • Dan White 206 posts 510 karma points c-trib
    Dec 05, 2016 @ 06:18
    Dan White
    0

    Hi Richard,

    I would wrap the rte output in a .bodytext div or something and then apply the responsive styles to all images in that div.

    .bodytext img { responsive styles }

    If you're using less or sass you can probably just extend or include the bootstrap class.

  • Paul Seal 524 posts 2889 karma points MVP 6x c-trib
    Dec 06, 2016 @ 10:54
    Paul Seal
    1

    Hi Richard If your rich text editor is inside the grid editor you can do this to make the Rich Text Editor add the class to all image tags.

    Open the file in Views > Partials > Grid > Editors > Rte.cshtml

    Change this:

    @Html.Raw(TemplateUtilities.ParseInternalLinks(Model.value.ToString()))
    

    To this:

    @Html.Raw(TemplateUtilities.ParseInternalLinks(Model.value.ToString().Replace("<img>","<img class=\"img-responsive\">")))
    
  • David Gregory 82 posts 208 karma points
    Dec 14, 2016 @ 16:01
    David Gregory
    2

    This one worked for me, although I had to slightly change the replace bit to:

    Replace("<img ", "<img class=\"img-responsive\" ")))
    

    Do you know how to get this working in a normal rte that's not in a grid?

  • David Gregory 82 posts 208 karma points
    Dec 14, 2016 @ 16:24
    David Gregory
    1

    Actually, this worked for me in a normal view

    @Html.Raw(TemplateUtilities.ParseInternalLinks(Umbraco.Field("bodyText").ToString().Replace("<img ", "<img class=\"img-responsive\" ")))
    

    and also adding @using Umbraco.Web.Templates

    Any of you more experienced Umbraco guys see a reason why this is not a good solution?

Please Sign in or register to post replies

Write your reply to:

Draft