search

WordPress / Learn

WordPress.org Learn - The canonical source for the code and content behind https://learn.WordPress.org
276 stars 102 forks source link

Add play/pause controls for GIFs #256

Closed hlashbrooke closed 3 years ago

hlashbrooke commented 3 years ago

We are planning on using GIFs as part of instructional content on Learn as they are often a great way to illustrate a point in a quick and easy way. In order to use them effectively, they need to be both practical and accessible. In practice, this means that we need for them to not be looped and to have play/pause controls on the GIFs themselves.

This plugin offers the functionality we need, but I haven't looked at the code so I don't know if it's a good fit or not: https://wordpress.org/plugins/wp-gif-player-play-and-pause/

I realise that GIFs have the additional accessibility issue of not being available to blind users, so in the end, they might not be a good fit at all, but I would like to explore our options here.

@alexstine If you have any input on the accessibility side of things here I would appreciate it :)

hlashbrooke commented 3 years ago

Here's that plugin on GitHub for reference: https://github.com/roelmagdaleno/wp-gif-player-play-and-pause

dd32 commented 3 years ago

This plugin offers the functionality we need, but I haven't looked at the code so I don't know if it's a good fit or not: https://wordpress.org/plugins/wp-gif-player-play-and-pause/

This plugin seems a bit heavy for what it is, and it primarily suggests converting gifs to mp4/webm which won't be possible on learn.wordpress.org.

The next best option the plugin offers is the Canvas method via libgif-js, which only seems to offer a single click play option, ie. Loads a preview with a "Gif" overlay, and plays it upon click. It seems mostly designed to avoid auto-playing animation. It also has a Gutenberg Block error, so the editor options aren't immediately available to me.. although from what I see, I'm not missing out on much functionality.

Example of the default WP gif embed vs the plugin: https://cloudup.com/cfvpnJCMNGt

Libgif-js does support play/pause but the plugin has no implementation of that, and I can't seem to find any WP plugins that do have an implementation that would be "like a video embed, but gif".

hlashbrooke commented 3 years ago

Thanks for checking it out!

The canvas option there looks fine from a frontend user perspective, but it sounds like the plugin overall is much heavier than it needs to be and there's a block editor error in there too. Ideally, we could do a custom implementation of Libgif-js or find another plugin that does it, so I'll leave this issue open for working on that.

alexstine commented 3 years ago

@hlashbrooke GIFs are not accessible to me and if there's a way to make them accessible, I've never heard of it. I would recommend not going forward with this approach. I think the best way to describe content to users is through text. However, I understand not everyone learns best through text. In my case, I didn't have much of a choice. Will text/videos/images not be enough for lesson/workshop content?

I just really can't support the idea of adding GIFs. :(

Hope it sort of helps.

Thanks.

hlashbrooke commented 3 years ago

That helps a lot - thanks @alexstine!

I'm happy to can the idea of using GIFs in our content and sticking with images and videos as needed. Thanks for the input here. I'm closing this issue.

alexstine commented 3 years ago

I did find this but I imagine a plugin would be hard to come by for all these requirements.

https://accessibleweb.com/question-answer/animated-gifs-okay/#:~:text=Animated%20gifs%20can%20be%20accessible,the%20message%20can%20be%20communicated.