WordPress.org

Make WordPress Core

Opened 7 years ago

Last modified 12 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 needs-testing
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 (11)

#1 @essday
7 years ago

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

#2 @nmarcisso
7 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>

#3 @nacin
6 years ago

  • Milestone changed from Unassigned to 3.1

#4 @nacin
6 years ago

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

#5 @ocean90
6 years ago

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

#6 @davehope
5 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 5 years ago by davehope (previous) (diff)

#7 @davehope
5 years ago

  • Version changed from 2.9.1 to 3.2.1

#8 @dd32
5 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.

#9 @ocean90
3 years ago

  • Keywords needs-patch added

It's still an issue in 3.6.

#10 @nhuja
3 years 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 3 years ago by nhuja (previous) (diff)

#11 @chriscct7
12 months ago

  • Keywords needs-testing added
Note: See TracTickets for help on using tickets.