How to increase avatars size on Latest without making them blurred


(Joe) #1

In order to avoid blurry avatars, you need to override the template for posters-column.raw and change the size of the avatars to “large”. Add this to the </head> in your desktop theme

<script type="text/x-handlebars" data-template-name="list/posters-column.raw">
<td class='posters'>
  {{#each posters as |poster|}}
    <a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">
      {{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" imageSize="large"}}
    </a>
  {{/each}}
</td>
</script>

This will make all the avatars larger:

You can then use CSS (in your desktop theme) to reduce the sizes of all the avatars except for the latest post:

td.posters {
  display: flex;
  align-items: center;

  img.avatar {
    height: 25px;
    width: 25px;

    &.latest {
      height: 40px;
      width: 40px;
    }
  }
}

You can stop here but I feel it’s a little bit messy so you might also want to shift the latest poster’s avatar to the far left to make things a little bit more uniform like so:

For this you’d have to use this bit of CSS instead

td.posters {
  display: flex;
  align-items: center;
  
  a.latest {
    order: -1;
    
    img {
      margin-right: 4px;
      height: 40px;
      width: 40px;
    }
  }
 
  img.avatar {
    height: 25px;
    width: 25px;
  }
}

Increase avatar of Latest.