CSS help please- resizing avatar in posts from 45 to 120

Hell Everyone,

I’m not ashamed to say I am a noob at css and just simply can’t do this yet. (I’m still learning about colors, lol.)
Could someone please write a css for me?
I’d like to change the size of the avatars in the posts from 45x45 px to 120x120 px. I think 120 is called “huge”.
(Only there.)
Many of my members have been asking for a bigger avvie in their posts, and I tried on my own but in vain.

Many thanks in advance,
R.

You can try this:

.topic-avatar{
width: 120px;
}
.avatar {
width: 120px;
height: 120px;
}
1 Like

thank you , I’ll give it a try.
My friend tried this one down below but it didn’t work.

export default Ember.Component.extend({
  tagName: 'a',
  attributeBindings: ['href'],
  classNames: ['trigger-expansion'],
  href: Em.computed.alias('post.usernameUrl'),

  click: function(e) {
    this.appEvents.trigger('poster:expand', $(e.target));
    this.sendAction('action', this.get('post'));
    return false;
  },

  render: function(buffer) {
    var avatar = Handlebars.helpers.avatar(this.get('post'), {hash: {imageSize: 'huge'}});
    buffer.push(avatar);
  }
});
</script>

It was a quick css. You friend are doing it in the right way

1 Like

So I have done this on my site some time ago. The way I did it was through a plugin but you should be able to do it with just the customize tab in the admin panel.

It is both CSS and a template override to make it work.

Add the following to the CSS/HTML section of the customize area in admin panel.

CSS

// New avatar width
$topic-avatar-width: 120px;
$vertical-padding: 16px;

.topic-avatar {
  width: #{$topic-avatar-width};
  padding-bottom: #{$vertical-padding};
}

.topic-avatar .avatar,
.embedded-posts .topic-avatar {
  width: #{$topic-avatar-width};
  height: #{$topic-avatar-width};
}

// Make username flush with avatar
.topic-body {
  padding-top: #{$vertical-padding};
}

// Custom min-height to account for bigger avatar
.cooked {
  min-height: 28px;
}

Header

<script type="text/x-handlebars" data-template-name="post/poster-avatar.raw.hbs">
<a href="{{post.usernameUrl}}" classNames="trigger-user-card {{classNames}}" data-user-card="{{post.username}}">
  {{#unless post.controller.site.mobileView}}
    {{avatar post imageSize="huge"}}
  {{else}}
    {{avatar post imageSize="large"}}
  {{/unless}}
</a>
</script>

Mobile CSS

May not be needed since I might have added it before some template changes above and I’m on mobile so can’t check ATM to confirm.

.topic-avatar img.avatar {
  height: 45px !important;
  width: 45px !important;
}

I haven’t tested this exactly as is in the customize section as I said I use the above changes in a plugin. I also wrote this on mobile which is a bit harder and may have typos.

For reference, my plugin: GitHub - chapel/discourse-wyl

It has other stuff and is specific to my sites customizations.

9 Likes

Thank you so very much for sharing this. You can’t imagine how many days I tried to figure this out.

Thanks so much. :smile:
Have a great day,
R

This works great in changing the size of the avatars on the page. But the image files are still the same as the 45px wide ones, so all the avatars look really blurry. Is this something wrong with my setup or do I have to try to find some way to have the actual image files also be larger?

See this:

We may want to make a sample #theme here that shows how to do it.

3 Likes

Thanks. That worked perfectly. Somehow I missed that earlier when searching for avatar resizing.

Yeah it took me quite a while to find it as well.

We need an official #howto here with pretty pictures, etc. Perhaps work on one?

2 Likes

Maybe @Dax could assist with that?

3 Likes

Here are two guides to increase the size of the avatars on posts and on the homepage Latest without the effect blurred:

5 Likes