Wrapping Text Around an Inline Image
Permalink
We use lots of images in the content of our site. In past versions of the site (As WordPress and as SitefinityCMS sites) we could insert the image into the body of the text and the text would automatically wrap around the text.
We have migrated the site to Concrete5 and are finding that when we insert an image into the site there is no word-wrap. The images insert "in-line" and create a large blank area to the left or right of the image.
An examples is atwww.www.wearethepractitioners.com/index.php/topic-categories/art-ana...
Scroll down the page to the image of directional drilling, and then the Conroe "oil lake" image for examples.
We don't see anyting on how to fix the issue. Is it that we are using the worng method - that we should attempt to insert a separate block - not in the text based content block, but a content block that is just the image? WIll that force the text block to wrap the image?
Any guidance is helpful. I need to train and assistant on how to do this - as we have several hundred pages of content where we want to insert images, and we are holding off on images because of this issue.
Thanks in advance.
We have migrated the site to Concrete5 and are finding that when we insert an image into the site there is no word-wrap. The images insert "in-line" and create a large blank area to the left or right of the image.
An examples is atwww.www.wearethepractitioners.com/index.php/topic-categories/art-ana...
Scroll down the page to the image of directional drilling, and then the Conroe "oil lake" image for examples.
We don't see anyting on how to fix the issue. Is it that we are using the worng method - that we should attempt to insert a separate block - not in the text based content block, but a content block that is just the image? WIll that force the text block to wrap the image?
Any guidance is helpful. I need to train and assistant on how to do this - as we have several hundred pages of content where we want to insert images, and we are holding off on images because of this issue.
Thanks in advance.
Steevb, Thanks for the comment.
Following the order of insert image first and then insert text. I am still not seeing the correct word wrap. Please take a look at the image as the example I just attempted on the site.
I have to make this simple for our content creators, as they are the ones that are writing the content - adding the text to the new pages and then inserting the images into the content.
Looking at the source code for the example -:
<p><img alt="1940_00_00_winston_churchill_10_downing_st.jpg" class="content-editor-image-left" height="263" src="https://www.wearethepractitioners.com/index.php/download_file/view_inline/1211" width="400" />So now I start adding text to the page after inserting the photo. It does not appear that this is going to word wrap in a way that will be compliant with the way we want to see things done. Just the first line is wrapped - and it starts at the center of the image. My initial reactions are that there is still something fundamentally wrong with the underlying code, we are missing a key setting, or there is something that the theme is doing that keeps the proper word wrap from happening.</p>
There is the "view+inline" setting in the code. Reading through your comment - I suspect that you are suggesting that we make a change in the CSS. I take it that we can make a copy of the CSS - then alter the "view_inline" with a different setting? If so - that is outside my comfort zone, as I am really a content creator/editor and not a developer.
Following the order of insert image first and then insert text. I am still not seeing the correct word wrap. Please take a look at the image as the example I just attempted on the site.
I have to make this simple for our content creators, as they are the ones that are writing the content - adding the text to the new pages and then inserting the images into the content.
Looking at the source code for the example -:
<p><img alt="1940_00_00_winston_churchill_10_downing_st.jpg" class="content-editor-image-left" height="263" src="https://www.wearethepractitioners.com/index.php/download_file/view_inline/1211" width="400" />So now I start adding text to the page after inserting the photo. It does not appear that this is going to word wrap in a way that will be compliant with the way we want to see things done. Just the first line is wrapped - and it starts at the center of the image. My initial reactions are that there is still something fundamentally wrong with the underlying code, we are missing a key setting, or there is something that the theme is doing that keeps the proper word wrap from happening.</p>
There is the "view+inline" setting in the code. Reading through your comment - I suspect that you are suggesting that we make a change in the CSS. I take it that we can make a copy of the CSS - then alter the "view_inline" with a different setting? If so - that is outside my comfort zone, as I am really a content creator/editor and not a developer.
Hi DavidKSchneider,
To wrap text around an image in the Content block, you will need to set an alignment. Setting the alignment will "float" the image.
What version of concrete5 are you using?
To wrap text around an image in the Content block, you will need to set an alignment. Setting the alignment will "float" the image.
What version of concrete5 are you using?
MrKDilkington,
Thanks for the reply. We are on Version 8.1.0. We are using the Framework theme.
The alignment button on the dialog does move the image to left or right of the content area but does not float the word/text around the image. It appears to operate like the default of MS Word when inserting a photo, inserting the picture but breaking the text to above and below the image. See the attached screen snip for the dialog and results.
Other CMS packages have additional info in the dialog that allows for word wrap selection, or they automatically float the image.
Thanks for the reply. We are on Version 8.1.0. We are using the Framework theme.
The alignment button on the dialog does move the image to left or right of the content area but does not float the word/text around the image. It appears to operate like the default of MS Word when inserting a photo, inserting the picture but breaking the text to above and below the image. See the attached screen snip for the dialog and results.
Other CMS packages have additional info in the dialog that allows for word wrap selection, or they automatically float the image.
@DavidKSchneider
You have the CKEditor Enhanced Image plugin enabled. This plugin is designed to use custom CSS.
Here is a tutorial that explains how this works.
"Example CSS for the CKEditor Enhanced Image plugin"
https://documentation.concrete5.org/tutorials/example-css-for-the-ck...
An alternative is to enable the default Image plugin and disable the Enhanced Image plugin.
Dashboard > System & Settings > Basics > Rich Text Editor
You have the CKEditor Enhanced Image plugin enabled. This plugin is designed to use custom CSS.
Here is a tutorial that explains how this works.
"Example CSS for the CKEditor Enhanced Image plugin"
https://documentation.concrete5.org/tutorials/example-css-for-the-ck...
An alternative is to enable the default Image plugin and disable the Enhanced Image plugin.
Dashboard > System & Settings > Basics > Rich Text Editor
In your css give the image a ‘float’ to either the ‘left’ or the ‘right’ and bit of margin to either the left or to clear the text.
You might want to give the images a ‘class’. i.e. ‘.Imgleft’ or ‘.Imgright’to stop ALL images from behaving the same way.
See attached.