For years, I have weeped and wailed about people adding complicated maps and diagrams as 220px thumbnail images to Wikipedia articles. These sort of images are virtually useless within an article unless they are displayed at relatively large sizes. Unfortunately, including them at large sizes creates a whole new set of problems. Namely, large images mess up the formatting of the page and cause headers, edit links, and other images to get jumbled around into strange places (or even overlapping each other on occasion), especially for people on tablets or other small screens. The problem is even worse for videos. Who wants to watch a hi-res video in a tiny 220px inline viewer? If there are subtitles, you can't even read them. But should we instead include them as giant 1280px players within the article? That seems like it would be obnoxious.
What if instead we could mark such complicated images and high-res videos to be shown in modal viewers when the user clicks on them? For example: [[File:Highres-video1.webm|thumb|right|modal|A high res video]]. When you clicked on the thumbnail, instead of going to Commons, a modal viewer would overlay across the screen and let you view the video/image at high resolution (complete with a link to Commons and the attribution information). Believe it or not, this capability already exists for videos on Wikipedia, but it's basically a hidden feature of TimedMediaHandler. If you include a video in a page and set the size as 200px or less, it activates the modal behavior. Unfortunately, the default size for videos is 220px (as of 2010) so you will almost never see this behavior on a real article. If you want to see it, go to https://en.wikipedia.org/wiki/American_Sign_Language#Variation and click on one of the videos. Compare that with the video viewing experience at https://en.wikipedia.org/wiki/Congenital_insensitivity_to_pain. It's a world of difference. Now imagine that same modal behavior at https://en.wikipedia.org/wiki/Cathedral_Peak_Granodiorite#Geological_overvie... and https://en.wikipedia.org/wiki/Battle_of_Jutland.
Such an idea would be relatively trivial to implement. The steps would be: 1. Add support for a 'modal' param to the [[File:]] handler (https://gerrit.wikimedia.org/r/#/c/66062/) 2. Add support for the 'modal' param to TimedMediaHandler (https://gerrit.wikimedia.org/r/#/c/66063/) 3. Add support for the 'modal' param to images via some core JS module (not done yet)
As you can see, I've already gotten started on adding this feature for videos via TimedMediaHandler, but I haven't done anything for images yet. I would like to hear people's thoughts on this potential feature and how it could be best implemented for images before doing anything else with it. What are your thoughts, concerns, ideas?
Ryan Kaldari
Yes, better support for display of images through a modal viewer would be great. I'm not sure a "modal" parameter that has to be explicitly set for files is the best approach - I would recommend optimizing the default experience when a user clicks an image or video. It's not clear that the current behavior based on a pixel threshold is actually desirable as the default behavior. (On a side note, the TMH behavior should be improved to actually play the video immediately, not require a second click to play in modal view.)
Magnus Manske explored an alternative approach pretty extensively in response to the October 2011 Coding Challenge, which is worth taking a look at: https://www.mediawiki.org/wiki/User:Magnus_Manske/wikipic
Cheers, Erik
On 5/29/13 9:21 PM, Erik Moeller wrote:
Yes, better support for display of images through a modal viewer would be great. I'm not sure a "modal" parameter that has to be explicitly set for files is the best approach - I would recommend optimizing the default experience when a user clicks an image or video. It's not clear that the current behavior based on a pixel threshold is actually desirable as the default behavior. (On a side note, the TMH behavior should be improved to actually play the video immediately, not require a second click to play in modal view.)
Does anyone think it would be a bad idea to just make modal viewing the default for thumbnailed videos?
Ryan Kaldari
Le 30/05/13 09:46, Ryan Kaldari a écrit :
Does anyone think it would be a bad idea to just make modal viewing the default for thumbnailed videos?
Be bold! To play it safe, you can make the feature protected with a global feature that we will slowly enable on all wiki and eventually phase out later on :-] This way the code will land everywhere and we can play test it on beta then on commons ...
On 5/30/13 1:34 AM, Antoine Musso wrote:
Le 30/05/13 09:46, Ryan Kaldari a écrit :
Does anyone think it would be a bad idea to just make modal viewing the default for thumbnailed videos?
Be bold! To play it safe, you can make the feature protected with a global feature that we will slowly enable on all wiki and eventually phase out later on :-] This way the code will land everywhere and we can play test it on beta then on commons ...
OK, I decided to be slightly bold. I changed the modal video threshold on en.wiki from 200px to 800px. This means all video thumbnails that are 800px or smaller will open a modal player when you click on the thumbnail. If there are no complaints from people, we can switch the modal behavior to just be the default everywhere. Try it out and let me know what you think: https://en.wikipedia.org/wiki/Congenital_insensitivity_to_pain#Presentation
Ryan Kaldari
Le 31/05/13 00:28, Ryan Kaldari a écrit :
OK, I decided to be slightly bold. I changed the modal video threshold on en.wiki from 200px to 800px. This means all video thumbnails that are 800px or smaller will open a modal player when you click on the thumbnail. If there are no complaints from people, we can switch the modal behavior to just be the default everywhere. Try it out and let me know what you think: https://en.wikipedia.org/wiki/Congenital_insensitivity_to_pain#Presentation
That is a huge improvement to the user experience (tm © ..). It would be great to have the video to start playing whenever it expands. Might want to select a small video whenever the browser windows size is small (I use a low resolution).
Overall, nice. Thanks!
On 05/30/2013 06:28 PM, Ryan Kaldari wrote:
OK, I decided to be slightly bold. I changed the modal video threshold on en.wiki from 200px to 800px. This means all video thumbnails that are 800px or smaller will open a modal player when you click on the thumbnail. If there are no complaints from people, we can switch the modal behavior to just be the default everywhere. Try it out and let me know what you think: https://en.wikipedia.org/wiki/Congenital_insensitivity_to_pain#Presentation
Ryan Kaldari
I would lean towards more like < 400 px. There are probably pages that have large videos already, maybe don't need to be re-modal-ized ?
I agree with Erik we should autoplay after you click on the "play" button on a modal. https://gerrit.wikimedia.org/r/66551
Note in IOS, modal popups require an additional click to play if loading anything asyncronusly. We have done work in the kaltura library to be smart capturing the click gesture in thumbnail embeds [1]. In mediaWiki we may need to do something similar if we async load the player library. http://player.kaltura.com/docs/thumb
But the extra click is the least of our iOS video issues, for the time being :(
--michael
Le 2013-05-30 06:21, Erik Moeller a écrit :
Yes, better support for display of images through a modal viewer would be great. I'm not sure a "modal" parameter that has to be explicitly set for files is the best approach - I would recommend optimizing the default experience when a user clicks an image or video. It's not clear that the current behavior based on a pixel threshold is actually desirable as the default behavior. (On a side note, the TMH behavior should be improved to actually play the video immediately, not require a second click to play in modal view.)
You'll probably need to pop-up a menu on mouse over the media, so user may open the modal window, open the commons page, and so on. Also you may want to integrate a next/previous media file in your modal.
Magnus Manske explored an alternative approach pretty extensively in response to the October 2011 Coding Challenge, which is worth taking a look at: https://www.mediawiki.org/wiki/User:Magnus_Manske/wikipic
Oh, well, I suppose he already wrote all this obvious things then :P
Cheers, Erik
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
I tend to agree that a light box or other modalish zoom should become the default behavior.
-- brion On May 30, 2013 5:50 AM, "Ryan Kaldari" rkaldari@wikimedia.org wrote:
For years, I have weeped and wailed about people adding complicated maps and diagrams as 220px thumbnail images to Wikipedia articles. These sort of images are virtually useless within an article unless they are displayed at relatively large sizes. Unfortunately, including them at large sizes creates a whole new set of problems. Namely, large images mess up the formatting of the page and cause headers, edit links, and other images to get jumbled around into strange places (or even overlapping each other on occasion), especially for people on tablets or other small screens. The problem is even worse for videos. Who wants to watch a hi-res video in a tiny 220px inline viewer? If there are subtitles, you can't even read them. But should we instead include them as giant 1280px players within the article? That seems like it would be obnoxious.
What if instead we could mark such complicated images and high-res videos to be shown in modal viewers when the user clicks on them? For example: [[File:Highres-video1.webm|**thumb|right|modal|A high res video]]. When you clicked on the thumbnail, instead of going to Commons, a modal viewer would overlay across the screen and let you view the video/image at high resolution (complete with a link to Commons and the attribution information). Believe it or not, this capability already exists for videos on Wikipedia, but it's basically a hidden feature of TimedMediaHandler. If you include a video in a page and set the size as 200px or less, it activates the modal behavior. Unfortunately, the default size for videos is 220px (as of 2010) so you will almost never see this behavior on a real article. If you want to see it, go to https://en.wikipedia.org/wiki/** American_Sign_Language#**Variationhttps://en.wikipedia.org/wiki/American_Sign_Language#Variationand click on one of the videos. Compare that with the video viewing experience at https://en.wikipedia.org/wiki/**Congenital_insensitivity_to_ **pain https://en.wikipedia.org/wiki/Congenital_insensitivity_to_pain. It's a world of difference. Now imagine that same modal behavior at https://en.wikipedia.org/wiki/**Cathedral_Peak_Granodiorite#** Geological_overviewhttps://en.wikipedia.org/wiki/Cathedral_Peak_Granodiorite#Geological_overviewand https://en.wikipedia.org/wiki/**Battle_of_Jutlandhttps://en.wikipedia.org/wiki/Battle_of_Jutland .
Such an idea would be relatively trivial to implement. The steps would be:
- Add support for a 'modal' param to the [[File:]] handler (
https://gerrit.wikimedia.org/**r/#/c/66062/https://gerrit.wikimedia.org/r/#/c/66062/ ) 2. Add support for the 'modal' param to TimedMediaHandler ( https://gerrit.wikimedia.org/**r/#/c/66063/https://gerrit.wikimedia.org/r/#/c/66063/ ) 3. Add support for the 'modal' param to images via some core JS module (not done yet)
As you can see, I've already gotten started on adding this feature for videos via TimedMediaHandler, but I haven't done anything for images yet. I would like to hear people's thoughts on this potential feature and how it could be best implemented for images before doing anything else with it. What are your thoughts, concerns, ideas?
Ryan Kaldari
______________________________**_________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/**mailman/listinfo/wikitech-lhttps://lists.wikimedia.org/mailman/listinfo/wikitech-l
Le 30/05/13 05:49, Ryan Kaldari a écrit :
When you clicked on the thumbnail, instead of going to Commons, a modal viewer would overlay across the screen and let you view the video/image at high resolution
<snip>
I discovered yesterday that Commons as such a tool to browse pictures in a category. Whenever you browse a category page such as: https://commons.wikimedia.org/wiki/Category:Hackathons
There is a Green icon which when hovered will expand to 'show slideshow' and when clicked replace the view with a slideshow view like Picassa / Flickr ...
It would be nice to have that build in MediaWiki. Maybe there is a well supported JQuery plugin that does just that and we could ship in core?
wikitech-l@lists.wikimedia.org