Avatar size and shape

theme-component

(Daniela) #1

This is a theme component that will allow you to easily change size and shape of the avatars on your site.

Repository link:
https://github.com/discourse/discourse-avatar-component

Some details:

The description of the theme settings should be clear enough, but I add some details:

  • latest avatar size: change the avatars size on the /latest page, all the avatars will be visible up to the medium size. From large onwards, only the avatar of the last user who wrote on the topic will be displayed.
  • header avatar size: it works well up to the 60px size. For avatars of larger size, the height of the header must be increased (header height) and consequently the margin-top that distances the header from the other elements of the page must also increase (margin top).
    I chose not to change the position (in height) of the notification bubble (topics and PMs) so that they remain in line with the red bubble for flagged topics. These bubble will only move horizontally following the avatar size.

How do I install this component?

You install this component just like any other theme. Follow the instructions in the official guide:

Once you’re done, simply add the component to your current theme.


This theme component was written taking inspiration from the guides


TODO

  • I will probably have to create a particular theme setting for mobile
  • The component has not been tested with unofficial plugins, almost certainly there will be fixes to do (of course PRs are always welcome)

A graceful theme for Discourse
How to increase Header avatar size?
(David Kingham) #3

How would I go about changing the size of the topic avatar on mobile with this? 80px looks pretty good on desktop, but obnoxious on mobile. I tried changing .topic-avatar width but it just shifts the text and the avatar stays the same.