Page MenuHomePhabricator

Flow: image wikitext produces very different HTML than in wiki pages
Closed, InvalidPublic

Description

screenshot of problem, with preview of wikisource used

The caption should be confined to the area under the image.

However, https://www.mediawiki.org/w/index.php?title=Talk:Sandbox&topic_postId=rpjeuqa0j3takll1&workflow=rpjeobchlzbmpch2#flow-post-rpjeuqa0j3takll1
currently looks like (screenshot-attached).

It should display like this: https://en.wikipedia.org/w/index.php?title=User:Quiddity_%28WMF%29/sandbox&oldid=596561142

Semi-Related bugs:

  • bug 57938 (Image float alignment in posts doesn't work)
  • bug 58061 (no image border for thumbnails)
  • bug 61081 (default-thumbnail-size preferences are not being followed)

Version: unspecified
Severity: normal
URL: https://www.mediawiki.org/w/index.php?title=Talk:Sandbox&topic_postId=rpjeuqa0j3takll1&workflow=rpjeobchlzbmpch2#flow-post-rpjeuqa0j3takll1

Attached:

Screenshot_from_2014-02-21_15:29:06.png (1×1 px, 222 KB)

Details

Reference
bz61786

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 3:03 AM
bzimport set Reference to bz61786.
bzimport added a subscriber: Unknown Object (MLST).

I think this bug and the related ones in your description arise because the HTML that Parsoid creates for [[File:Bertrand Russell.jpg|thumb|right|Long long caption]] is very different and much less elaborate than the HTML created by the PHP parser for the same wiki text.

Examining your Flow board post, Parsoid generates:

<figure typeof="mw:Image/Thumb" class="mw-default-size mw-halign-right">

<a href="./File:Bertrand_Russell.jpg" title="">
  <img height="260" width="220"
      src="//upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bertrand_Russell.jpg/220px-Bertrand_Russell.jpg"
      resource="./File:Bertrand_Russell.jpg">
 </a>
<figcaption >Long long caption</figcaption>

</figure>

But in your wiki page post, the PHP Parser calls Linker::makeImageLink() and together they generate:

<div class="thumb tright">

<div style="width:222px;" class="thumbinner">
  <a class="image" href="/wiki/File:Bertrand_Russell.jpg">
    <img height="260" width="220"
        srcset="//upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bertrand_Russell.jpg/330px-Bertrand_Russell.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/4/46/Bertrand_Russell.jpg 2x"
        class="thumbimage"
        src="//upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bertrand_Russell.jpg/220px-Bertrand_Russell.jpg"
        alt="">
  </a>
  <div class="thumbcaption">
    <div class="magnify">
      <a title="Enlarge" class="internal" href="/wiki/File:Bertrand_Russell.jpg">
        <img height="11" width="15" alt="" src="//bits.wikimedia.org/static-1.23wmf14/skins/common/images/magnify-clip.png">
      </a>
    </div>
    Long long caption
  </div>
</div>

</div>

The missing classes and containing divs account for the bugs you filed (I think they could be made dependants of this bug or some other tracking bug). There are other differences such as higher-res srcset variants, the Enlarge magnifying glass, etc. I don't see all these in the Parsoid image tracking bug 54844 so maybe I'm misunderstanding the issue.

The change from div soup to figure / figcaption is deliberate, as is the move from inline styles and decorations like the magnify icon to CSS and JS.

We should coordinate with the VE folks to move the new CSS and JS into core, so that it works in both VE and Flow out of the box.

VE has CSS and JS (e.g. for magnify icon) to make the HTML from Parsoid appear similar to the PHP parser's HTML. Gerrit 115533 improves this and some day it will move to Parsoid.

As I understand it, VE's renders an inserted image as an inactive node, so it does not need all the features of PHP HTML, e.g. the srcset generated by ThumbnailImage. But Flow does.

It is true that Parsoid does not implement srcset. We expected this would be done in a post-processing step of the parsoid DOM, possibly client side. (And fixing bug 54035 would be nice, too.) Is that reasonable for flow?

Other than srcset, are there other issues with the Parsoid-generated DOM for images? (Bug 62270 already covers audio/video issues.)

cscott claimed this task.

Forked the srcset issue to T90911. Closing this task as the remaining differences are considered a feature, not a bug. (And I'm pretty sure the needed CSS styles, mentioned in @GWicke's comment above, have been merged in core for a long time now.)