Last modified: 2014-06-03 21:23:51 UTC
Created attachment 14660 [details] 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)
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 change #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.)
