Animated Avatar

Customization Plugin
1
:information_source: Summary Discourse Animated Avatars adds the ability for users to upload animated gif/webp avatars which will animate on hover or selection in posts, user cards, and profile pages.
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-animated-avatars
:open_book: Install Guide How to install plugins in Discourse

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.

Animated gifs are auto converted to webp on upload, reducing overall file size. This can be set with animated_gif_avatar_to_webp (default true).

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.

:information_source: gifsicle is not needed for animated_gif_avatar_to_webp. Animated gifs will be converted to webp with cropped square avatars.

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

Settings

Name Description
animated avatars min trust level to display Min trust level to display an animated avatar
animated avatars always animate Always animate avatars
animated gif avatar to webp auto converts animated gif avatars to webp on upload, reducing file size. (default: true)
animated gif avatar webp quality the quality of the converted gif to webp. Recommended settings between 75% to 100% (default: 80%)

Technical

Additional CLI included to help with determining gif/webp avatar counts, and converting existing gif avatars to webp.

bin/rake animated_avatars:count_animated counts the total number of animated avatars, grouped by gif/webp

bin/rake animated_avatars:gif_to_webp converts existing animated gif avatars to webp. The new avatars are automatically applied, and existing gif avatars are removed by the CleanUpUploads job.

22 Likes
Animated GIF avatars no longer supported by default
Animated GIF avatars, how enable?
Incompatibility between Cakeday,Data-Explorer and Animated Avatar plugins
Set Slow Mode return a 403 error - I am administrator
2

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

3 Likes
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
image305×285 11.1 KB

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.

The Missing Public Profiles Mystery [Animated Avatars]
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.

23

I am having problems with the Animated Avatar Plugin as well - since the last upgrade yesterday. If the plugin is activated the messages page (/u/username/messages) does not load anymore.

Failed to load resource: the server responded with a status of 429 (Too Many Requests)

animated-bound-avatar.js:10 Uncaught TypeError: r.default.compute is not a function
    at animated-bound-avatar.js:10:1
    at helpers.js:30:1
    at index.js:4731:1
    at Object.getValue (index.js:4734:1)
    at manager.js:746:1
    at reference.js:136:1
    at e.track (validator.js:668:1)
    at f (reference.js:135:1)
    at Object.evaluate (runtime.js:3269:1)
    at Object.evaluate (runtime.js:1052:1)
    at It.evaluateSyscall (runtime.js:4263:1)
    at It.evaluateInner (runtime.js:4234:1)
    at It.evaluateOuter (runtime.js:4227:1)
    at Wt.next (runtime.js:5058:1)
    at Wt._execute (runtime.js:5045:1)
    at Wt.execute (runtime.js:5038:1)
    at zt.handleException (runtime.js:4372:1)
    at Ut.handleException (runtime.js:4580:1)
    at Ft.throw (runtime.js:4319:1)
    at $e.evaluate (runtime.js:2091:1)
    at Ft._execute (runtime.js:4306:1)
    at Ft.execute (runtime.js:4291:1)
    at Kt.rerender (runtime.js:4606:1)
    at wr.render (index.js:6751:1)
    at index.js:7013:1
    at Mt (runtime.js:4139:1)
    at Tr._renderRoots (index.js:6996:1)
    at Tr._renderRootsTransaction (index.js:7039:1)
    at Tr._revalidate (index.js:7072:1)
    at p.invoke (queue.ts:201:14)
    at p.flush (queue.ts:98:13)
    at h.flush (deferred-action-queues.ts:75:19)
    at $._end (index.ts:616:32)
    at $.end (index.ts:298:10)
    at $._run (index.ts:667:14)
    at $.run (index.ts:339:17)
    at d (index.js:109:1)
    at u.success (ajax.js:105:1)
    at l (jquery.js:3213:1)
    at Object.fireWith [as resolveWith] (jquery.js:3343:1)
    at E (jquery.js:9617:1)
    at XMLHttpRequest.<anonymous> (jquery.js:9878:1)
24

FIX: Call boundAvatar() directly (#17) · discourse/discourse-animated-avatars@f8ff4a7 · GitHub or 3.1.0.beta7 fixed it for me, thank you. :slight_smile:

25

This doesn’t seem to be working in Brave or Opera, though it works in Firefox.

Brave and Opera both reporting a .png image and not changing to .gif.

26

Cross-linking a reported bug:

6 Likes
The Missing Public Profiles Mystery [Animated Avatars]
27

Profile pages are also entirely broken for me

Uncaught TypeError: Cannot destructure property 'hasBlock' of 'e' as it is undefined.
    at b.getConnectors (plugin-outlet.js:87:19)
    at B._join (index.ts:646:21)
    at B.join (index.ts:362:17)
    at p (index.js:156:1)
    at index.js:257:1
    at o.getValue (install-function-helper-manager.js:42:12)
    at manager.js:746:1
    at reference.js:131:1
    at e.track (validator.js:657:1)
    at d (reference.js:130:1)
    at runtime.js:1648:1
    at reference.js:131:1
    at e.track (validator.js:657:1)
    at d (reference.js:130:1)
    at index.js:5579:1
    at reference.js:131:1
    at e.track (validator.js:657:1)
    at d (reference.js:130:1)
    at index.js:5579:1
    at reference.js:131:1
    at e.track (validator.js:657:1)
    at d (reference.js:130:1)
    at reference.js:306:1
    at reference.js:131:1
    at e.track (validator.js:657:1)
    at d (reference.js:130:1)
    at Object.evaluate (runtime.js:3437:1)
    at Object.evaluate (runtime.js:1052:1)
    at It.evaluateSyscall (runtime.js:4258:1)
    at It.evaluateInner (runtime.js:4229:1)
    at It.evaluateOuter (runtime.js:4222:1)
    at Wt.next (runtime.js:5053:1)
    at Wt._execute (runtime.js:5040:1)
    at Wt.execute (runtime.js:5033:1)
    at $t.handleException (runtime.js:4367:1)
    at qt.handleException (runtime.js:4575:1)
    at Dt.throw (runtime.js:4314:1)
    at Be.evaluate (runtime.js:2088:1)
    at Dt._execute (runtime.js:4301:1)
    at Dt.execute (runtime.js:4286:1)
    at Ht.rerender (runtime.js:4601:1)
    at wr.render (index.js:6742:1)
    at index.js:7004:1
    at Mt (runtime.js:4134:1)
    at Cr._renderRoots (index.js:6987:1)
    at Cr._renderRootsTransaction (index.js:7030:1)
    at Cr._revalidate (index.js:7063:1)
    at p.invoke (queue.ts:201:14)
    at p.flush (queue.ts:98:13)
    at h.flush (deferred-action-queues.ts:75:19)
    at B._end (index.ts:616:32)
    at B.end (index.ts:298:10)
    at B._run (index.ts:667:14)
    at B.run (index.ts:339:17)
    at d (index.js:108:1)
    at t.success (ajax.js:115:7)
    at l (jquery.js:3213:1)
    at Object.fireWith [as resolveWith] (jquery.js:3343:1)
    at x (jquery.js:9617:1)
    at XMLHttpRequest.<anonymous> (jquery.js:9878:1)

This might be a fix?

2 Likes