Content Block Editor - wrap text around images

Is there a way to set text to wrap around an image with padding, etc, without editing the html directly? Thanks...

1.  Insert an image into the Content Block editor (RadEditor).
2.  Right-click the Image
3.  Click Properties
4.  Select right-align (or whatever)
5.  Configure Margins
6.  Click Save

Is this what you're looking for?

Gabe Sumner
Telerik | Sitefinity CMS

oops, simple really... sorry, hadn't appreciated there was a right click menu! :-) Thanks...

No apologies necessary.

You should see our internal newsgroups.  I've been known to write epic 3-page feature requests for things that are already readily available.  :)  

Gabe Sumner
Telerik | Sitefinity CMS

Hi,
I don't see an option to set margins around an image when aligning the image. I'm using the latest version, but also in 4.3 it isn't available.
Can you update me about what is changed and why it is changed?

Thanks,
Daniel

@all

I don't see the possibility to add paddings, margins anymore either. Just float left, right and none and so on.

I was thinking about adding some jQuery to helpt this matter. But I have not worked with jQuery before so I would appreciate your help on this.

This is what is rendered:

This seemd to work for me now

Any feedback is appreciated

Markus

This solution seems pretty hackish to me.  I dont think it makes sense for styles to come from Javascript.. Why isn't there a way to set margins in the image manager?  Couldn't there at least be a class assigned to left or right aligned images?

It was there, as far as I know. It disappeared with the introduction of the image editor.

Daniel

One vote here for an insert image feature like Wordpress. It's a snap to add in an image with caption, select whether to float left, right, or center and it uses styles instead of hackish margin/padding directly on the image. I feel like this should be one of the easiest things to do in a CMS yet it's confusing for non-technical users.

Greg

Well, then at least add also the margin fields, since a class name or style name is not very userfriendly. Anyway, if we have to vote now to get it back, then my vote too.

But it shouldn't have gone in the first place, right?

Daniel

Well guys you have my vote as well.
Setting margins should make it BACK to SF as soon as possible.

The attached image shows how convenient it was in 4.2.

Markus

@All,
I am also facing the same problem. I don't see options for inserting margins for the images in SF 4.4. Is there any solution for this?

I really need this functionality for a client -- it's really too bad that even in 4.4 this is not available.

i guess this one's getting swept under the rug unless something happens in PITS
http://www.telerik.com/support/pits.aspx#/public/sitefinity/9375 

Dear Trevor
You are right. It realy would nice to have this back. Don't think we will see it in 5.1 since there is a whole other focus and there are bugs (ordering) that seem to realy need some work done.
But my hope is that 5.2 will finaly be the release of the very small details imporovments. Like the one with setting margins top, bottom, left, right for images.

Voted on PITS. But usually that does not make to much difference.
Markus

To whoever said aligning an image left and aligning an image right should apply a class is spot on. Manually applying margins every single time to an image floated left or right via the panel is just ridiculous. How will you ensure consistent margins with floated images across multiple content editors?

Sitefinity should automatically apply a CSS class to the image to the tune of "<img class="sfContentImgAlignLeft" />

That way, the designer can say:

.sfContentAlignLeft
float: left;
margin-right: 20px;


Now the content creator worries about content, not layout. And the designer can worry about layout, not the content.

Wordpress does this simply and effectively.
codex.wordpress.org/Wrapping_Text_Around_Images

Here's a hacky way of how to define margins across the board for images aligned left or right with just CSS.

/*
Assuming your post content is wrapped in a container with the class "sfPostContent", select the images within that have the inline (gasp) style="float: left;". Then define your margins. Example:
*/

.sfpostContent img[style*="float: left;"]
    margin-right: 1em;
    clear: left;


.sfpostContent img[style*="float: right;"]
    margin-left: 1em;
    clear: right;


To override margins already applied by a content editor, simply apply the !important to the values in question. Example:
.sfpostContent img[style*="float: right;"]
    margin-left: 1em !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    clear: right;