Increase Avatar Size to 120x120 pixels


(Rodrigo) #1

Hi everyone,

With the help of some meta contributors on here, I managed to finally change the avatar size on my instance.

Someone helped me from this thread: How to change topic avatar size?

To change the avatar size to 120px by 120px, add the following code to the </head> in customisation.

<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="120"}}</a>
    </script>
    <style>.topic-avatar{
        border-top:1px solid #e9e9e9;
        padding-top:15px;
        width:120px;
        height:120px;
        float:left;
        position:relative;
        z-index:2
    }
    </style>

You can make it smaller/larger by changing the values of ‘120’ to whatever you want.

So far only works with square images… Looking into making a plugin that does this, so getting my thinking cap out and going to try work it out :smile:

Regards


(Jacob Chapel) #2

Here is a more comprehensive solution which accounts for the difference places that avatars show up in a post context as well as making sure the mobile avatar is proper sized. Replacing the template and forcing 120px will make avatars 120px on mobile and overflow the username and content.


(Kane York) #3

You can have different </head> content for mobile.


(Jacob Chapel) #4

Good point. I hadn’t tested it in the customize panel.

Keep in mind that I use the modifications in a plugin, so the extension points are different and at least at the time, there wasn’t a good way to handle mobile without the check. The CSS is important though otherwise the resized avatars look odd in replies for instance.


(Rodrigo) #5

Hey @chapel, thanks for your input, much appreciated.

What are all the extras your plugin implements? I don’t know how to use GIT to be honest, but are you able to modify your code to just implement an avatar size modifier?

I haven’t had much time just yet to investigate plugins for discourse, (or even how to use GIT for that matter), but your response would be most appreciated.


(Rodrigo) #6

Ok feeling like a n00b, just looked into GitHub, will see what i can come up with.


(Jacob Chapel) #7

Well, you don’t need to use it as a plugin, as my plugin is very specific to my site. Has more customizations other than the larger avatar.

I could package it up as a separate plugin, wouldn’t be very much work and I guess it would simplify most peoples lives around here. :smile:

Installing plugins are easy though, just need to add the git link in your app.yml file in /var/discourse directory.


(Rodrigo) #8

That would be awesome - I suppose after that, I can ‘fork’ it, then start to add stuff, then ‘pull-request’ to see if you like the changes/additions??? (trying to get my head around the terminilogy) :smiley:


(Jacob Chapel) #9

Yeah I suppose. You definitely should learn git/github and the like. It is a great piece of software to use if you do any type of programming or similar.


(Rodrigo) #10

Doing Games Dev at the moment, could’ve taken the mysql/php path, I’ve tinkered with it a bit, consider myself an amatuer though, however Discourse has got me fairly interested in Ruby on Rails and everything surrounding it, looking to see where I can learn.