Need help? Check out our Support site, then


WordPress.com Forums » Support

Multiple photos on a row with no wrap

  1. rachelprickett
    Member

    How can I use the rich text editor and display multiple photos in a row and then text on a new line? Currently it seems I am only able to post

    1. a single photo on a line and then text on a new line (the photo has no alignment)

    2. multiple photos on a line (the photos have align=left) and then the text wraps around the photo

    3. The gallery feature, but when I have 15 photos meant all for different lines with text in between this does not work.

    Thanks for any insight,
    Rachel

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

  2. raincoaster
    Member

    We can't help without a link to the blog, starting with http. We pretty much always need to see it ourselves.

  3. rachelprickett
    Member

    raincoaster try:

    http://rachelprickett.wordpress.com/2009/04/12/kalalau-trail-and-hawaii-in-general/

    Thanks,
    Rachel

  4. 1tess
    Moderator

    When you have 2 or 3 pics, and want the text below them, not wrapped, insert them with "alignnone" from the insert media icon. Add a line break (return) and then your text below the pictures. The pictures will be left aligned. If you want them centered above the text, highlight them as you would for text, and align-center with the text align icon.

    If you want space between the pictures, use the mountain icon to edit the pictures and on the line "image properties," add a number for horizontal space, before you align them.

    The gallery "feature" is a work in progress, difficult to use, and troublesome if you want much control over how and which images are displayed. (in my opinion) Best to insert pictures one at a time and format them as you like.

  5. rachelprickett
    Member

    1tess:

    > The pictures will be left aligned.

    I tried your solution, making the pictures "alignnone" but this puts the photos on separate lines, as seen in the same link for the second two photos.

    Any other ideas? Is it just this theme's CSS that is doing this incorrectly?

  6. 1tess
    Moderator

    I think the captions are making it difficult.
    I would suggest that you insert the pictures, without the captions first. Do it one after the other with no line breaks or returns.
    Below are 2 of your pictures side by side:
    Then don't be afraid to look at the HTML. "<a" shows the end of one picture and the beginning of the other.

    <a href="http://rachelprickett.files.wordpress.com/2009/04/img_0795.jpg"><img class="size-medium wp-image-80" title="img_0795" src="http://rachelprickett.files.wordpress.com/2009/04/img_0795.jpg?w=300&h=225" alt="The Bus stop" width="300" height="225" /></a><a href="http://rachelprickett.files.wordpress.com/2009/04/img_0799.jpg"><img class="size-medium wp-image-81" title="img_0799" src="http://rachelprickett.files.wordpress.com/2009/04/img_0799.jpg?w=300&h=225" alt="Success at thumbing a ride!" width="300" height="225" /></a>

    Write some paragraphs under the pictures, then go back and add space between them and only last add captions.

  7. 1tess
    Moderator

    Sorry, it stripped the code:
    Then don't be afraid to look at the HTML. "<a" shows the end of one picture and the beginning of the other.
    </a><a
    be sure there is no line break or other stuff between the end and start tags.

  8. rachelprickett
    Member

    1tess,

    I followed what you said and everything worked great until I put the captions back in. I think I may have found a bug in the parser for the [caption] sections. When I added the captions back I did everything with no spaces between the last [/caption] and the next [caption...]. The first picture showed up great with the caption but after that the output on the screen was "[caption...]" then the image, then "[/caption]." It treated the caption portion as a regular paragraph instead of parsing it and outputting the "div" tag and "p" tag associated with the caption.

    Any other ideas? I really want the captions to be in there as part of my blog entries.

    Thanks,
    Rachel

  9. panaghiotisadam
    Member
     

    <table align="center"><tr><td>
IMAGE1_CODE_HERE
</td><td>
IMAGE2_CODE_HERE
</td></tr></table>

  10. 1tess
    Moderator

    And if you want to add captions separately:

    <table style="border:1px solid #cdcdcd;background-color:#eeeeee;padding:2px;" border="0">
<tbody>
<tr>
<td>1_IMAGE_CODE_HERE</td>
<td>2_IMAGE_CODE_HERE</td>
</tr>
<tr>
<td>1_CAPTION_HERE</td>
<td>2_CAPTION_HERE</td>
</tr>
</tbody></table>

    http://en.forums.wordpress.com/topic/aligning-captions-flush-left?replies=23#post-308802

  11. rachelprickett
    Member

    I am assuming since we are getting this in-depth into writing html, and --gasp-- using tables, that there is no way to do this with the built-in tools WordPress has (i.e. wsywig editor tools).

    Is there somewhere here I can request feature improvements ( like the simple ability to add a couple of pictures (with captions) in a row and then have a line break after that w/out using the HTML editor )? I suppose I could pay for the "Edit CSS" feature and then handle it that way too but WordPress charges WAY too much for that feature!

    Thanks for the tips & tricks.

  12. 1tess
    Moderator

    You can try in the "ideas" forum. But changes are not likely soon. Maybe they'll do some refining in the next upgrade.

    It is the "caption" feature that is messing things up for you, and I don't know anything about CSS or if that would fix it. I've had captions mess up in other situations, too. That's why I usually use tables or columns.

    With the sample code that panos (or I) provided, it's pretty much cut and paste, albeit partly in HTML. Insert your pictures, switch to HTML, cut the link for each, and paste over the "1_IMAGE_CODE_HERE". In my code (which I copied from him), you can then switch back to Visual editor and type your captions over "1_CAPTION_HERE"

  13. 1tess
    Moderator

    rachelprickett

    I realize this is not what you really want, but this way you set up your pictures as you already have, in pairs with captions, then just insert all the code for your pairs of pictures, captions and all into a table with only 1 row and 1 column:
    (Slightly easier because you only have to look at the dreaded html once per pair of pictures.)

    <table border="0" align="center">
<tbody>
<tr>
<td>
IMAGES_WITH_CAPTIONS_CODE_HERE</td>
</tr>
</tbody></table>
PARAGRAPH_TEXT_BELOW

    Sample of how your code will look:

    <table border="0" align="center">
<tbody>
<tr>
<td>

[caption id="attachment_80" align="alignleft" width="300" caption="test caption here and so on and on and on…"]<a href="http://rachelprickett.files.wordpress.com/2009/04/img_0795.jpg"><img class="size-medium wp-image-80" style="margin-left:2px;margin-right:2px;" title="img_0795" src="http://rachelprickett.files.wordpress.com/2009/04/img_0795.jpg?w=300&h=225" alt="The Bus stop" width="300" height="225" /></a>[/caption]

[caption id="attachment_81" align="alignright" width="300" caption="test caption here and so on and on and on…"]<a href="http://rachelprickett.files.wordpress.com/2009/04/img_0799.jpg"><img class="size-medium wp-image-81" title="img_0799" src="http://rachelprickett.files.wordpress.com/2009/04/img_0799.jpg?w=300&h=225" alt="Success at thumbing a ride!" width="300" height="225" /></a>[/caption]
</td>
</tr>
</tbody></table>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend, massa et porttitor condimentum, risus magna vulputate risus, eget facilisis erat augue et nibh. Fusce mattis varius mi. Sed sed elit vitae purus suscipit convallis. Aliquam ultricies vehicula libero. Proin nec ipsum. Donec et mauris. Pellentesque sollicitudin magna non purus. Sed ac mauris auctor purus hendrerit feugiat.

  14. rachelprickett
    Member

    1tess,

    The last solution is the most elegant yet. Thanks. I have posted this feature request to the ideas forum.

    Thanks for all your help.

  15. rachelprickett
    Member

    Ideas Forum Post:

    http://en.forums.wordpress.com/topic/better-image-and-caption-handling

  16. 1tess
    Moderator

    Yes, I saw that. May be the gallery will become more refined with the next update, whenever that will be. You really should link your name to your blog:
    Second item on this list:
    http://en.forums.wordpress.com/topic/7-things-to-know-before-posting-in-wordpresscom-forums?replies=1

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags