WordPress.org

1. caseylessard
   Member
   Posted 11 months ago #
   

   The caption option doesn't work properly in 3.4, breaking the box and anything CSS that follows the caption. It appears as if the caption code doesn't close itself or clear itself. This does not affect posts made prior to the update.

   Before:
   http://caseylessard.me/2012/06/03/a-portrait-of-a-young-lady/

   After:
   http://caseylessard.me/2012/06/16/a-touch-of-glamour/

   Others have posted this issue, but the moderators say the theme developers have to fix it. My theme developer (Headway) says WordPress has to fix it. Am I on my own here?
   Casey

2. alchymyth
   The Sweeper & Moderator
   Posted 11 months ago #
   

   without the 'broken' caption visible in the posted link, there is no possibility anybody can comment on your problem.

3. caseylessard
   Member
   Posted 11 months ago #
   

   Sorry... I fixed it by killing the caption, but I've reactivated the caption on the first photo at that link. See what happens to everything afterward.

4. alchymyth
   The Sweeper & Moderator
   Posted 11 months ago #
   

   unfortunately, I have no solution;

   seems to be an issue particularly with headway themes;
   I guess they possibly run some filter code on the caption shortcode function, for the 'pin-it' button (?).

5. Jay Versluis
   Member
   Posted 11 months ago #
   

   Confirmed - I'm not using Headway, and I have the same issue.

   The problem is that a caption should be generated like this:

   [caption id="attachment_123" align="aligncenter" width="550" caption="My Caption"]<img src="...">[/caption]

   but WordPress 3.4 seems to insert it as

   [caption id="attachment_123" align="aligncenter" width="550"]<img src="...">My Caption[/caption]

   Looks like we have a bit of manual editing to do before they put out a hotfix for this.

6. Rev. Voodoo
   Volunteer Moderator
   Posted 11 months ago #
   

   What theme ARE you using? I've seen a few different themes out there having caption issues

7. caseylessard
   Member
   Posted 11 months ago #
   

   It's strictly an issue with the WordPress coding, as it wasn't a problem before the update and is only an issue for posts after the update. I've asked my theme developer, and they flat out said, how about WordPress fixes that? But WordPress keeps saying it's a theme issue. I'm firmly in the camp that it needs to be fixed in 3.4.1.

   In the meantime, is there a place I can fix this manually, and is that a good idea?
   Casey

8. esmi
   Theme Diva & Forum Moderator
   Posted 11 months ago #
   

   It is not a WordPress core or update issue. It is up to your theme's developer to fix the issue in his/her theme. FWIW, I'm not seeing caption issues in any of the 15 free themes I currently have available for download. So it most be a theme-specific issue.

9. Jay Versluis
   Member
   Posted 11 months ago #
   

   It's not a theme issue. Try to add a new picture to a fresh post from the back end. Then switch to the HTML view and see what WordPress has inserted. Then compare this to what WordPress has inserted before the upgrade. The Theme has nothing to do with how WordPress inserts code into the post.

10. lexistudio
    Member
    Posted 11 months ago #
    

    Hi, I also had the same problem with my image captions not being aligned under the image or in the frame (the frame is lost) after the upgrade to 3.4. I use theme Twenty-Eleven, and I haven't done anything except hit the update button. I know nothing about code, so I'm not sure what to do to fix this...

    My old posts are fine, my new post is not: http://lexireidstudio.com/2012/06/17/shadow-boxes-and-three-dimensional-collages/

    Any assistance would be greatly appreciated!!

11. caseylessard
    Member
    Posted 11 months ago #
    

    Esmi, I believe you are wrong, as are other moderators on similar posts. If lexistudio is having this problem with Twenty-Eleven, the problem is not with themes. Has anyone from WP actually tested this in real time as per my original post?

12. Rosie-L
    Member
    Posted 10 months ago #
    

    Well, I'm using Thesis and I am confident that this is definitely and provably a WordPress issue, as has been exactly described by Jay Versluis in his first post above.

    As he says, if you change this:

    [caption id="attachment_123" align="aligncenter" width="550"]<img src="...">My Caption[/caption]

    to this:

    [caption id="attachment_123" align="aligncenter" width="550" caption="My Caption"]<img src="...">[/caption]

    then captions start working properly again.

    All our different themes were handling captions just fine before the update, now we are all suffering the same problem, and I'll bet we can all fix it by making the changes suggested by Jay. Thus logically it is a problem that has been introduced by the WordPress update.

13. Rosie-L
    Member
    Posted 10 months ago #
    

    CORRECTION:

    OK, further research indicates that we might be wrong about it being a WordPress problem.

    I'm not a coder, but from what I can gather, the way WordPress used to do captions in the past was problematic, and so a number of theme developers introduced their own hacks to compensate.

    Now WordPress 3.4 has implemented Captions correctly, the hacked solutions used by those themes are failing.

    Still, if captions are broken on your site and you have to implement corrections, Jay's recommendation still works never-the-less.

14. lexistudio
    Member
    Posted 10 months ago #
    

    Except I'm using Twenty Eleven and I'm such a newbie to WP that I haven't done anything except do the automatic WP upgrades and now I have this caption issue. I uninstalled all of my plugins (I only have 3), tried again, did the upgrade again and still not better.

    I would love to try Jay's fix - but where do I go on my site to do this? I normally do everything from the Dashboard, so I have zero coding experience.

15. Jay Versluis
    Member
    Posted 10 months ago #
    

    Hi liexistudio,

    no problem about the lack of experience - we've all been there, trust me ;-)

    Go to where and how you normally create a new post (or amend an existing one), it's the Edit Post window. At the top right of your text editing window there are two tabs: Visual and HTML. You're probably in the Visual Editor most of the time for typing text and inserting images. When you click on HTML you'll see the code that WordPress generates in the background.

    Once you've added an image with caption, click on the HTML tab and find a code section beginning with [caption... ] and ending with [/caption], just like I said above, and as Rosie-L suggested.

    Any questions, let us know.

16. lexistudio
    Member
    Posted 10 months ago #
    

    Thanks Jay - I'll try that tonight (back at home with no work distractions) - and report back.

17. leahingram
    Member
    Posted 10 months ago #
    

    Hi. I tried the fix suggested above, and every time I toggled between the html tab and visual tab, WordPress changed the code back to the original code. Meaning that nothing changed. You can see an example of the funky caption thing going on--all flush right--here: http://www.phillyonthecheap.com/2012/06/25/flip-flops-for-a-buck/

    I would appreciate any suggestions. Thanks.

    Leah

18. Jay Versluis
    Member
    Posted 10 months ago #
    

    Hi leahingram,

    you are right, WordPress puts the caption back when you go back to the Visual Editor. The only way to make those changes permanent is to not change back to the Visual Editor until you've published your post.

    If you're making edits after you've published, switching back to the Visual Editor will also change your captions back to the "broken" version. I suggest to make edits in HTML view. You can even switch the Visual Editor off altogether if you like under Users - Your Profile (check the first tickbox "Disable visual editor").

19. Andrew Nacin
    WordPress Dev
    Posted 10 months ago #
    

    Hello everyone.

    This is a deliberate change in WordPress 3.4. Instead of having caption="" as an attribute of the [caption] shortcode, WordPress inserts the caption into the main content of the shortcode, after the image and in between [caption] and [/caption].

    This change in 3.4 was necessary to allow for HTML in captions. But, like everything we develop, it was deliberately coded so it would be backwards compatible. Any theme using the 'img_caption_shortcode' filter to override how a caption is generated would work swimmingly, even though the format changed.

    If I had to guess, the common issue for all for these themes is that they call add_shortcode( 'caption', 'some_function_in_their_theme' ); to customize the caption, instead of using the aforementioned filter. This is wrong. Themes should not be doing this. If the theme you are using does this, please contact the theme author. If they disagree it is a problem with their theme, I'd be happy to explain it to them.

    I came here after seeing a bug report, but note that after two weeks and 2.5 million downloads, this is the only thread I've seen on this issue, so thankfully it does not appear to be adversely affecting many sites. I'm sorry if it has affected you. If you do know of any other threads, please link them to me.

    Thanks,
    Nacin

20. Jay Versluis
    Member
    Posted 10 months ago #
    

    Thanks for letting us know Nacin, think we were getting worried there ;-) I understand the code change, makes sense to allow for HTML in captions.

    I've just tested the two latest versions of TwentyTen and TwetyEleven, they're both looking good. Thesis have released a patch for this too.

    @caseylessard you best get in touch with the Headway guys and make them aware of this change in WordPress.

21. lexistudio
    Member
    Posted 10 months ago #
    

    Hi Nacin,

    Thanks for letting us know - I've done Jay's manual fix on my image captions (one by one - very annoying):

    After WP 3.4:
    

    [caption id="attachment_762" align="aligncenter" width="300"]<a href="http://lexireidstudio.com/2012/06/17/shadow-boxes-and-three-dimensional-collages/assemblage-1-2/" rel="attachment wp-att-762"><img class="size-medium wp-image-762 " title="Waxed images and abstract encaustic paintings ready for collage assembly." src="http://lexireidstudio.com/wordpress/wp-content/uploads/2012/06/assemblage-13-300x230.jpg" alt="" width="300" height="230" /></a> Waxed images and abstract encaustic paintings ready for collage assembly.[/caption]

    Manual change: moving caption and fixing alignment
    

    [caption id="attachment_762" align="alignnone" width="300" caption=”Waxed images and abstract encaustic paintings ready for collage assembly.”]<a href="http://lexireidstudio.com/2012/06/17/shadow-boxes-and-three-dimensional-collages/assemblage-1-2/" rel="attachment wp-att-762"><img class="size-medium wp-image-762 " title="Waxed images and abstract encaustic paintings ready for collage assembly." src="http://lexireidstudio.com/wordpress/wp-content/uploads/2012/06/assemblage-13-300x230.jpg" alt="" width="300" height="230" /></a> Waxed images and abstract encaustic paintings ready for collage assembly.[/caption]

    Will I have to keep doing this for every image on every new post??

22. Andrew Nacin
    WordPress Dev
    Posted 10 months ago #
    

    @lexistudio: Your site is using Twenty Eleven, which means things should be fine. So most likely, you have a plugin interfering with your captions. I would work to figure out what plugin it is. You will likely be better served by opening your own support thread.

    The alternative is doing this for every image on every new post. But if you figure out what plugin it is, I'll see to it that it gets fixed.

23. lexistudio
    Member
    Posted 10 months ago #
    

    Thanks Andrew - I did start another thread on this topic (there's at least 4 others that I know of) - and I did inactivate my plugins (I only have 3 - jetpack,askimet, and subscribe to comments). Still is an issue for me.

24. RetroCollage
    Member
    Posted 10 months ago #
    

    Thank you, Rosie-L & Jay Versluis, for a masterful solution to the caption problem!

    You were absolutely right: it was a WordPress code issue. Adding Caption= "" within the opening caption tag, & transposing the caption title (by cut-&-paste) within those quotes, fixed everything.

    You saved me hours of de-activating plug-ins & blindly shooting in the dark for a coding solution. Thanks again for putting the word out there for the rest of us.

25. kmessinger
    Volunteer Moderator
    Posted 10 months ago #
    

    If you are using Thesis, they have posted a temporary fix for their theme.

26. Kevin Leary
    Member
    Posted 10 months ago #
    

    I have a few themes that use the add_shortcode( 'caption' ) culprit mentioned by Nacin . It's used to remove the inline width style that is added to caption's for responsive CSS design purposes.

    Unfortunately, I don't think there's going to be anyway to achieve this without replacing the caption shortcode like this.

27. Kevin Leary
    Member
    Posted 10 months ago #
    

    I take that back, I was misunderstanding the value of the img_caption_shortcode filter, for my specific situation this worked nicely:

    [Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

28. jomichar
    Member
    Posted 10 months ago #
    

    I had this same issue no matter what theme I chose - even Twenty Eleven and no plugins. Or so I thought.

    It turned out the display of the caption was just messed up in the editor, but when I previewed the page it looked fine.

29. andidas
    Member
    Posted 10 months ago #
    

    How can i fix the theme?
    How do i change the add_shortcode to img_caption_shortcode?

30. andidas
    Member
    Posted 10 months ago #
    

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. Don't use blockquoute, code formats poorly that way. ]

    I have managed to fix it with the help of Function Reference/add filter.
    I replaced the add_shortcode('wp_caption', 'zack_img_caption_shortcode'); in the Zack990 theme functions.php with the
    'my_img_caption_shortcode_filter'
    in the link and modified some of the syntax to give the same output as the previous code.

    add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);
    function my_img_caption_shortcode_filter($val, $attr, $content = null)
    {
    	extract(shortcode_atts(array(
    		'id'	=> '',
    		'align'	=> '',
    		'width'	=> '',
    		'caption' => ''
    	), $attr));
    
    	if ( 1 > (int) $width || empty($caption) )
    		return $val;
    
    	$capid = '';
    	if ( $id ) {
    		$id = esc_attr($id);
    		$capid = 'id="figcaption_'. $id . '" ';
    		$id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
    	}
    
    	return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: '
    	. (4 + (int) $width) . 'px">' . do_shortcode( $content ) . '<p ' . $capid
    	. 'class="wp-caption-text">' . $caption . '</p></div>';
    }

Topic Closed

This topic has been closed to new replies.