Markup, text, html, around Image Captions?

  • CFTech

    (@cftech)


    14 years, 9 months ago

    Hello. I’m quite new to WP but am learning slowly but surely. I know a little html and css as I used to be a Dreamweaver user. Now, DW is religated as only a tool.

    My question is, after I’ve inserted an image w/ caption into a page (oh, this is a static site) how do I go about adding any other text or even HTML to the html tab?? I have attempted to add <p></p> and </br> as well as simply email but as soon as I add it and update the page and go back and forth from Visual and HTML tabs on a Page, any markup is gone. I’m baffled. I’m sure it is simple, but I’m not sure how to accomplish this.

    My sample page for the site I’m working on is:
    Links
    or
    Photos

    Thanks for setting a noob straight w/ WP!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Jackson Whelan

    (@madjax)

    14 years, 9 months ago

    The visual editor strips out <p> and
    and adds them back at the time of output using a nifty function called wpautop.

    You can either stay in HTML mode to avoid having your markup stripped, or use the visual editor and let WordPress add the paragraph and line break markup when the content is output on the front-end.

    Thread Starter CFTech

    (@cftech)

    14 years, 9 months ago

    Hey Jackson. For some reason, the html markup is removed from html tab regardless and doesn’t appear in live site when page is ‘updated’

    Here’s my code for example:

    [caption id="" align="alignleft" width="336" caption="St. Josephs Childrens Home"]<a href="http://www.sjkids.org/"><img title="St. Josephs Childrens Home" src="http://www.sjkids.org/nav/sjlogotop.gif" alt="St. Josephs Childrens Home" width="336" height="117" /></a>[/caption]

[caption id="" align="alignnone" width="219" caption="Kids Center for Pediatric Therapies / Cerebral Palsy"]<a href="http://www.kidscenterky.org/"><img title="Kids Center for Pediatric Therapies" src="http://kidscenterky.org/Portals/36/Skins/FAMILYPORTAL/FPT_bannerbg03.jpg" alt="Kids Center for Pediatric Therapies" width="219" height="189" /></a>[/caption]

    When I put in <p> </p> on the 2nd caption …

    <p>[caption id="" align="alignnone" width="219" caption="Kids Center for Pediatric Therapies / Cerebral Palsy"]<a href="http://www.kidscenterky.org/"><img title="Kids Center for Pediatric Therapies" src="http://kidscenterky.org/Portals/36/Skins/FAMILYPORTAL/FPT_bannerbg03.jpg" alt="Kids Center for Pediatric Therapies" width="219" height="189" /></a>[/caption]</p>

    … and update the site, the code is removed and doesn’t show on the live site. And, this is about as simple as you can get.

    Thoughts?

    [Please post code snippets between backticks or use the code button.]

    Jackson Whelan

    (@madjax)

    14 years, 9 months ago

    Use wordpress.pastebin.com – the code you pasted is getting filtered here.

    That being said, markup within the caption attribute of the shortcode will always be stripped out (I think). I don’t believe the caption shortcode supports HTML captions.

    If you’re trying to wrap the caption shortcode in <p> – why? The caption shortcode outputs in a <div> wrapper.

    Thread Starter CFTech

    (@cftech)

    14 years, 9 months ago

    Only because the images w/ caption are right on top of one another. Thus, if i wrap in <p></p> I can add some blank space and also be able to enter other text between them when desired. Better to handle this in the CSS then?

    Thanks on note about wordpress.pastebin.com.

    esmi

    (@esmi)

    14 years, 9 months ago

    Just wondering if something like:
    div.wp-caption + div.wp-caption {margin-top:20px;}
    would be a suitable CSS rule for this situation?

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Markup, text, html, around Image Captions?’ is closed to new replies.