Cannot mount the "post-avatar" on the "topic-above-post-stream" plugin outlet

Development

AI-generated summary

Adekunle_Odujoko is having trouble mounting the “post-avatar” widget on the “topic-above-post-stream” plugin outlet in their Discourse theme. They’ve tried adding the widget to the outlet using the code:

{{mount-widget widget="post-avatar"}}

However, it doesn’t show up on the page.

awesomerobot suggests that the widget requires additional attributes, such as username, name, and url, to function properly. They provide an example of how to pass these attributes to the widget:

{{mount-widget widget="post-avatar" args=(hash username=this.username)}}

Alternatively, they recommend using the avatar helper to display the user’s avatar:

{{avatar user imageSize="large"}}

Adekunle_Odujoko responds that they intend to display the user avatar above each post on the post page, but are struggling to get the necessary user data into the “topic-above-post-stream” plugin outlet. They’ve tried adding the code to the common/head_tag.html file, but it only displays a trash icon.

1

After going through this guide " Beginner’s guide to developing Discourse Themes , I tried mounting the post-avatar widget on the “topic-above-post-stream” plugin outlet on the post page and it did not show up on the page

Below is the code I added

<script type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/post-page">
    <div class="post-detail">
      {{mount-widget widget="post-avatar"}}
    </div>
</script>

Am I missing something?

2

You’re likely missing attributes that the widget requires to show… for example, how does it know which user you want to show the avatar for in this context?

Looking at the original widget here:

it expects:

  • template
  • username
  • name
  • url

So you’d have to get the data you want into your plugin outlet, then pass it to the widget… something like

{{mount-widget widget="post-avatar" args=(hash username=this.username)}}

that said… what are you trying to achieve more specifically? if you just want to show an avatar, using the avatar helper might be a better way to go… that would look like:

{{avatar user imageSize="large"}}

in this case you’d still need to ensure user is present, because this is how it knows which user to display

3

Hi @awesomerobot

Thank you for your response,

I intend on displaying the user avatar above the text of each post on the post page. However I have been unable to get the user data I need into to the “topic-above-post-stream” plugin outlet. Therefore after adding the code below in the common/head_tag.html file a trash icon is displayed on the “topic-above-post-stream” plugin outlet.

<script type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/custom-post-page">
    <div class="post-detail header">
      {{mount-widget widget="post-avatar" args=(hash username=this.username)}}
    </div>
</script>