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


  • Brenden 5 posts 35 karma points
    Dec 12, 2020 @ 15:37
    Brenden
    0

    TinyMCE right/left-align image

    I'm learning how to modify the TinyMCE editor provided with Umbraco, and I'm following the directions on the following page:

    https://our.umbraco.com/documentation/reference/config/tinymceconfig/

    I'm adding format options to left, center, and right-align images,

    for the format options I have the following:

    {
        "title": "Image",
        "items": [
            {
                "title": "Left Image",
                "selector": "img",
                "classes": "image-left"
            },
            {
                "title": "Center Image",
                "selector": "img",
                "classes": "image-center"
            },
            {
                "title": "Right Image",
                "selector": "img",
                "classes": "image-right"
            }
        ]
      },

    and the css I have is:

    .image-left {
float:left;
}

.image-right {
float:right;
}

.image-center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

    but the left and right options have text around the images? what config/css do I need to align images without text wrapping?

    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Dec 12, 2020 @ 16:43
    Huw Reddick
    0

    I don't think you can with css, the text needs to be in a wrapper so you can clear the float

    <p>
 <img  src="someimage.png" width="100" height="67" class="float-left" />
<span class='wrap'>
Text here. Text here. Text here. Text here.</span>
</p>

.wrap{
    clear: both;
}
.float-left{
  float:left;
}
    Copy Link
  • Brenden 5 posts 35 karma points
    Dec 12, 2020 @ 21:47
    Brenden
    0

    the problem is that this is all in a WYSIWYG editor, I cant know what the text will be or what wrapper itll be in.

    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Dec 13, 2020 @ 08:53
    Huw Reddick
    100

    That's the problem unfortunately, you either need to wrap the img in another element or the whole block I'm afraid, you can't apply a style to just the image to do so.

    There is a way to do this in the RTE with just a style however. When you insert an image in the rte and then apply a style from the styles dropdown, it wraps the image in span tag which it applies the class to, like below. 

    <p><span class="textwrap-right"><img src="/media/asnjritr/listings.png?width=150&amp;height=150" alt="" width="150" height="150" data-udi="umb://media/a2889b026571450bb054d7b90f6a2399" /></span>How does it add the text</p>

    because of this it is possible to achieve what you want by simply adding a couple of class styles to your css

    .textwrap-right img {
    float: left;
    margin: 5px;
}
/**umb_name:Wrap text - image->text*/
.textwrap-right:after {
    content:'';
    clear: left;
    display: block;
}

    enter image description here

    Copy Link
  • Brenden 5 posts 35 karma points
    Dec 13, 2020 @ 12:12
    Brenden
    0

    the issue is that I'm using TinyMCEConfig.config instead of RTE.css for the config, do you have any experience with that? I'm trying to use your solution with the config.

    Copy Link
  • Brenden 5 posts 35 karma points
    Dec 13, 2020 @ 12:31
    Brenden
    0

    for anyone else having the issue I had, here's my solution:

    RET.css:

    .image-left img {
float: left;
margin: 5px;
}

.image-right img {
float: right;
margin: 5px;
}

.image-center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

.image-left:after {
content: '';
clear: left;
display: block;
}

.image-right:after {
content: '';
clear: right;
display: block;
}

    TinyMCEConfig.config:

    [{
        "title": "Image",
        "items": [
            {
                "title": "Left Image",
                "selector": "img",
                "classes": "image-left",
                "vlock": "div"

            },
            {
                "title": "Center Image",
                "selector": "img",
                "classes": "image-center",
                "block": "div"
            },
            {
                "title": "Right Image",
                "selector": "img",
                "classes": "image-right",
                "block": "div"
            }
        ]
      }
    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Dec 13, 2020 @ 14:18
    Huw Reddick
    0

    cool, so adding the div block sorted it?

    Copy Link
  • Brenden 5 posts 35 karma points
    Dec 13, 2020 @ 18:38
    Brenden
    0

    Yup!

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies