showing videos and images in modal viewers within articles

classic Classic list List threaded Threaded
14 messages Options
Reply | Threaded
Open this post in threaded view
|

showing videos and images in modal viewers within articles

Ryan Kaldari-2
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_overview 
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


_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

Erik Moeller-4
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

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

Brion Vibber-4
In reply to this post by Ryan Kaldari-2
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" <[hidden email]> 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#**Variation<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 <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_overview<https://en.wikipedia.org/wiki/Cathedral_Peak_Granodiorite#Geological_overview>and
> https://en.wikipedia.org/wiki/**Battle_of_Jutland<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/<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
> [hidden email]
> https://lists.wikimedia.org/**mailman/listinfo/wikitech-l<https://lists.wikimedia.org/mailman/listinfo/wikitech-l>
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

Ryan Kaldari-2
In reply to this post by Erik Moeller-4
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

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

Antoine Musso-3
In reply to this post by Ryan Kaldari-2
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?


--
Antoine "hashar" Musso


_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

Antoine Musso-3
In reply to this post by Ryan Kaldari-2
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 ...

--
Antoine "hashar" Musso
"did I say: 'be bold' ?"


_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

Billinghurst
In reply to this post by Ryan Kaldari-2
> (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.)

Please NO, if there has to be anything please make it an preference that
users can toggle, but have the default as OFF.  There is more than
Wikipedia here; there are some of us who don't want to be playing videos
that others have selected for us.

Regards, Billinghurst

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

Petr Onderka
On Thu, May 30, 2013 at 12:21 PM, billinghurst <[hidden email]>wrote:

> > (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.)
>
> Please NO, if there has to be anything please make it an preference that
> users can toggle, but have the default as OFF.  There is more than
> Wikipedia here; there are some of us who don't want to be playing videos
> that others have selected for us.
>

I think you might have misunderstood.

As far as I understand it, the current behavior is:
Click 1 on thumbnail -> modal view opens
Click 2 on the video in modal view -> video starts playing

And the proposed change is to:
Click 1 on thumbnail -> modal window opens and starts playing

This is not about playing videos as soon as a page loads.

Petr Onderka
[[en:User:Svick]]
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

mathieu lovato stumpf guntz
In reply to this post by Erik Moeller-4
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
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l

--
Association Culture-Libre
http://www.culture-libre.org/

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

Ryan Kaldari-2
In reply to this post by Antoine Musso-3
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

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

Fabrice Florin-2
In reply to this post by Ryan Kaldari-2
Hey Kaldari,

Thanks so much for yesterday's code fix to display videos in a modal viewer when you click on article thumbnails!

This was long overdue and makes a huge difference already, as shown in this example:

https://en.wikipedia.org/wiki/Congenital_insensitivity_to_pain

I agree with Erik that the ideal behavior would be to play the video immediately after you click on the thumbnail, without requiring a second click to play in modal view.

Now, is there any chance we could do something similar for still photos? As a longtime photographer, it drives me nuts that clicking on a thumbnail article takes you to this overwhelming page on Commons, with scary walls of text all around the image. (That's one of the reasons I haven't yet migrated any of my 20k Flickr photos to Commons, BTW.)

Most modern web sites nowadays just show you the photo in full screen, with only a few icons around it, so you can experience the image as it was intended to be seen (typically in a black modal panel, to make it pop up more). You still have the option to reveal all the text details if you want them, but they are not forced on you as we do today on Wikipedia and Commons.

Hopefully, our new multimedia team will be able to join forces with the design team to tackle some of these commonsense UI improvements, once we get up to speed this summer.

Thanks again for this welcome prelude :)


Fabrice


_______________________________

Fabrice Florin
Product Manager, Editor Engagement
Wikimedia Foundation

http://en.wikipedia.org/wiki/User:Fabrice_Florin_(WMF)


On May 30, 2013, at 1:35 AM, [hidden email] wrote:

>
> From: Erik Moeller <[hidden email]>
> Subject: Re: [Wikitech-l] showing videos and images in modal viewers within articles
> Date: May 29, 2013 9:21:48 PM PDT
> To: Ryan Kaldari <[hidden email]>
> Cc: Wikimedia developers <[hidden email]>
> Reply-To: Wikimedia developers <[hidden email]>
>
>
> 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
>
>
> From: Brion Vibber <[hidden email]>
> Subject: Re: [Wikitech-l] showing videos and images in modal viewers within articles
> Date: May 30, 2013 12:42:00 AM PDT
> To: Wikimedia developers <[hidden email]>
> Cc: Erik Moeller <[hidden email]>
> Reply-To: Wikimedia developers <[hidden email]>
>
>
> 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" <[hidden email]> 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#**Variation<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 <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_overview<https://en.wikipedia.org/wiki/Cathedral_Peak_Granodiorite#Geological_overview>and
>> https://en.wikipedia.org/wiki/**Battle_of_Jutland<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/<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
>> [hidden email]
>> https://lists.wikimedia.org/**mailman/listinfo/wikitech-l<https://lists.wikimedia.org/mailman/listinfo/wikitech-l>
>
>
> From: Ryan Kaldari <[hidden email]>
> Subject: Re: [Wikitech-l] showing videos and images in modal viewers within articles
> Date: May 30, 2013 12:46:13 AM PDT
> To: Erik Moeller <[hidden email]>
> Cc: Wikimedia developers <[hidden email]>
> Reply-To: Wikimedia developers <[hidden email]>
>
>
> 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
>
>
>
> From: Antoine Musso <[hidden email]>
> Subject: Re: [Wikitech-l] showing videos and images in modal viewers within articles
> Date: May 30, 2013 12:52:25 AM PDT
> To: [hidden email]
> Reply-To: Wikimedia developers <[hidden email]>
>
>
> 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?
>
>
> --
> Antoine "hashar" Musso
>
>
>
> From: Antoine Musso <[hidden email]>
> Subject: Re: [Wikitech-l] showing videos and images in modal viewers within articles
> Date: May 30, 2013 1:34:35 AM PDT
> To: [hidden email]
> Reply-To: Wikimedia developers <[hidden email]>
>
>
> 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 ...
>
> --
> Antoine "hashar" Musso
> "did I say: 'be bold' ?"
>
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l



_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: [Design] showing videos and images in modal viewers within articles

Jared Zimmerman
great step toward getting to an actual "media"wiki Can the player be
skinned?

*
*
*
*
*Jared Zimmerman * \\  Director of User Experience \\ Wikimedia
Foundation
M : +1 415 609 4043 |   :  @JaredZimmerman<https://twitter.com/JaredZimmerman>



On Fri, May 31, 2013 at 3:23 PM, Fabrice Florin <[hidden email]>wrote:

> Hey Kaldari,
>
> Thanks so much for yesterday's code fix to display videos in a modal
> viewer when you click on article thumbnails!
>
> This was long overdue and makes a huge difference already, as shown in
> this example:
>
> https://en.wikipedia.org/wiki/Congenital_insensitivity_to_pain
>
> I agree with Erik that the ideal behavior would be to play the video
> immediately after you click on the thumbnail, without requiring a second
> click to play in modal view.
>
> Now, is there any chance we could do something similar for still photos?
> As a longtime photographer, it drives me nuts that clicking on a thumbnail
> article takes you to this overwhelming page on Commons, with scary walls of
> text all around the image. (That's one of the reasons I haven't yet
> migrated any of my 20k Flickr photos<http://www.flickr.com/photos/fabola/sets/> to
> Commons, BTW.)
>
> Most modern web sites nowadays just show you the photo in full screen,
> with only a few icons around it, so you can experience the image as it was
> intended to be seen (typically in a black modal panel, to make it pop up
> more). You still have the option to reveal all the text details if you want
> them, but they are not forced on you as we do today on Wikipedia and
> Commons.
>
> Hopefully, our new multimedia team will be able to join forces with the
> design team to tackle some of these commonsense UI improvements, once we
> get up to speed this summer.
>
> Thanks again for this welcome prelude :)
>
>
> Fabrice
>
>
> _______________________________
>
> Fabrice Florin
> Product Manager, Editor Engagement
> Wikimedia Foundation
>
> http://en.wikipedia.org/wiki/User:Fabrice_Florin_(WMF)
>
>
> On May 30, 2013, at 1:35 AM, [hidden email] wrote:
>
>
> *From: *Erik Moeller <[hidden email]>
> *Subject: **Re: [Wikitech-l] showing videos and images in modal viewers
> within articles*
> *Date: *May 29, 2013 9:21:48 PM PDT
> *To: *Ryan Kaldari <[hidden email]>
> *Cc: *Wikimedia developers <[hidden email]>
> *Reply-To: *Wikimedia developers <[hidden email]>
>
>
> 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
>
>
> *From: *Brion Vibber <[hidden email]>
> *Subject: **Re: [Wikitech-l] showing videos and images in modal viewers
> within articles*
> *Date: *May 30, 2013 12:42:00 AM PDT
> *To: *Wikimedia developers <[hidden email]>
> *Cc: *Erik Moeller <[hidden email]>
> *Reply-To: *Wikimedia developers <[hidden email]>
>
>
> 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" <[hidden email]> 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#**Variation<
> 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 <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_overview<
> https://en.wikipedia.org/wiki/Cathedral_Peak_Granodiorite#Geological_overview
> >and
>
>
> https://en.wikipedia.org/wiki/**Battle_of_Jutland<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/<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
>
> [hidden email]
>
>
> https://lists.wikimedia.org/**mailman/listinfo/wikitech-l<https://lists.wikimedia.org/mailman/listinfo/wikitech-l>
>
>
>
> *From: *Ryan Kaldari <[hidden email]>
> *Subject: **Re: [Wikitech-l] showing videos and images in modal viewers
> within articles*
> *Date: *May 30, 2013 12:46:13 AM PDT
> *To: *Erik Moeller <[hidden email]>
> *Cc: *Wikimedia developers <[hidden email]>
> *Reply-To: *Wikimedia developers <[hidden email]>
>
>
> 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
>
>
>
> *From: *Antoine Musso <[hidden email]>
> *Subject: **Re: [Wikitech-l] showing videos and images in modal viewers
> within articles*
> *Date: *May 30, 2013 12:52:25 AM PDT
> *To: *[hidden email]
> *Reply-To: *Wikimedia developers <[hidden email]>
>
>
> 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?
>
>
> --
> Antoine "hashar" Musso
>
>
>
> *From: *Antoine Musso <[hidden email]>
> *Subject: **Re: [Wikitech-l] showing videos and images in modal viewers
> within articles*
> *Date: *May 30, 2013 1:34:35 AM PDT
> *To: *[hidden email]
> *Reply-To: *Wikimedia developers <[hidden email]>
>
>
> 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 ...
>
> --
> Antoine "hashar" Musso
> "did I say: 'be bold' ?"
>
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>
>
>
>
> _______________________________________________
> Design mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/design
>
>
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

Antoine Musso-3
In reply to this post by Ryan Kaldari-2
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!

--
Antoine "hashar" Musso


_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: showing videos and images in modal viewers within articles

Michael Dale-4
In reply to this post by Ryan Kaldari-2
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


<http://player.kaltura.com/docs/thumb>

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l