There are several ways to request thumbnails from Commons. A quick and easy one is using Special:Redirect:

• Regular pixel images are just scaled down to create a thumbnail: https://commons.wikimedia.org/wiki/Special:Redirect/file/Example.png?width=120&height=120
• Vector images effectively work the same: https://commons.wikimedia.org/wiki/Special:Redirect/file/Example.svg?width=120&height=120
• PDFs show the first page: https://commons.wikimedia.org/wiki/Special:Redirect/file/Example.pdf?width=120&height=120
• Videos show – I think – a keyframe from the middle of the video: https://commons.wikimedia.org/wiki/Special:Redirect/file/FA-18_Automated_Aerial_Refueling.ogv?width=120&height=120
• Audio files are visualized with an icon: https://commons.wikimedia.org/wiki/Special:Redirect/file/Example.ogg?width=120&height=120. Note that in contrast to all other thumbnails this icon is always 120x120 and needs to be scaled client-side, if necessary. VisualEditor's media selector already uses this icon (search for e.g. "vivaldi" to see it).
• There is no "not found" placeholder. We need to specify our own – or show a text message instead.

@ECohen_WMDE, the last image mentions "min/max-height". I believe this should be "max-width/height".

Another question: I feel it makes sense to put the loading animation into an 120px × 80px rectangle (3:2). Why? Well, whatever placeholder size we use, it needs to be re-scaled the moment the image appears. This will change the position of all elements below the placeholder. But we know that something like 90% are landscape images. When we use a square placeholder, the stuff below the placeholder needs to scroll up 90% of the time. When we use a 4:3 placeholder, there is high probability that nothing will scroll, or only a little bit.

In addition, we can try to use a smooth transition.

Thanks @thiemowmde ! This is extremely helpful. The thumbnails you shared for images, vector images, and pdfs all make sense. For videos, audio, and not found - I would wait to implement these. I realized that since commons search is going through a redesign, these are getting an update and want to align with @mwilliams first.

I believe this should be "max-width/height".

Yes, thanks for catching this. I'll update the mock.

I feel it makes sense to put the loading animation into an 120px × 80px rectangle (3:2).

I see your point and makes sense to me if landscape images are used that much more often. Is this also true for infoboxes though? I feel like vertical images actually work much better there. We can set it to your suggested size, then test how disruptive the jumping actually is.

Change 623003 had a related patch set uploaded (by Andrew-WMDE; owner: Andrew-WMDE):
[mediawiki/extensions/VisualEditor@master] [POC] Add file preview for file type parameters

https://gerrit.wikimedia.org/r/623003

Here's the thumbnail to use for when no file is found. To be shown at the same size as the file loading, width of 120px.

Also, re: the dot loading indicators. I found a project that it was implemented on, maybe this makes it easier to find the OOUI component? https://en.wikipedia.org/wiki/Special:ContentTranslation

From this task T75972: Loading indicators / Progress indicators are inconsistent. , at the bottom of the task description is says the dots are the standard for in-view content loading. I'm still only seeing links to the CodePen though.

Tried it out on the test instance today! Overall, looks great. The animations are also really smooth.

I did find one issue, but it's a bit complicated. Let me know @Andrew-WMDE if you think it's worth discussing?

Note for final implementation: the progress bar is working for now, but I should coord with WMF about OOUI and the three loading dots. I'm assuming that this means you weren't able to find anything Andrew?

Change 624679 had a related patch set uploaded (by Awight; owner: Andrew-WMDE):
[mediawiki/extensions/VisualEditor@wmde-templates] [POC] Add file preview for file type parameters

https://gerrit.wikimedia.org/r/624679

Change 624681 had a related patch set uploaded (by Awight; owner: Awight):
[mediawiki/extensions/VisualEditor@wmde-templates] [POC] Integrate preview and media selector

https://gerrit.wikimedia.org/r/624681

Change 624679 merged by Awight:
[mediawiki/extensions/VisualEditor@wmde-templates] [POC] Add file preview for file type parameters

https://gerrit.wikimedia.org/r/624679

Change 624681 merged by Awight:
[mediawiki/extensions/VisualEditor@wmde-templates] [POC] Integrate preview and media selector

https://gerrit.wikimedia.org/r/624681

In T260803#6411369, @thiemowmde wrote:

There are several ways to request thumbnails from Commons.

Andrew already coded in the additional complexity, but we need to fetch thumbnails from the local wiki, Commons, and any other configured repos.

In T260803#6432826, @ECohen_WMDE wrote:

The file preview only works when the prefix is there, but the official instructions for the 'File' parameter type say not to include the prefix.

I think we were also discussing elsewhere, but I want to mention that real usage of File and Page types are already jumbled up for exactly this reason. For example, some templates seem to use the Page type because it provides autocomplete, but the editor will have to remove the prefix before saving the invocation. I don't have any good suggestions, other than hoping that templates standardize on robust normalization, so if you need "File:A_B.jpg", you pass the parameter through a function which can convert "A B.jpg" to the required format.

Change 626368 had a related patch set uploaded (by Awight; owner: Awight):
[mediawiki/extensions/VisualEditor@master] [POC] Integrate preview and media selector

https://gerrit.wikimedia.org/r/626368

We're keeping this task open to iron out any last issues, the merge with other features was non-trivial and may have broken things.

Observation: the query to commonswiki takes a long time (6+ seconds), during which time the preview shows a spinner bar. Fetching the actual image by title takes half a second. The query is,
https://commons.wikimedia.org/w/api.php?action=query&origin=*&generator=search&gsrnamespace=6&iiurlheight=200&iiprop=dimensions|url|mediatype|extmetadata|timestamp|user&prop=imageinfo&gsrsearch=User%20overlap%20bug.png&iiurlwidth=300&gsroffset=0&gsrlimit=105
It pulls metadata for many more images than needed.

When adjusting this patch earlier, I found that a low gsrlimit such a 5 would only find the image in some cases, in others it would be too far down the search results to show up. Both of these problems would be fixed if the query prioritized an exact title match—maybe this is what broke during merge.

Confirmed the same behavior in the original patch. It depends on the filename, I got lucky with a long name including many short words: "User overlap bug.png". Results from the server are nondeterministic, and I've seen nothing show up in the first hundred matches. Even more alarmingly, setting the limit to 200 caused server memory exhaustion, reporting that it had tried to allocate 700MB before crashing.

Something's very wrong with this endpoint, I think we need to try another.

Change 626368 abandoned by Awight:
[mediawiki/extensions/VisualEditor@master] [POC] Integrate preview and media selector

Reason:
Moved to a gitlab branch, https://gitlab.com/wmde/mediawiki-extensions-VisualEditor/-/tree/file-type

https://gerrit.wikimedia.org/r/626368

Change 623003 abandoned by Awight:
[mediawiki/extensions/VisualEditor@master] [POC] Add file preview for file type parameters

Reason:
Moved to a gitlab branch, https://gitlab.com/wmde/mediawiki-extensions-VisualEditor/-/tree/file-type

https://gerrit.wikimedia.org/r/623003

It looks like the local "query imageinfo" API is able to return thumbnail URLs for commonswiki, I'll try to integrate with that.

In T260803#6432826, @ECohen_WMDE wrote:

the progress bar is working for now, but I should coord with WMF about OOUI and the three loading dots.

The blue progress bar is stock OOUI spinner. ContentTranslation's three dots are a pure-CSS effect. It's easy to copy the CSS over, please let me know if that would be better. My 2 cents is that the blue bar is very loud.

In T260803#6461927, @awight wrote:

In T260803#6432826, @ECohen_WMDE wrote:

the progress bar is working for now, but I should coord with WMF about OOUI and the three loading dots.

The blue progress bar is stock OOUI spinner. ContentTranslation's three dots are a pure-CSS effect. It's easy to copy the CSS over, please let me know if that would be better. My 2 cents is that the blue bar is very loud.

Yes, if possible the three dots is much preferred. Thanks!

Yes, if possible the three dots is much preferred. Thanks!

done :-)

Just tried it - looks great. And the pictures are loading much more quickly for me as well!

Fix placeholders and non-image media files.

Note that I won't remove autocomplete here, only because we have a task for it already: T263535: Remove image autocomplete for File parameters from test instance

The placeholder fix is live. Thumbnails for media images seem to be a larger, systematic thing. For example, inserting a .webm file as a regular image shows the same empty preview in VisualEditor's basic "edit" view.

I'll keep working in this task for now, to get video thumbnails.

mwvagrant roles enable timedmediahandler
mwvagrant provision

Works now :-)

I noticed another minor glitch: the progress dots are now at the top of the frame, a style is broken.

Fix the dots...