Need help? Check out our Support site, then


WordPress.com Forums » Support

2 images in a row display as first image with 2 captions

  1. tepapamuseum
    Member

    Hi,
    I have been trying to insert several images one after the other in a blog post, and it doesn't work properly.

    Adding the images is done through the visual interface. This happened when editing with both IE8 and Firefox.

    Here is what happens:
    Things look fine in the Visual interface.
    When looking at the code, the result is a mash-up of the first image, and of the captions of the first and second image.

    Here is an example of the wrong code that WordPress is creating:
    [caption id="attachment_11555" align="aligncenter" width="300" caption="In this image you can now see the lovely brush-work by the artist and appreciate the full range of his palette. Photograph by Katherine Campbell, 2011 © Te PapaDetail of the largest flower before cleaning looking dark and hazy. Photograph by Michael Hall, 2011 © Te Papa"]<a href="http://tepapa.files.wordpress.com/2011/11/poedua-flower-0163.jpg"><img class="size-medium wp-image-11555" title="Poedua flower after cleaning" src="http://tepapa.files.wordpress.com/2011/11/poedua-flower-0163.jpg?w=300" alt="Poedua flower after cleaning" width="300" height="224" /></a>[/caption]

    This is what I would have expected to see instead:

    [caption id="attachment_11555" align="aligncenter" width="300" caption="In this image you can now see the lovely brush-work by the artist and appreciate the full range of his palette. Photograph by Katherine Campbell, 2011 © Te Papa"]<a href="http://tepapa.files.wordpress.com/2011/11/poedua-flower-0163.jpg"><img class="size-medium wp-image-11555" title="Poedua flower after cleaning" src="http://tepapa.files.wordpress.com/2011/11/poedua-flower-0163.jpg?w=300" alt="Poedua flower after cleaning" width="300" height="224" /></a>[/caption]</p> <p>[caption id="attachment_11543" align="aligncenter" width="260" caption="Detail of the largest flower before cleaning looking dark and hazy. Photograph by Michael Hall, 2011 © Te Papa"]<a href="http://tepapa.files.wordpress.com/2011/11/detail-of-flower-before-cleaning1.jpg"><img class="size-medium wp-image-11543" title="Detail of flower before cleaning" src="http://tepapa.files.wordpress.com/2011/11/detail-of-flower-before-cleaning1.jpg?w=260" alt="Detail of flower before cleaning" width="260" height="300" /></a>[/caption]<br />

    Is that a known bug, and you're currently working on it?

    Thanks a lot,

    Florence Liger, Webmaster at Te Papa

    The blog I need help with is blog.tepapa.govt.nz.

  2. panaghiotisadam
    Member

    This happens when you're not careful and insert the second image while your cursor is still inside the caption area of the first image.

    And please link to the blog in question when posting here: the site linked to your username isn't a wp.com blog.

  3. tepapamuseum
    Member

    Thanks a lot for that, and sorry for forgetting to include the URL. The URL shown in the form I was filling in was the one of our blog in WordPress, so I thought it would show with my user name. (Maybe changing that form could help with that?)

    Anyway, back to our blogging, what approach do you suggest to get my cursor in the right place?

    The way I do it is currently is the following:
    - My starting point is an image with a caption, and a paragraph of text underneath
    - I place my cursor at the beginning of the paragraph
    - I press enter to add a paragraph break
    - I press the up arrow to get my cursor in the newly created paragraph break

    I thought I was being pretty careful doing that, but obviously it's still not the right way.

    What should I be doing instead?

    Thanks a million!
    Florence Liger

  4. tepapamuseum
    Member

    Hello again,

    Would someone be able to give me some pointers as to what we're doing wrong?

    Thanks a lot!
    Florence Liger

  5. panaghiotisadam
    Member

    This happens when you're not careful and insert the second image while your cursor is still inside the caption area of the first image.

    There are no other pointers.
    In general it's safer to insert captioned images after you're done with all the text.

  6. tepapamuseum
    Member

    Do you mean that I should insert the 2nd image from the HTML tab instead of the Visual tab to see exactly where my cursor is?

    So far, I feel like I'm doing exactly what you're saying: I am being careful not to have my cursor in the caption of the image, in the Visual tab. This is also after all my text is finished.

    By doing the following, I can definitely see that my cursor is not inside the caption area of the first image:
    - My starting point is an image with a caption, and a paragraph of text underneath
    - I place my cursor at the beginning of the paragraph
    - I press enter to add a paragraph break
    - I press the up arrow to get my cursor in the newly created paragraph break.

    At that point, my cursor is in the blank space between the image caption and the next paragraph of text.

    I'm really sorry to insist on that one. I'm supporting 40 authors on our blog. If I can't get it to work, I can't explain to them how to make it work for them :/

  7. panaghiotisadam
    Member

    No, in my previous reply I didn't actually mean using the HTML editor. But yes, if you're comfortable with it it's a lot better. If you know what each piece of coding represents and know what you're doing, then the HTML editor is foolproof: in the visual editor you can never be sure what exactly you're selecting etc. (personally I never use the Visual editor at all for my own posts).

  8. tepapamuseum
    Member

    Ok, I see. Did you try the visual tab then, and have been able to create a post with several images in a row, with captions, without using the HTML tab at all?

    It does look like a real bug to me, so I'd like to confirm whether someone using a different template is having it as well, or whether it's just us. If you are having the problem as well, then I'll look for a way to file a bug report with WordPress. If it works fine with you, maybe it's just our template that's creating that problem, and I'll look for some template help, or will consider changing our template.

    My problem here is that while I am able to go and fix up anything using the HTML tab, I am the only one in my organisation feeling that way. For now, my answer to my coworkers is "you cannot have several images in a row".

    Thanks a lot for your help!
    Florence Liger

  9. 1tess
    Moderator

    Your co-workers can have several images in a row, using only the visual editor.

    But you must caution them to put the images in a row, write the rest of the post, in the visual editor. Add captions only just before publishing—at the end of making the post look they way they want it to, sans captions.

    One can not be certain where the cursor is in the visual editor when adding captions and then more images and text.

    Just have them add the captions via the edit media in the visual editor after the post is finished.

    Or tell them not to use captions on pictures. The visual editor can mess things up as Panos described above.

  10. panaghiotisadam
    Member

    And these issues have to do with the limitations of the visual editor: nothing to do with what template you're using.

  11. tepapamuseum
    Member

    Thanks for that, 1tess!

    I can see them be ok with doing that. It's not ideal, but I think it will be manageable for the few times we need it :-)

    Yipee \o/

    Thanks for your time too, panaghiotisadam :)

  12. 1tess
    Moderator

    Not ideal, no, but as Panos said, the visual editor has limitations.

    Happy blogging.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags