Text/Image Wrap

• 

  lorenwade · Member · May 23, 2009 at 7:50 pm

  • Copy link
  • Add topic to favorites

  I can’t seem to figure this one out. I think it’s my coding, but for some reason I cannot get the text to wrap around my images. It works in the “New Post” box but does not display properly.

  Any suggestions? I can make a test post if you guys need.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · May 23, 2009 at 8:02 pm

  • Copy link

  When you insert the image, are you selecting “left” alignment or are you leaving it set to “none?”

• 

  lorenwade · Member · May 23, 2009 at 11:39 pm

  • Copy link

  I’ve tried left and right, no go.

• 

  thesacredpath · Member · May 24, 2009 at 1:15 am

  • Copy link

  Can we get a link to a post where this is happening?

• 

  lorenwade · Member · May 24, 2009 at 1:51 pm

  • Copy link

  Sure, here it is.

  http://brokenandglowing.com/test-page-lorem-ipsum/

  At the bottom of the page, you can see what I see in the edit window.

• 

  ellaella · Member · May 24, 2009 at 1:56 pm

  • Copy link

  I get a 404 from that link. Have you published it?

• 

  lorenwade · Member · May 29, 2009 at 12:49 am

  • Copy link

  I’m sorry, here’s a new page I made.

  http://brokenandglowing.com/2009/01/28/test-post/

  The link is at the bottom of how it should be (except the pictures are swapped now).

  Thanks again.

• 

  pdalbury · Member · May 29, 2009 at 6:26 am

  • Copy link

  insert image to post… while in the post edit mode… click on edit image (top left corner of image)… click on Advanced Settings tab… in the Advanced Image Settings section the “CSS class” needs to see: alignleft wp-image

• 

  pdalbury · Member · May 29, 2009 at 8:21 am

  • Copy link

  Another way to word-wrap an image is:
  in HTML edit mode locate the image code

  It’ll look something like <img src="" alt="" width="200" height="375" />
  add class=”alignleft wp-image”

  so it looks like:

  <img class="alignleft wp-image" src="" alt="" width="200" height="375" />

  that should do it

• 

  1tess · Moderator Emeritus · May 29, 2009 at 10:28 am

  • Copy link

  lorenwade

  Source code works all right in my test blog:
  <a href="http://brokenandglowing.files.wordpress.com/2009/05/photo.jpg"><img class="alignright size-medium wp-image-145" title="photo" src="http://brokenandglowing.files.wordpress.com/2009/05/photo.jpg?w=200&amp;h=300" alt="photo" width="200" height="300" /></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius odio nec arcu auctor interdum. Morbi tristique tellus fermentum diam ullamcorper auctor. Nunc elit nisi, ultrices sit amet malesuada eu, ornare eu sem. Maecenas ac nisl sed nibh dictum imperdiet in eu mi. Cras placerat leo non lectus ultrices hendrerit…
  Could there be something in your CSS that over-rides image alignment? (I know nothing about CSS)

• 

  pdalbury · Member · May 29, 2009 at 10:48 am

  • Copy link

  … your code works fine on my site… even if the photo is right align. i use “Rubric” theme.

  try stripping the code back:

  <img class="alignleft wp-image" src="http://brokenandglowing.files.wordpress.com/2009/05/photo.jpg?w=200&amp;h=300" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius odio nec arcu..

• 

  lorenwade · Member · May 29, 2009 at 5:02 pm

  • Copy link

  This is so weird.

  I checked the advanced image settings and they look right.

  Why would it work fine in a test blog, but not on mine? There has to be something in my CSS causing this override. Thanks for the input you guys. I’ll keep searching.

• 

  ellaella · Member · May 29, 2009 at 5:07 pm

  • Copy link

  Instead of align, try float. Much better.

  https://en.forums.wordpress.com/topic/text-around-the-image?replies=3#post-59191

• 

  lorenwade · Member · May 29, 2009 at 11:16 pm

  • Copy link

  My problem lies herein: if I do use that workaround, I will have to do so for every image and that’s ridiculous. I shouldn’t have to. I should be able to edit the CSS appropriately so it works every single time like it’s supposed to. I want 100% transparancy between the editor and the actual post.

• 

  bigdave44 · Member · May 30, 2009 at 12:37 pm

  • Copy link

  @lorenwade

  I have been wrapping text around images for a few months, but recently it has become a nightmare. It would seem that some changes have been made to the editor as I have found certain other differences, e.g. if you cut and paste text that includes the “more” indicator from the Visual display, the indicator is no longer carried across (it works OK from the HTML display).

  Because of this I now set the image as a background, thus avoiding rather than solving the problem.

• 

  lorenwade · Member · Jun 6, 2009 at 1:39 am

  • Copy link

  Okay, thanks for the input Bigdave.

• 

  aw1923 · Member · Jun 6, 2009 at 2:58 am

  • Copy link

  try adding this to your CSS.

  .alignleft,div.nav-previous {
  float:left;
  }
  
  .alignright,div.nav-next {
  float:right;
  }