How to increase Header avatar size?

Dev
1

Other than editing the header file, is there an easy way to increase the header avatar size (menu icon)? If I scale the current image, it gets blurry. I think the medium avatar image is used and is closer to 32px. I wanted to put a larger image that is closer to 45 px.

Maybe through the api like below, but for the header icon not topic page:

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

Is there any similar code for the header avatar? Thanks!

1 Like
2

Take a look here if it can help you:
https://meta.discourse.org/t/avatar-size-handlebars-script-no-longer-working/29230/9?u=trash

EDIT: I just see that you are using the script I posted. BTW the old code posted by @Yuun in this topic is still working (on desktop)
https://meta.discourse.org/t/avatar-size-handlebars-script-no-longer-working/29230/5?u=trash

2 Likes
3

@Trash thanks, but isn’t that script for the topic and post avatars? I wanted to change the size of the avatar icon in the header (the one we click to open the notifications menu).

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.

5 Likes
5

@trash @Yuun Thanks! Works beautifully :slight_smile:

6

@P16 @Joe_Fedric

When you’ve updated discourse to include this commit (on latest as of August 12)

https://meta.discourse.org/t/how-to-change-topic-avatar-size/20689/23?u=yuun

You should use this script to change the avatar size up in the header:

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

Instead of the big ole mess up above.

4 Likes
7

I just tried this and… my whole forum disappeared haha! Switched back to the big 'ol mess for now. Not sure what I did wrong, but I lost all my formatting, content, and the header, when I used your smaller script. I’m ok with a backend big 'ol mess, when the alternative is a front-facing big 'ol mess.

XD

8

Here are two screenshots that show my forum using the different script versions:

Big 'ol mess

Screen Shot 2016-08-12 at 11.31.05 AM.png1114×895 18.4 KB

Short Script

Screen Shot 2016-08-12 at 11.31.27 AM.png1278×733 65.7 KB

9

Is your forum fully up to date with latest? That script is copied & pasted from my forum customization that I used to double check it worked.

And I just copied it again, directly from my post above, and it works fine.

10

Yup, updated!

I’m not sure why it didn’t work, though I have quite a bit of customization going on now that I got it to work. Could be a conflict maybe?

11

Latest is on 1.7.0.beta2, you aren’t up to date enough. :stuck_out_tongue:

The commit required for this is only like an hour old at this point, you really need to be on the very latest if you want to use it.

12

Easiest way to see if you have the commit is click that Installed version link. If you see the commit from @eviltrout in the list, then you don’t have it.

1 Like
13

Ah, yes, the commit shows as ~2hrs old. That’s likely why it broke - oops! The forums go down for 15 minutes at a time when I update or add a plugin, so I try not to do that too often. When the forums are down, I always get support tickets on my main Help Center, so I try to do it around lunch or late at night.

I’ll update and test it again in a few days, we have a product update release dropping in a few days, and I need to shift focus to that. I’ll update this thread when I can confirm I got it working. Thanks for all the help!

14

How are you updating? Because if you do it from /admin/upgrade (doesn’t help if you go through a staging server first either), it shouldn’t go down for 15 minutes, it should be no more than a minute or 2 at most. But don’t let that convince you to pull that in immediately versus waiting till a time you are more comfortable with.

3 Likes
15

I usually update through ssh. I do that because it allows me to quickly check over stats like disk space, etc… and I don’t really mind the 15 minute wait as things are being rebuilt. If it should take a minute or two, perhaps the next time I do an update I’ll use the admin console. I’ve ignored the dashboard method, because I’ve been learning how to actually admin the entire installation, instead of just knowing what button to push to update. I really appreciate the options for both, given by Discourse, however - it’s nice to know I have the option. I suppose it’s worth it to note that I inherited our forums from a team that was dissolved, and have not done this kind of support in the past. So, I’m on the learning curve somewhere between literate and competent. Still in the educational phases of my career :stuck_out_tongue:

2 Likes
16

Now we have a theme component to increase avatar size on header and other things

7 Likes