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


(Trish) #1

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.


(Khoa Nguyen) #2

You can try this:

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

(Trish) #3

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>

(Khoa Nguyen) #4

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


(Jacob Chapel) #5

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.


Image uploads and avatars
Increase Avatar Size to 120x120 pixels
Size topic avatar
(Trish) #6

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


(Boost) #7

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?


(Sam Saffron) #8

See this:

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


(Boost) #9

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


(Sam Saffron) #10

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?


(Jeff Atwood) #11

Maybe @Dax could assist with that?


(Daniela) #12

Now we have a how to guide: