Need help? Check out our Support site, then


WordPress.com Forums » Support

Image alignment and text wrapping

  1. kleinimages
    Member

    Hi,

    I have read the article on how to post and align both images and text. I am still having problems. I want to simply have the images on the left with the text next to it on the right. I have tried both image left - which works until there is a second images and then the second image get placed under and slightly to the right of the the above image. All subsequent images get this "staircase" formatting. When I try no format for the image - it works for the picture but then I have a problem putting text next to the image. Is there some setting or editor that will make this easier?

    Thanks.

    David

    The blog I need help with is kleinimages.wordpress.com.

  2. panaghiotisadam
    Member

    Setting the alignment of an image to left means that the rest of the content will wrap around. If the text you want side-by-side with the image is shorter than the image, then rest of content includes next image, hence the "staircase" effect. To override that, you need to switch the editor to HTML and paste this after each image/text pair:
    <br style="clear:both;" />

  3. kleinimages
    Member

    great thanks. question - it seems like after it worked and I went back to the visual editor I lost those tags. Is that the normal behavior? does that mean once you use the html editor do not switch?

    thanks again.

  4. panaghiotisadam
    Member

    No that's not normal behavior, provided you did use the tag somewhere after left- or right-aligned images (otherwise the editor considers it useless and strips it out). Try again, and if you get the same issue I'll give you a safer alternative.

  5. kleinimages
    Member

    I went again into the visual editor and I lost the formatting. I'm not really very strong with this html stuff - i would be happy to email you the document so you can advise me if I'm putting the tags in the correct place - just tell me where to email it.

    thanks for your help.

    David

  6. timethief
    Member

    I'm sorry but we Volunteers do not providesupport by email. We provide support only inb threads so the whole community can ebenfit from what's posted.

  7. timethief
    Member

    When the amount of text beside and image does not occuopy the same amount of apce as the image does you get a staggered image effect. That's why you need to click and switch to the HTML editor and enter and paste this after each image/text pair:
    <br style="clear:both;" />
    Switching between the Visual and HTML editing modes is easy. Just use the tabs directly above the right side of the editing area.

  8. panaghiotisadam
    Member

    @kleinimages: As timethief said, we don't help via mail. But you don't have to do that anyway: we can see your code. Try again, click Update without switching to Visual, and I'll check the post or page. Which one would it be?

  9. kleinimages
    Member

    I'ts not posted yet - it's still a draft. I would be happy to cut and paste the code here if that is ok.

  10. panaghiotisadam
    Member

    Ok, if it's not too long. Enclose it in backticks (see below reply field).

    Also, what browser and version are you using?

  11. kleinimages
    Member

    I've tried it in IE8 and IE9 as well as Firefox. same issue.

    Do I just put a ' in the beginning then andother ' at then end?

  12. panaghiotisadam
    Member

    One at the beginning and one at the end. But not the one you typed: see below the reply field.

  13. kleinimages
    Member
     

    <a href="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1070.jpg"><img class="alignleft  wp-image-329" title="kleinpix_2009-09-13_1070" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1070.jpg?w=300" alt="" width="196" height="130" /></a>I am a NY Giants fan. My entire family is NY Giants fans.  As a matter of fact, the Giants are the only pro sports team that my family agrees upon (Yankee, Mets split, Devils, Bruins split - my oldest kid lives in New England - fortunately he is NOT a Pats fan, and we couldn't care less about basketball).  Needless to say we are a very happy and excited household as we await the Super Bowl.
<p style="text-align:left;">I have had the opportunity to shoot some pro football games from the sidelines.  It's a kick - and lots of hard work.  Running up and down the sidelines with two cameras, lenses, monopod  - about 25 pounds worth of equipment.  The first time I shot a game I did a full "documentary" of the entire day - not just the action on the field.   Since this is a  blog about photography I thought I would share that experience here.  This is from the Giants - Redskins home opener on Sept 13, 2009 back in the old Giants Stadium.</p>
<a href="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_968.jpg"><img class="wp-image-332 alignleft" title="kleinpix_2009-09-13_968" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_968.jpg?w=300" alt="" width="192" height="138" /></a>

Visiting players arrive by bus from their hotel.<br style="clear:both;" /><a href="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_970.jpg"><img class="wp-image-335 alignleft" title="kleinpix_2009-09-13_970" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_970.jpg?w=300" alt="" width="281" height="217" /></a>
<div class="mceTemp">
<div class="mceTemp">The famous "tunnel" where players emerge from to take the field.</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"><img class="wp-image-340 alignleft" title="kleinpix_2009-09-13_14584" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_14584.jpg?w=199" alt="" width="199" height="299" />Eli Manning during pre-game warm ups.</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"><a href="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_9731.jpg"><img class="wp-image-357 alignleft" title="kleinpix_2009-09-13_973" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_9731.jpg?w=300" alt="" width="300" height="199" /></a>Ever wonder how the jets / helicopters that fly over the stadium time it to show up when the national Anthem is over?  These are the National Guards guys that call in the air show and co-ordinate the timing.  Here they are checking their communications.</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"><a href="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_14620.jpg"><img class="wp-image-367 alignleft" title="kleinpix_2009-09-13_14620" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_14620.jpg?w=300" alt="" width="300" height="296" /></a>Pre-game dressed warm ups (one of Sunday's hero's - Lawrence Tyne's warms up)</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"><a href="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1000.jpg"><img class="size-medium wp-image-371 alignleft" title="kleinpix_2009-09-13_1000" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1000.jpg?w=300" alt="" width="300" height="199" /></a>Pam Oliver on the sidelines pre-game.</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"><a href="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1021.jpg"><img class="size-medium wp-image-372 alignleft" title="kleinpix_2009-09-13_1021" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1021.jpg?w=300" alt="" width="300" height="140" /></a>This is a really bad fly over picture.  First off, I wasn't ready (even though I knew it was happening - see previous picture of the National Guardsmen preparing).  My shutter speed was way too fast so I have the classic no-motion that makes the chopper look like it has stalled and is about to fall on the stadium.  My timing was also pretty bad - should have gotten it before the scoreboard obstruction.  Lastly - dead smack in the middle of the frame boring composition.  Definite fail on the flyover shot.</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"><a href="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_14806.jpg"><img class="size-medium wp-image-375 alignleft" title="kleinpix_2009-09-13_14806" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_14806.jpg?w=265" alt="" width="265" height="300" /></a>My favorite action shot from the game: Eli Manning gets the pass off before Washington's Andre Carter slams him.  Carter beat Giants David Diehl to get to Manning.</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"><a href="http://kleinimages.files.wordpress.com/2012/01/dk.jpg"><img class="size-medium wp-image-377 alignleft" title="dk" src="http://kleinimages.files.wordpress.com/2012/01/dk.jpg?w=300" alt="" width="300" height="225" /></a>Picture of your's truly taken by a friend in the stands.</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"><img class="size-medium wp-image-378 alignleft" title="kleinpix_2009-09-13_1074" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1074.jpg?w=300" alt="" width="300" height="199" />I was told I would be the only photographer at the game...</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"><a href="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1103.jpg"><img class="size-medium wp-image-379 alignleft" title="kleinpix_2009-09-13_1103" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1103.jpg?w=300" alt="" width="300" height="199" /></a>Post game.</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"><a href="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1093.jpg"><img class="wp-image-380 alignleft" title="kleinpix_2009-09-13_1093" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1093.jpg?w=300" alt="" width="300" height="199" /></a>Nice.</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"><a href="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1133.jpg"><img class="wp-image-381 alignleft" title="kleinpix_2009-09-13_1133" src="http://kleinimages.files.wordpress.com/2012/01/kleinpix_2009-09-13_1133.jpg?w=300" alt="" width="300" height="254" /></a>Coach's post-game interview (Giants won, by the way).</div>
 
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<h1 class="mceTemp"><span style="color:#3366ff;">One last thing - <strong>Go Blue.</strong></span></h1>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
<div class="mceTemp"> </div>
</div>

  14. panaghiotisadam
    Member

    That's an awful lot of wrong code! You need to delete everything and re-do it.

    Things to note:
    • Make sure the Format tool (row 2 tool 1) is set to Paragraph.
    • Don't press return repeatedly for extra space.
    • Insert captioned images after you've finished the text; after inserting a captioned image, make sure the cursor is outside the caption area before doing anything else.
    • Don't use any of the edit tools to modify the styling of the captions: they aren't editable.

  15. kleinimages
    Member

    thanks for all your the help.

    I assume I still need to put in <br style="clear:both;" /> ?

  16. kleinimages
    Member

    I did everything you suggested but as I add the pictures, the code disappears...then it gets stacked up. I go back and forth between the edtors, add the code, looks good, go to the next picture (all the text is in) and the previous formatting disappears. There must be an easier way. Is there some html; editor I can use? this is frustrating...

  17. panaghiotisadam
    Member

    Unfortunately the only way I would be able to help more is if I were there with you to actually see what's going wrong.

    If you are a PC user, you can try using Windows Live Writer to prepare your posts.

  18. timethief
    Member

    If you are a Mac user your can use Ecto as an offline blog editor to create and publish your posts and pages to your blog.

  19. kleinimages
    Member

    Got it posted. Thanks for all the help.

  20. timethief
    Member

    @kleinimages
    Wow! That's good news. Thanks so much for returning and sharing it. Happy blogging.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags