WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 8 months ago

#12097 new defect (bug)

Inserting image captions sometimes results in malformed HTML

Reported by: essday Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 2.9.1
Component: Media Keywords: needs-patch
Focuses: Cc:

Description

When adding an image with a caption to an HTML post, WP generates invalid HTML. In at least the case identified below, WP generates a DIV tag inside a P tag, which violates HTML standards and which results in undefined behavior depending on the browser being used.

For background: http://wordpress.org/support/topic/291591

To reproduce:

  • install stock WP 2.9.1 from scratch. No changes (eg. no themes and no plugins).
  • edit the default first post
  • switch to HTML editor view
  • upload an image at the beginning of the post, using the same text for the image title, alternate text and caption
  • insert the image into the post as a thumbnail
  • save the post

The text inside the editor should look like the following when you are done:

[caption id="attachment_3" align="alignnone" width="100" caption=
"Blurred TV Icon"]<a href="http://wptesty.nfshost.com/wp-conten
t/uploads/BlurredTVIcon.png"><img class="size-full wp-image-3
" title="Blurred TV Icon" src="http://wptesty.nfshost.com/wp-con
tent/uploads/BlurredTVIcon.png" alt="Blurred TV Icon" width="100
" height="100" /></a>[/caption]Welcome to WordPress. This is your
 first post. Edit or delete it, then start blogging!

The resulting HTML generated by WP is:

<div class="entry">
<p><div id="attachment_3" class="wp-caption alignnone" style="wi
dth: 110px"><a href="http://wptesty.nfshost.com/wp-content/u
ploads/BlurredTVIcon.png"><img class="size-full wp-image-3" titl
e="Blurred TV Icon" src="http://wptesty.nfshost.com/wp-conten
t/uploads/BlurredTVIcon.png" alt="Blurred TV Icon" width="100" h
eight="100" /></a><p class="wp-caption-text">Blurred TV Icon<
/p></div>Welcome to WordPress. This is your first post. Edit or del
ete it, then start blogging!</p>
</div>

For a live example, see http://wptesty.nfshost.com.

NOTE: I am hosting this site myself and I may not leave it up for very long, so if you want to see the bug without having to set up WP yourself, please visit this URL sooner rather than later.

Change History (10)

comment:1 essday4 years ago

  • Summary changed from Inserting image captions sometimes result in malformed HTML to Inserting image captions sometimes results in malformed HTML

comment:2 nmarcisso4 years ago

I am getting a similar issue where wordpress is removing the caption tag when being published.

In Editor

[caption id="attachment_3787" align="alignleft" width="300" caption="Twisted fun! Most of the trails at Black Mountain follow the contours of the slope, not the needs of grooming machines. That’s where the fun is! (Tim Jones photo)"]<a href="http://easternslopes.com/wp-content/uploads/2010/02/Blackslope1-H.jpg"><img class="size-medium wp-image-3787" title="Blackslope1-H" src="http://easternslopes.com/wp-content/uploads/2010/02/Blackslope1-H-300x214.jpg" alt="" width="300" height="214" /></a>[/caption]

Published Code

<a href="http://easternslopes.com/wp-content/uploads/2010/02/Blackslope1-H.jpg" title="Blackslope1-H" rel="lightbox[3785]"><img class="size-medium wp-image-3787" title="Blackslope1-H" src="http://easternslopes.com/wp-content/uploads/2010/02/Blackslope1-H-300x214.jpg" alt="" width="300" height="214" /></a>

comment:3 nacin4 years ago

  • Milestone changed from Unassigned to 3.1

comment:4 nacin3 years ago

  • Keywords reporter-feedback added
  • Milestone changed from Awaiting Triage to Awaiting Review

comment:5 ocean903 years ago

  • Keywords reporter-feedback removed
  • Milestone changed from Awaiting Review to Future Release

comment:6 davehope3 years ago

I also encountered this problem if a line break in not inserted before the caption/image. Wordpress generates some code like this:

Consider the below photo taken in center-weighted metering mode.
[caption id="attachment_223" align="aligncenter" width="500" caption="Center-weighted metering sample"]<img src="http://slrschool.net/wp-content/uploads/2011/08/Center-Weighted-Metering.jpg" alt="Center-weighted metering sample" title="Center-Weighted Metering" width="500" height="331" class="size-full wp-image-223" />[/caption]

Which results in a <p> tag, my text followed by a <br/> tag and then the <div> etc.

By adding a line break after by text, before the [caption..] the xhtml is not malformed.

Wordpress 3.2.1

Last edited 3 years ago by davehope (previous) (diff)

comment:7 davehope3 years ago

  • Version changed from 2.9.1 to 3.2.1

comment:8 dd323 years ago

  • Version changed from 3.2.1 to 2.9.1

The version field is used to track the earliest reported version which an issue affects.

comment:9 ocean908 months ago

  • Keywords needs-patch added

It's still an issue in 3.6.

comment:10 nhuja8 months ago

I cannot seem to replicate this issue. @ocean90, do you have an example setup? I did notice this before but now I get a proper HTML. I do not see p tag before div. tried several posts and pages in 2013.

EDIT: ah.. did as suggested by @davehope and I see the div inside p tag.

<p>Consider the below photo taken in center-weighted metering mode.<br />
<div id="attachment_4098" class="wp-caption alignnone" style="width: 394px">...
Last edited 8 months ago by nhuja (previous) (diff)
Note: See TracTickets for help on using tickets.