WordPress.org

Ready to get started?Download WordPress

Forums

Change the HTML-code base for [caption] (11 posts)

  1. Anonymous
    Unregistered
    Posted 6 years ago #

    Hi. I have looked for the correct PHP-file to change the HTML-code-output for the [caption]-function - it simple does not work to have the [caption]-function put a <div> inside a <p>-tag - it messes up the W3C-validation (and yes, that matters to some of us).

    Therefore, I was hoping someone could point me in the right direction as to where I would have to look to find the actual [caption]-function, and change the coding of it?

    As of now, the caption works great, but the code it outputs is not XHTML-valid.

  2. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    Wha? The captioning does not put DIVs inside a P.

    Here's what I get for example:

    <div id="attachment_201" class="wp-caption alignright" style="width: 310px">
    <a href="LINK HERE">
    <img src="IMAGE SRC HERE" alt="CAPTION" title="TITLE" width="300" height="300" class="size-medium wp-image-201" />
    </a>
    <p class="wp-caption-text">CAPTION</p>
    </div>

    My pages with them validate just fine.

  3. coopersita
    Member
    Posted 6 years ago #

    It's doing it for me too. It puts the div with the caption inside a p. I'd never noticed the caption thing before, is it a new feature? In any case, it messes my code...

  4. Andrew Ozz
    WordPress Dev
    Posted 6 years ago #

    The caption shortcode function is in /wp-includes/media.php, but instead of editing the file directly, better copy the code, edit it as you like and make it into a small plugin. You can use the filter "img_caption_shortcode" and generate any HTML tags you like.

  5. coopersita
    Member
    Posted 6 years ago #

    I just checked media.php, and the problems isn't there. The img_caption_shortcode function generates valid code. The p around it is being added somewhere else. Probably the rich code editor thinks of it as a paragraph...

    Is this a bug? Should we report it? What else could be causing this?

  6. Andrew Ozz
    WordPress Dev
    Posted 6 years ago #

    Don't think so. The <p> tags are generated by wpautop and it has a special feature to exclude shortcodes. Perhaps look in the db if you can to see what's saved in the post content.

  7. coopersita
    Member
    Posted 6 years ago #

    The post_content in the wp_post table looks the same as the html view of the post. Here's an example:

    Here's the result:
    
    [caption id="attachment_115" align="aligncenter" width="425" caption="Felted Mariah sweater "]<img class="size-full wp-image-115" title="Felted Mariah" src="http://www.hookandneedles.com/wp-content/uploads/2008/07/sweater.jpg" alt="Felted Mariah sweater after felting it" width="425" height="500" />[/caption]
    
    A perfect fit...

    The resulting html:

    <p>Here’s the result:</p>
    <p><div id="attachment_115" class="wp-caption aligncenter" style="width: 435px"><img class="size-full wp-image-115" title="Felted Mariah" src="http://www.hookandneedles.com/wp-content/uploads/2008/07/sweater.jpg" alt="Felted Mariah sweater after felting it" width="425" height="500" /><p class="wp-caption-text">Felted Mariah sweater </p></div></p>
    <p>A perfect fit...

    It's adding p to the [caption] shortcode...

    Could it be a problem with my installation of wp?

  8. coopersita
    Member
    Posted 6 years ago #

    It just occurred to me... I'm previewing my posts, would publishing make a difference? I've been afraid to publish, because I don't want to have faulty code.

  9. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    I have no idea what exactly you're doing to cause this, but I'd try disabling all your plugins first, because WordPress does NOT do this by default.

    I'll give you an example showing what it does. My post here has a caption on the picture:
    http://ottodestruct.com/blog/2008/07/02/fashion-gone-berserk/

    If you look at the HTML, here's what you get:

    <p>Okay, this is just ludicrous.</p>
    <div id="attachment_201" class="wp-caption alignright" style="width: 310px"><a href="http://www.jcrew.com/AST/Browse/MensBrowse/Men_Feature_Assortment/collectorsitems/pants/PRDOVR~98560/98560.jsp"><img src="http://ottodestruct.com/blog/wp-content/uploads/2008/07/images_onfigure_98_98560_98560_wb8850_m_tif_a8dc0bb5631518d61-300x300.jpg" alt="Too lazy to paint a house yourself?" title="Pre-painted Jeans" width="300" height="300" class="size-medium wp-image-201" /></a><p class="wp-caption-text">Too lazy to paint a house yourself?</p></div>
    <p>That’s right kiddies, JCrew sells pre-paint stained jeans. For those people too lazy to paint a house, now you can look like you’ve actually been working too, but without all that pain in the ass “labor”.</p>

    As you can see, no P around the DIV.

    Now, maybe you have a plugin screwing with the content and/or running it through wpautop early/later than normal or something, but it's definitely not WordPress causing this problem for you.

  10. coopersita
    Member
    Posted 6 years ago #

    Found it! It's "Contact Form 7" plugin.

    Thanks Otto42 and azaozz!

  11. Ryan
    Member
    Posted 5 years ago #

    This was killing me, no matter what I did I couldn't get rid of an extra (empty) set of P tags being generated at the top of my post where I had inserted an image and caption (floating right).

    I tried disabling all my plugins and still the caption DIV was being wrapped in paragraph tags - which would then be forced out of the P tags, leaving them sitting there empty at the top of every post.

    Otto42's example post didn't help, because he had a couple lines of text before the image was displayed - and I was looking to put the image right at the top of the post.

    Solution: On a whim I decided to throw a couple extra line breaks in and see what happened - sure enough, worked like a charm.

    So, if anyone else happens to have trouble with this - in the HTML editor, make sure you put a full empty line between the caption code and your initial paragraph:

    Like:

    [caption id="attachment_5" align="alignright" width="330" caption="Mmmm... that looks tasty."]<img class="size-full wp-image-5" title="food" src="http://example.com/wp-content/uploads/2009/02/food.jpg" alt="Mmmm... that looks tasty." width="330" height="200" />[/caption]
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare accumsan turpis. Donec hendrerit metus non elit. Morbi egestas, lorem sed congue consectetur, pede turpis ornare urna, quis congue urna orci eget lectus. Maecenas sit amet augue a enim eleifend placerat. In cursus varius ante. Sed velit dui, sodales nec, pharetra in, accumsan a, nibh.

    Hope that helps someone.

Topic Closed

This topic has been closed to new replies.

About this Topic