Simple wrap text around image orchard CMS

Question

here is an easy one, anyone know how to have text fit neatly around an image when adding content in Orchard CMS?

Its fundamental to webpage content in my opinion but its the only thing 'out of the box' that Orchard seems to not handle

I'm sure there is a workaround perhaps with a style tag or something but i'd rather not implement a fudge in-case im missing something simple here

At the moment if i add an image by first placing the 'I' beam cursor at leftmost char position 0 in the middle of text the following HTML is generated by EDITOR. Notice in BOLD the IMAGE placed with no formatting so looks terrible.

any comments appreciated

Ivan Ferić Ivan Ferić · Accepted Answer · 2012-10-31T09:29:36

There are several things you could do.

First of all, when you open media picker, there is a drop down menu called Allignment. If you select, for example Left, the text will wrap from the right side of the image. If you select Right, image will move to the right, and the text will wrap from the left side of the image.

However, from design point of view, preferred way of wrapping text around image is by using CSS styling.

This is the example of the style you would need to wrap the text from the right side of the image:

img {
    float: left;
    padding: 5px;
}

And this is example of wrapping it from the left side of the image:

img {
    float: right;
    padding: 5px;
}

Note, that this style will effectively be applied to all the images in the site and that I added some spacing around the image. If you want it to apply to only specific images, you'll need to change the CSS selector to accommodate what you're trying to do.

To actually see this from the Orchard administration, you'll have to add this style to /Modules/TinyMce/Scripts/themes/advanced/skins/default/content.css and clear the cache from your browser.

To see this on your theme, you'll have to add this style to your theme's CSS.

Simple wrap text around image orchard CMS

1 Answers