Aligning multiple images in a wordpress.com post

• 

  tobyadamson2521 · Member · Jan 21, 2013 at 4:38 pm

  • Copy link
  • Add topic to favorites

  My site is http://www.adamsonvisuals.com and I’m trying to create a post with mutiple images and wrapping text around the images. Whatever I try ends up with very confused formatting – Easy to wrap txt around a single image but as soon as add a subsequent image it all goes pear shaped and formatting no longer seems to work. Any suggestions?

  WHY is wordpress not wysiwyg?

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

• 

  richardmtl · Member · Jan 22, 2013 at 3:25 pm

  • Copy link

  Hi Toby,

  Can you point me to the post that’s giving you trouble? That’ll give me a better idea of what the issue is and how we can fix it. Thanks!

• 

  tobyadamson2521 · Member · Jan 22, 2013 at 3:44 pm

  • Copy link

  Hi – I’ve generated a test post to show you the issue – i’d avoided it on last post by using slideshow instead of embedded images as I’d hoped –

  find an example draft here..

  http://adamsonvisuals.com/?p=1379&preview=true

  Thanks in advance..

• 

  richardmtl · Member · Jan 23, 2013 at 3:33 pm

  • Copy link

  Hi, that draft was great, it really made it clear what you were trying to achieve, thanks!

  I went in and modified your draft. If you go to the “text” tab of your editor, you will notice that I added the following, after each “paragraph” of text:

  <p style="clear: both;"></p>

  I also added one at the very end of your post, because otherwise that image overlapped the the end of the post area.

  To learn a bit more about floats and clearing them, you can have a look here:

  All About Floats

  Basically, when you “align” an image in the WordPress editor, you are actually floating them left or right. That means that all the text will flow “around” them, as is explained in the article I linked to. By adding an empty paragraph element with a “clear:both” style in it, you are stopping the flowing and floating for the previous elements, which allows you to align the next elements as you’d like.

  If you find that using a p (paragraph) element adds too much space in between your images, you could try replacing it with a span, like so:

  <span style="clear: both;"></span>

  I hope this helps! Let me know if you have any further questions.

• 

  tobyadamson2521 · Member · Jan 23, 2013 at 4:08 pm

  • Copy link

  Many thanks – that seems to have sorted that. While you are there – any idea how I could get a full size image slideshow to appear on my homepage using this gridspace theme – the static image home page is a little err… ‘static’ but the other option of blogs is not what I’m after either. I’d like a few large changing images as a welcome page. Cheers in advance and thanks..

• 

  richardmtl · Member · Jan 23, 2013 at 6:48 pm

  • Copy link

  I’m glad that helped you out.

  Now for your next question, although you can’t add a slider, you could add a custom header image, and you can change it up by having a grid of images rather than just the one image. Have a look at the theme instructions here:

  http://theme.wordpress.com/themes/gridspace/

  Let me know if that is of any help.