How to increase Header avatar size?

dev
4

edit: 8/12

Use this script to update header avatar size:

<script type="text/discourse-plugin" version="0.4">
    api.changeWidgetSetting('header-notifications', 'avatarSize', '70');
</script>

And not the stuff below!

Similar to the first script for changing avatar size, you can overwrite the header notification widget. With the caveat that this is liable to be a pretty fragile customization (you’ll likely need to remove and redo it if they change anything up in the header… or change the location of avatarImg):

<script type="text/discourse-plugin" version="0.5">
avatarImg = require('discourse/widgets/post').avatarImg;

api.createWidget('header-notifications', {
  html(attrs) {
    const { currentUser } = this;

    const contents = [ avatarImg('medium', { template: currentUser.get('avatar_template'),
                                             username: currentUser.get('username') }) ];

    const unreadNotifications = currentUser.get('unread_notifications');
    if (!!unreadNotifications) {
      contents.push(this.attach('link', { action: attrs.action,
                                          className: 'badge-notification unread-notifications',
                                          rawLabel: unreadNotifications }));
    }

    const unreadPMs = currentUser.get('unread_private_messages');
    if (!!unreadPMs) {
      contents.push(this.attach('link', { action: attrs.action,
                                          className: 'badge-notification unread-private-messages',
                                          rawLabel: unreadPMs }));
    }

    return contents;
  }
});
</script>

As long as you are okay with that though, you just want to change medium in avatarImg('medium', to whatever size. This changes the size on mobile as well, fyi. Otherwise it appears to work to me, do a little double checking to make sure everything is okay but I don’t see any errors immediately myself.

The change that made the post avatar update easier was the addition of the size setting in that widget (with the new plugin api call to update settings) - something similar would work here and get around the messiness, but I’m not sure what the process is for that change. One the one hand maybe the Discourse team doesn’t want to individually add settings for every little thing, but also this isn’t hugely ideal? Dunno, though.

4 Likes