39 Responses

  1. Pothi
    Pothi Published |

    I never knew these info (except for image caption :)). Thanks for the details.

    Reply
  2. Weekly WordPress Review » WPCanada
  3. Paul
    Paul Published |

    Thanks a lot for the code to remove the 10px injected by wordpress.

    as for the HTML5’s “ tag, should this be done by core ?

    Reply
    1. simonlawrence
      simonlawrence Published |

      It could be a while before HTML5 is completely integrated into core. I see no harm in theme developers adding it in where possible now, I’m going to tweak Justin’s function and use it in all my teams until WordPress catches up.

      Reply
  4. Erlend Sogge Heggen
    Erlend Sogge Heggen Published |

    Very handy!

    Do you know anything about captions and SEO? I would imagine search engines might appreciate that type of extra description to identify content.

    Reply
  5. WordPress 3.2 | WordPress-Buch
    WordPress 3.2 | WordPress-Buch at |
  6. vayu
    vayu Published |

    Very informative – thanks Justin. :-)

    I was wondering which code syntax highlighter you use on this site?

    Vayu

    Reply
  7. Matteo
    Matteo Published |

    Hi there, I have a problem with my captions and you can maybe help.

    whenever I’m adding captions to my images, WP incapsulate them in a div that looks like this:

    All my images are uploaded at maximum resolution and then scaled down with different stylesheets according to screen size but the caption always takes the width of the original picture.

    How can I overcome this?

    I obtained a few results by imposing an !important declaration on the various stylesheets but this is not ideal as pictures might have different widths and I would have to rethink the entire layout which is otherwise fine without captions.

    Setting manually the width to auto not only is not recommended but it won’t work either!

    Regards,

    Matteo

    Reply
  8. simonlawrence
    simonlawrence Published |

    Justin, I tried your video caption code but WordPress removed the caption when switching between the visual and HTML editor, or saving when in the visual editor.

    Reply
  9. Fluid Images with Captions | Philip Walton
  10. Loren Swendsen
    Loren Swendsen Published |

    Hey just a quick word to say thanks for this tutorial! The extra 10px added by the caption shortcode had indeed plagued me on a couple past projects. I really appreciate your solution.

    Reply
  11. Maura McGurk
    Maura McGurk Published |

    Thanks for explaining more about captions. Do you have a solution for coding “hard returns” into a captions, so that I can break the line where I want, rather than just rely on the text wrap? I’ve been pulling my hair out all day over this one–thanks in advance for your advice.

    Reply
  12. Tushar
    Tushar Published |

    I am using Alltuts wordpress theme for my website. When i set caption to any image it does not shown at all. even that image cannot locate at center with caption. Please help me, is there any need to do with my theme CSS?

    Reply
  13. Charley
    Charley Published |

    I’m trying to get my TinyMCE/visual editor to display exactly like my front-end site. I’ve removed the 10px with this tutorial for the front-end. How do I remove it on the TinyMCE/visual editor?

    Reply
  14. TODO List | Sune Frederiksen
    TODO List | Sune Frederiksen at |
  15. jim
    jim Published |

    Thanks a lot for posting this. I’ve had this really bizarre problem with WP eating my caption tags and not displaying them correctly, including converting them to unqualified div tags as above. I think your module plus the suggestion for converting them to straight-up html5 figure and figcaption tags is a much more elegant solution. Namaste!

    Reply
  16. Tech Notes: WordPress Featured Images with Captions - Oikos
  17. Jay
    Jay Published |

    How do you modify the image if it doesn’t have a caption? I’d like to wrap the image/linked image in a div if there is no caption.

    Reply
  18. pinkocrat
    pinkocrat Published |

    Thanks Justin! Big help.

    Reply
  19. Craig
    Craig Published |

    Great tutorial, thank you, it has proven useful. I discovered it through the Roots theme, which adds the as you suggested.

    I’m currently trying unsuccessfully to add the description field into your code, I want both the caption and the image description to show. But being no code fundi, it’s a struggle.

    Reply
  20. WordPress [caption] 多出来10px的问题 – 木瓜园
  21. Clayton Nichols
    Clayton Nichols Published |

    Awesome stuff. I was having some caption issues on my site, until I realized that I needed all three and not just the text portion. Thanks for posting this!

    Reply
  22. Josh
    Josh Published |

    Thanks for the help and fantastic blog. I’ve learned a lot through it!

    I know this post is old but I’m having issues.

    For some reason the theme we are using is hiding the captions given to images…

    Also when I try to just do it via tables, the table won’t follow the size of the image and I have to place that manually, leading to terrible looking borders around images, all for trying to attach a caption…

    Reply
  23. Philip King
    Philip King Published |

    Many thanks for this article Justin, I’ve been trying to get [caption] and [embed] working with YouTube videos for hours.

    It’s just a pitty this facility is not available from the [Add Media] button. Maybe WordPress will include this in a future issue.

    Once again, thanks for a great article.

    Philip King, KingSolutions

    Reply
  24. Carlo Rizzante
    Carlo Rizzante Published |

    Indeed the mandatory width parameter is quite annoying and I hit on it when working on my first fully responsive theme. Now I know how to remove it!

    However, I’m puzzled. If I re-write the function for the shortcode [caption] as you showed in here, so that the “width” becomes unnecessary, then changing theme in future will likely break the shortcode.

    Any suggestion about how to proceed?

    Anyway, thanks for the post. Cheers!
    Carlo

    Reply
  25. walltrue
    walltrue Published |

    Hi, I am running a wallpaper site http://walltrue.com/

    I want some function that adds description, caption, alt for each image based on the image title.

    Please let me know what function will work. It’s simple, I have image name, or image title, so get the image name/title and add that to image description, alt, caption for each image.

    thanks,

    Reply
  26. WordPress image fields and their uses
  27. Rhys
    Rhys Published |

    I’m not an expert but I believe, even if you want a spacing/margin around your image it is good to remove this silly 10px and instead use css how it should be:

    .wp-caption{

    box-sizing: content-box;

    padding: 5px 5px 0px;

    }
    You can then remove the margins from the img.

    That way you maintain the correct maximum image size and also maintain the correct margin when the browser or column is resized.

    Reply
    1. Rhys
      Rhys Published |

      Oh sorry, {box-sizing: content-box;} with padding is going to cause it to overflow its parent.

      Can’t win huh.

      Reply
  28. Rhys
    Rhys Published |

    On a slightly different note, does anyone else notice the caption markup is different in the visual editor?

    In the visual editor it is describing it as a definition list (like the WP gallery) and also using different classes.

    I only noticed because the usual caption CSS selectors was not working in the editor window.

    Reply
  29. tschoepler
    tschoepler Published |

    Thank’s for the info. The 10px drove me crazy ; )

    Reply
  30. Nico
    Nico Published |

    Hey,

    Great stuff!

    I’m struggling to display captions and image description on an image slider that comes with a theme I got.

    (http://themeforest.net/item/cabana-responsive-creative-wordpress-theme/6961548)

    Do you think it’s possible to display both captions and descriptions? Could you point at the right direction to get the code to work?

    Thanks a lot!

    Nico

    Reply
  31. No caption field in the wordpress media upload - HelpDesk
  32. shambles
    shambles Published |

    Wow! Thank you! I just spent over an hour trying to get one of the subheadings on my site to resemble the caption style. I didn’t realize you could apply the caption style to any embedded element.

    Reply

Leave a Reply

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution.

Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.

css.php