Twenty Twelve
[resolved] Alignment of captions / titles with images (19 posts)

  1. gnits
    Posted 3 years ago #

    How do I solve the problem where the Image and caption are mis-aligned in Std WP postings.

    I checked the forums and found where a prev release of WP changed the caption syntax and some themes were broken as a result.

    Surely, the 2012 theme should work with std WP.

    I do not want to manually enter HTML code etc at posting.

    I have a child theme where I can apply CSS changes if I knew what changes to apply.
    Here is a link. http://mattobrienblogcom.fatcow.com/matt_blog/?p=485

  2. junior466
    Posted 3 years ago #

    I also didn't like the way images were aligned in Twenty Twelve.

    I used:

    .wp-caption .wp-caption-text,
    .entry-caption {
    	text-align: center;

    Hope that helps.

  3. gnits
    Posted 3 years ago #

    I really appreciate your response.

    However, I have not managed to get this to work.

    Did you just paste this into the bottom of your child style.css.

  4. junior466
    Posted 3 years ago #

    Yes, I did. It seems like that something else is affecting how your captions are displayed. After inspecting your website with Firebug, it shows that the image "alt text" is not being displayed. Instead, you are writing the caption underneath the image and that's not how it's supposed to work.
    Here's what it shows on your website:

    <img width="400" height="400" src="http://mattobrienblogcom.fatcow.com/matt_blog/wp-content/uploads/2013/01/E_101_68951.jpg" alt="Alt Text xxx" class="size-full wp-image-367 ">

    alt="Alt Text xxx" is your caption. Whatever you write between those quotes is what is going to be displayed under your image. You can find that option when you are adding a new image to a post.
    I hope It makes sense.

  5. gnits
    Posted 3 years ago #

    I am stripping my child theme css down to bare bones and re-applying it item by item to check if individual items are still needed. (simple spacing, etc... to reduce white space in twentytwelve).

    When I finish that exercise I will revisit your comments as some behavior may be influenced by my frequent child css changes ongoing this afternoon.

    I look forward to looking at your answer in more detail then, when I will have less variables to contend with.

    Thanks again.

  6. junior466
    Posted 3 years ago #

    That's a great idea. You should definitely find the problem that way.
    Good luck.

  7. gnits
    Posted 3 years ago #

    Lee, I have posted screen grabs of the posting / problem image at this link.


    1. Caption entry screen.
    2. View of posting in Text View
    3. Link to sample posting
    4. Screen grab of caption to the right.

    I do not fully understand the point you have made above. I am not trying to modify html in a posting, just figure out how to get a Caption under a Picture (separate from any other posting text, say describing the picture) using standard WP [Should i be using a better tool / Theme]

    I hope you have time to look at this. I was delighted to get your response and about to test your suggestion again.


  8. junior466
    Posted 3 years ago #

    I completely understand what you are saying and it's very odd that is happening. At first I thought you just didn't like the way the captions are aligned in the theme.

    If you have disabled all modifications in the child theme and the problem is still present than it must be something else. Have you tried disabling plugins? You should also try completely removing your style.css from your child theme (just back it up first).

    If all the above fails than I recommend you start from scratch because it should not be happening. I have been playing with Twenty Twelve on my sandbox and have never ran across the problem you are describing.


  9. esmi
    Forum Moderator
    Posted 3 years ago #

    Re-upload a fresh, unpacked, copy of the Twenty Twelve folder to wp-content/themes using FTP or whatever file management application your host provides.

    And reset the plugins folder by FTP or phpMyAdmin

  10. junior466
    Posted 3 years ago #

    I just noticed you have a plugin managing the pictures in your gallery page. Have you tried disabling it?

  11. gnits
    Posted 3 years ago #

    Hi Lee,

    I will try that. This problem with captions was there a long time before the picture gallery plug-in, but it might be interfering with your suggestions above. A valid point.

    However, I have now approached it from another perspective.

    Have a look at this posting.


    You will notice
    1. I have a properly formatted caption formatted and placed under the image (exactly as I have specified in CSS).

    2. The extensive description has been pulled automatically from the jpg metadata (as has the caption, which WP does not allow you do).

    3. The Location (ex jpg metadata)

    4. Copyright (ex jpg metadata).

    I have not entered any of this data using WP editor or a replacement editor, but I have posted a single short code in a std WP posting. I manage my images in Lightroom, apply the metadata there. I have now an automated process to export from Lightroom . This is very close to what I have been striving at for months.

    I have wasted 2 full days dealing with the WP caption mess. It is absolutely amazing that this problem exists with such themes as 2012.

    I will go back later and explore the WP caption problem, but cannot afford to spend any time on it right now.

    I really appreciate your help and will return to this, purely out of stubbornness to get to the bottom of it. I will post here when I crack it. HTML / CSS is not my scene and this is hard, frustrating work for me. Thanks yet again.

  12. esmi
    Forum Moderator
    Posted 3 years ago #

    Either there is something seriously wrong in your child theme, you have edited the parent theme or one of your plugin is causing a problem. I have examined the source markup being generated on your site for captioned images and it is nothing like the code that WordPress usually generates when using the 2012 theme.

    Correct output:
    <div style="width: 445px" class="wp-caption aligncenter" id="attachment_786"><a rel="attachment wp-att-786" href="http://deity:8080/wordpress/2008/06/post-format-test-image-attached/boat-2/"><img width="435" height="288" class="size-full wp-image-786" title="boat" alt="boat" src="http://deity:8080/wordpress/wp-content/uploads/2011/01/boat.jpg"></a><p class="wp-caption-text">A picture is worth a thousand words</p></div>

    Your output:
    <div class="caption"><img width="400" height="400" src="http://mattobrienblogcom.fatcow.com/matt_blog/wp-content/uploads/2013/01/E_101_68951.jpg" alt="Alt Text xxx" class="size-full wp-image-367 "> Caption xxx</div>

    They're not even remotely the same.

  13. gnits
    Posted 3 years ago #

    I have been working backwards thru my email. So, sorry if these are a bit out of sequence.

    Esmi, I downloaded several fresh themes last night and had the same experience. I did not reset the plug-ins (only using 1)... but it might be the problem. I also checked with the Plug-In developer, who advised me a few days ago it was a WP / Theme issue.

    Anyway, for the moment I cannot spend any more time on this... but very curious to understand the root cause at the same time. i will return to this problem as soon as I can.

  14. esmi
    Forum Moderator
    Posted 3 years ago #

    The original 2012 theme works just fine. That's where I copied the correct output code from.

  15. gnits
    Posted 3 years ago #


    I have also tested using 2012 and no child. However, to be fair, I should do a fresh test from absolute scratch. I am more knowledgeable now than when I started. I will try again when I get the chance.

  16. junior466
    Posted 3 years ago #

    Please update us when you figure it out.


  17. gnits
    Posted 3 years ago #

    Will do. Keep the post open please.

  18. gnits
    Posted 3 years ago #

    Just a quick update.

    The problem looks very much like a plug-in issue.
    Here is a link to a working post, with the picture / captions and descriptions working as I expected.


    Thank you for your help.

  19. junior466
    Posted 3 years ago #

    Good to know it was not a theme issue.



Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic