Avatar size handlebars script no longer working


(Sam) #1

I have been using the following for a couple months now on my forums:

(</head> section of admin/customize)

<script type='text/x-handlebars' data-template-name='post/poster-avatar.raw'>
<a href="{{post.usernameUrl}}" classNames="trigger-user-card {{classNames}}" data-user-card="{{post.username}}">{{avatar post imageSize="70"}}</a>
</script>

And noticed today, as user-uploaded avatars started disappearing (the letter avatars seem okay), that this is no longer working. Removing this script puts the old 45x45 avatars back in, and the avatar images elsewhere are unaffected.

Does anyone have a clue as to why this would be happening?

Update - I changed the size to huge and scaled the avatar size back down to 70x70 in the CSS as a workaround (with some quality loss, unfortunately), but I’m not seeing any user-uploaded avatars in the mobile version even if I turn all customization off. Did something go and kill my avatar upload folder or something?


How to increase Discourse avatar resolution with JS?
(Sam) #2

Alright, I fixed this on my test forum and will have it on my live forum soon enough. I guess a bunch of the avatar folders/images were deleted for some reason?

In any case, to get everything back to speed, I found the setting “avatar sizes” in the admin panel and added 70, 64, and 90 to the list of sizes. 70 to get the above script working for desktop, and 64 and 90 to get the mobile avatars working again (/shrug, these were the folders the mobile avatars were located in for some reason).

This was followed by a ./launcher rebuild app, I didn’t find any other task to run that did the trick. Update: it looks like it actually rebuilds the avatars by itself without the rebuild, but just takes a few minutes? Seems to be doin’ so, in any case.

In any case, issue solved, reason for issue remains mysterious.


(Daniela) #3

Hi @Yuun, we have just update the forum to version beta 11 and the script now do not works (maybe for this?)

Can you tell me how to fix the script please?
Thanks in advance!


(Sam) #4

Yeah, this script doesn’t work after the big post rendering change. I don’t yet have a working replacement I’m comfortable with but I’ll let you know when I do.


(Sam) #5

With the caveat that this script is liable to break upon future updates, it appears to be working without issue for me, for now:

(add to </head>, as before)

<script>
 createWidget = require('discourse/widgets/widget').createWidget;
 avatarFor = require('discourse/widgets/post').avatarFor;
 h = require('virtual-dom').h;
 
    createWidget('post-avatar', {
        tagName: 'div.topic-avatar',
    
              html(attrs) {
                var body;
                if (!attrs.user_id) {
                  body = h('i', { className: 'fa fa-trash-o deleted-user-avatar' });
                } else {
                  body = avatarFor.call(this, '70', {
                    template: attrs.avatar_template,
                    username: attrs.username,
                    url: attrs.usernameUrl,
                    className: 'main-avatar'
                  });
                }
            
                return [body, h('div.poster-avatar-extra')];
              }
    });
</script>

This changes the avatar size to 70px. To use whatever your preferred avatar size is, swap it for 70 here: body = avatarFor.call(this, '70', {.


How to increase Header avatar size?
(Sam Saffron) #6

probably worth making that 70 figure easier to override @eviltrout perhaps?

updateWidget('post-avatar', {
   avatarSize: 70
}); 

(Sam) #7

That would look a lot nicer, at least.

Also @Trash as a note, the above script does affect the mobile display (I think the old template override did too, but yeah). If you add the script to the mobile CSS header as well with large as the size value it’ll set the mobile avatars to their default size.


(Robin Ward) #8

This is a great idea so I implemented in in the latest master.

A widget can now have settings:

And there is a new API call to update them:


Native theme support
(Sam) #9

Thanks!

<script>
 changeSetting = require('discourse/widgets/widget').changeSetting;
 changeSetting('post-avatar', 'size', '70');
</script>

Much better :smiley:

edit: with plugin API

<script type="text/discourse-plugin" version="0.2">
    api.changeWidgetSetting('post-avatar', 'size', '70');
</script>

How to change topic avatar size?
How to increase Header avatar size?