Sign in Register
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.

    Copy Link
  • Alex Skrypnyk 6163 posts 24143 karma points MVP 8x 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

    Copy Link
  • 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.

    Copy Link
  • Paul Seal 524 posts 2889 karma points MVP 7x 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\">")))
    Copy Link
  • David Gregory 85 posts 211 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?

    Copy Link
  • David Gregory 85 posts 211 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?

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft