Animated Avatar Plugin

plugin
1

Summary: This plugin adds the ability for users to upload gif avatars which will animate on hover or selection in posts, user cards, and profile pages.

:link: GitHub: GitHub - discourse/discourse-animated-avatars: A plugin to add gif avatars in Discourse
:arrow_right: Install: Follow the plugin installation guide.

Features

By default, this pauses animation when not focused. Within topics, animation will pause when post is not hovered or selected.

animated_avatars_always_animate: overrides the above pausing, forces avatars to always animate.
animated_avatars_min_trust_level_to_display restrict animating of avatars by trust level.

Respects prefers-reduced-motion in the browser’s accessibility options: Animations will be disabled entirely.

Configuration

This plugin has an optional dependency on gifsicle. This is used to resize uploaded gif images to fit a square avatar, which helps to wrangle aspect ratios as well as normalize any differences between the static and animated images’ sizes for a smoother swap. The plugin will still function without it, but any non-square avatars may appear stretched when shown.

To enable, you will add a call to the install script in your app.yml. A example of what the after_code hook will look like is the following:

hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/discourse-animated-avatars.git
    - exec:
        cd: $home/plugins/discourse-animated-avatars
        raise_on_fail: false
        cmd:
          - $home/plugins/discourse-animated-avatars/scripts/install.sh

CHANGELOG

  • added two more site settings - animated_avatars_always_animate to force always-on animation, and animated_avatars_min_trust_level_to_display to restruct animated avatars by trust level

TODO

16 Likes
2

you’re awesome for this, is there a way for the animation to always play, regardless of focus?

3 Likes
5

what is app.yml?where i find it?

6

See Install Plugins in Discourse

7

thanks for answering, this code so I activate it from the prompt?

hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/discourse-animated-avatars.git
    - exec:
        cd: $home/plugins/discourse-animated-avatars
        raise_on_fail: false
        cmd:
          - $home/plugins/discourse-animated-avatars/scripts/install.sh
8

No, you find app.yml and edit the file.

9

Would that just install?

I thought that in addition to installing I had to put this code somewhere lol

10

Just one more doubt doing you a favor, how do I set the trust level of who to use the plugin?

1 Like
11

Limit by trust level hasn’t been implemented, but it’s good to know that it’s a desired feature. I’ll try to find some time to work on this part soon.

2 Likes
12

I just pushed up two site settings for the requested features:

animated_avatars_always_animate
and limiting animation by trust level: animated_avatars_min_trust_level_to_display

4 Likes
13

Thank you for the always animate option. I had a couple users thirsty for the feature

2 Likes
14

Thank you very much for releasing this option, I am very grateful and I am very happy for that, it is people like you who make the world better!

So I have a doubt, what is the default size of the GIF so it doesn’t get stretched? 50x50?

15

Any square size between 50px and 200px should not get stretched. If you use the optional gifsicle dependency, this can resize uploaded gifs for you.

16

excuse my lack of knowledge, but what is gifsicle?

17

gifsicle is software for manipulating gif images.

It’s detailed in the configuration section.

2 Likes
18

Some users are reporting the avatar being returned as .png despite the media type being gif.

At this time I’m just trying to understand if it’s something that could be related to the plugin/discourse/nginx or user.

I’ve already a use case in which the issue was the user accessing their Windows machine via RDP but in a specific report I’m having a user with Windows 10 Version 22H2 OS Build 19045.2728 and Chrome 111.0.5563.65 (64bit) but this is what is being returned to the browser:

image

The 108_2.png is an avatar.

If I check the same topic, I can see that I’m receiving the same image but with .gif extension and in fact it loads animated for me.

However, trying to reach the file directly shows me that two versions exists, both a .png version and a .gif version

https://netgamers.it/user_avatar/netgamers.it/borzo/100/108_2.gif
https://netgamers.it/user_avatar/netgamers.it/borzo/100/108_2.png

For some reason, that users is not receiving the gif version. but he’s matching all the settings I’ve set up for the plugin:

image
image1376Ă—177 6.22 KB

1 Like
19

There are two static assets that get returned – png and gif. In “always animate” mode, the PNG is swapped on load of the post via a script for the gif version.

If the user is viewing with blocked JS, that may prevent the animation.

(I’m also able to see the animation from my end)

2 Likes
20

Good catch, I’ll ask him if he has any ads blocker or anything that could mess with the JS of the website.

1 Like
21

It seems that user pages are now broken with this installed, a quick look returns the following stack trace:

Uncaught TypeError: r.default.compute is not a function
    n animated-bound-avatar.js:10
    htmlHelper helpers.js:30
    Ember 2
    l manager.js:746
    tag reference.js:136
    track validator.js:668
animated-bound-avatar.js:10

Unfortunately I don’t know when this started happening.

22

I haven’t done any debugging on my own yet, but it would’ve had to break between these two commits, as I checked the Discourse diff before updating yesterday evening, and it wasn’t broken before that.