Avatar Size and Shape

[Discourse]

	Summary	Avatar Size and Shape will allow you to easily change the size and shape of the avatars on your site.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-avatar-component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Contribute > Bug, Contribute > UX, and Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

Avatar Size and Shape allows you to easily customise the size and shape of avatars on your site in a variety of different locations.

Settings

Name	Description
latest avatar size	Choose the avatar size on latest. Default value is small (25px). To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R.
topic avatars size	Choose the avatar size on topics. Default value is 45px. To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R.
header avatars size	Choose the avatar size on header. Default value is 32px. To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R.
header height	Choose the height of the header. The choice must be made based on the header_avatars_size + 10px. For example, if the header_avatars_size is set to 90px, the header should be 100px. Default value is 60px.
margin top	Choose the distance in px from the header. Default value is 0px.
avatars border radius	Choose the border-radius of the avatars on the site. The setting will be applied to all avatars, including the one on the header and the one on the user-card. 0% corresponds to a square shape, 50% to a rounded shape. Default value at 50%
mobile avatars size	Choose the avatar size on topics on Mobile. Min value is 45px (default), max value is 80px. To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R.

Extra details:

• latest avatar size changes the avatar 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 works well up to the 60px size. For avatars of a 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).

The position (in height) of the notification bubble (topics and PMs) has remained unchanged. These bubbles will only move horizontally following the avatar size.

Development History

This theme component was written taking inspiration from the guides

• How to increase avatars size on posts without making them blurred
• https://meta.discourse.org/t/how-to-increase-avatars-size-on-latest-without-making-them-blurred/89606
• How to increase Header avatar size?

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T08:14:10Z

Check document

Perform check on document:

[davidkingham]

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.

[ariznaf (fernando)]

훌륭한 컴포넌트입니다. 저희가 찾고 있던 것이 바로 이것이었어요.

다만, 사이트에서 아바타 플레어를 사용 중이라면(저희처럼) 그 크기도 변경할 수 있으면 좋겠습니다.

감사합니다.

[orchardstreet]

정말 멋지네요
다만, 토픽 아바타 크기를 53으로 설정할 수 있으면 좋겠어요

그리고 이 설정은 일부 홈페이지 카테고리 배치에서 발견되는 토픽-포스터 div의 아바타에도 적용되나요? 적용되는 것 같지 않은데, 적용되면 좋겠어요.

[zuker (Matías)]

@ariznaf

훌륭한 컴포넌트네요. 우리가 찾고 있던 거였어요.

사이트에서 아바타 플레어를 사용한다면(우리는 그렇게 하고 있어요), 그 크기까지 변경할 수 있으면 좋겠습니다.

감사합니다.

이걸 할 수 있는 방법을 찾았나요?

[jrgong]

@dax Quick Messages 플러그인과 충돌하는 작은 문제를 발견했습니다.
아래 CSS는 Quick Messages 플러그인의 배지 알림에도 적용됩니다:

.d-header-icons .unread-private-messages {
    right: auto;
    left: -10%; /* <--- 이것이 문제의 원인입니다 */
}

CSS 선택자에 #… 요소를 추가하는 것이 좋을 것 같습니다

[Joshua_Kogan]

모바일 버전에 대한 해결책을 찾으셨나요?

[davidkingham]

아니요, 불행히도 방법을 찾지 못했습니다.

[dax (Daniela)]

@davidkingham

이것으로 모바일에서 토픽 아바타의 크기를 변경하려면 어떻게 해야 하나요?

이번 주에 시간이 나면 확인해 보겠습니다.

[dax (Daniela)]

@davidkingham

이걸로 모바일에서 토픽 아바타 크기를 변경하려면 어떻게 해야 하나요?

@zuker

이 방법을 찾았나요?

모바일에서 크기를 45px(기본값)에서 80px까지 설정할 수 있는 새로운 설정이 추가되었습니다.

새 설정을 확인하려면 컴포넌트를 업데이트하세요.

[davidkingham]

다니엘라님, 감사합니다. 한 가지 더 제안드릴게요. large 또는 extra_large 크기의 답글 아바타는 그대로 유지하면서 CSS로 크기를 줄일 수 있는 옵션이 있으면 좋겠습니다. 아니면 플러그인에서 답글 아바타 크기를 직접 줄일 수 있는 옵션이 있거나요. 현재는 이렇게 시도하고 있지만, medium 크기의 아바타를 확대하다 보니 당연히 큰 아바타가 흐릿해집니다.

[Denis_Heraud]

훌륭한 플러그인입니다! 감사합니다!

@Dax 현재 제가 발견한 유일한 문제는 헤더가 더 어두운 색이라는 점입니다. 호버 상태가 흰색으로 설정되어 있어 검색 버튼과 햄버거 메뉴에서는 잘 작동하지만, 아바타가 약간 더 큰 크기로 설정되면 호버 영역의 크기가 아바타보다 작아집니다. 이 문제를 어떻게 해결해야 할까요?

[dax (Daniela)]

이 컴포넌트는 사이트의 색상을 어떤 방식으로든 변경하지 않습니다. 배경색을 덮어쓰고 있는 다른 테마를 사용 중일 가능성이 높습니다.

[ariznaf (fernando)]

훌륭한 컴포넌트입니다.
테마의 CSS를 변경하지 않고(테마 업그레이드 시 문제가 발생할 수 있으므로) 아바타의 크기와 외관을 쉽게 제어할 수 있습니다.

아니요, 색상 변경은 없습니다.

우리는 이 컴포넌트를 사용 중이며 만족하고 있습니다.

[Denis_Heraud]

@dax 제가 설명을 잘 못 드린 것 같습니다. 문제는 색상이 아니라 컨테이너의 크기입니다. 여기 메타 페이지의 오른쪽 위 모서리에 있는 내 아바타 아이콘에 마우스를 올리면 :hover 속성이 적용된 색칠된 사각형이 표시되는데, 이 사각형은 아바타보다 큽니다.

하지만 이 플러그인으로 아바타를 확대하면 :hover 사각형의 크기가 아바타보다 작아져서 약간 어색해 보입니다.

[dax (Daniela)]

해당 div의 높이를 변경하면 다른 두 아이콘도 다시 배치해야 합니다. 이 때문에 처음에는 그렇게 하지 않는 편을 선호했습니다. 현재로서는 hover 시 div의 색상을 투명하게만 설정하고 있습니다.

Remove background on header avatar

[Denis_Heraud]

CSS로 단순히

.header-dropdown-toggle #current-user

를 타깃팅하는 것이 불가능할까요?

[dax (Daniela)]

아니, 그렇게 간단하지 않아요.

몇 시간 안에 확인해볼게요.

[Denis_Heraud]

CSS로 이걸 구현하려고 하는데, 모든 헤더 아이콘이 동일한 클래스를 사용하고 있어서:

<li class="header-dropdown-toggle">

모든 아이콘이 동시에 켜지거나 꺼지는 것 같습니다. 아바타 아이콘만 :hover 시 활성화되지 않도록 하신 건 어떻게 하신 건가요?

[Denis_Heraud]

참고로, 아바타에 :hover 상태를 적용하여 흰색 테두리를 표시하는 꽤 괜찮은 효과를 CSS로 구현할 수 있었습니다. 이제 li 요소의 배경색이 나머지 부분과 함께 하이라이트되지 않도록만 하면 되는데…