# החלפת תמונת פרופיל ושם משתמש לפוסט ספציפי

**URL:** https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389
**Category:** Development
**Created:** [30 בינואר,‏ 2023,‏ 8:47pm UTC](https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389 "2023-01-30T20:47:28Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![unfairest](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/unfairest/32/288433_2.png) [@unfairest](https://meta.discourse.org/u/unfairest)
#### Post date: [30 בינואר,‏ 2023,‏ 8:47pm UTC](https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389/1 "2023-01-30T20:47:28Z")

</div>

The problem: I want users to be able to post as RPG characters. I would like for them to be able to insert a template into a post - something like the below:

```plaintext
[wrap="characterpost"]
[characterav]https://image.link.example.png[/characterav]
[charactername][[Character Name]][/charactername]
[/wrap]

```

And then use a script so that the image replaces the original avatar and the charactername topic link goes in front of the username. For example, if the post usually says “Username,” I want to replace that with “Character Name played by Username”.  
(“Character Name” would include a link to a topic with the character’s sheet, hopefully just using the wikilinks theme component for ease of use.)

I pasted a post skeleton into a Codepen and I was able to write some javascript that would do exactly this. However, when it came to adding it into a post decorator and getting it working live with the API, I ran into a wall.

Here’s what I have in common\>header right now:

```js
<script type="text/discourse-plugin" version="0.8">
api.decorateCookedElement(
  element => {
    
    // find the characterpost tag within the post
    const characterPost = element.querySelector('[data-wrap="characterpost"]');
	
    // find the parent of the characterpost tag, which contains avatar and username
    const characterPostParent = characterPost.closest('article');
	
    // turn it red to see if it's working
    characterPostParent.style.backgroundColor = "red";
    
  },
  {
    id: 'render-character-post', onlyStream: true, afterAdopt: true
  }
);
</script>

```

This has been throwing an error. Is it possible to access the “article” wrapper for posts using decorateCookedElement so that I can get to the username and avatar? If not, how can I go about this?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [24 במרץ,‏ 2023,‏ 12:27am UTC](https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389/2 "2023-03-24T00:27:40Z")

</div>

Hi, unfairest,

I stumbled on this post, and I thought I could give it a try!

Here is the first version; hoping the code is not too horrible. 🙂  
I did not extensively test all edge cases. It’s a starting point.

- Expected wrap format: `[wrap=character avatar="<URL>" name="<Name>"][/wrap]`
- Make sure there is an empty line below `[wrap]`
- You can customize the character name with CSS (see `character` and `character-extra` classes)

Let me know if you have any issues 🙂

> **Head**
>
> ```js
> <script type="text/discourse-plugin" version="0.8.13">
> 
> let characters = new Map();
> 
> function searchTag(obj, tag) {
> if (!obj || !obj.firstObject) return;
>   
> const firstObj = obj.firstObject;
> return firstObj.tagName === tag ? firstObj : searchTag(firstObj.children, tag);
> }
>             
> api.addPostTransformCallback(post => 
> {
> if (post.post_number <= 1 || post.post_type !== 1) {
> return;
> }
> 
> const matches = post.cooked.match(/data-wrap="character"\s+data-avatar="(?<avatar>[^"]+)"\s+data-name="(?<name>[^"]+)"/i);
>     
> if (!matches) {
> characters.delete(post.id);
> return;
> }
>     
> // TODO: sanity check for avatar/name
>     
> const {name, avatar} = matches.groups;
>     
> characters.set(post.id, {name, avatar});
>     
> });
> 
> api.reopenWidget("post-avatar", {
> html(attrs) {
> const html = this._super(attrs);
>         
> if (attrs.id && characters.has(attrs.id)) {
> const imageHtml = searchTag(html, 'IMG');
>     
> if (imageHtml) {
> imageHtml.properties.attributes.src = characters.get(attrs.id).avatar;
> }
> }
>         
> return html;
> }
> });
> 
> api.reopenWidget("poster-name", {
> html(attrs) {
> let html = this._super(attrs);
>         
> if (attrs.id && characters.has(attrs.id)) {
> const h = require("virtual-dom").h;
>             
> html = [
> h('span.character', this.userLink(attrs, characters.get(attrs.id).name)),
> h('span.character-extra', 'played by'), // optional
> ...html
> ];
> }
>         
> return html;
> }
> });
> 
> </script>
> 
> ```

> **CSS**
>
> ```css
> .names {
> .character a {
> font-weight: bold;
> color: var(--tertiary-high);
> }
>     
> .character-extra {
>         
> }
> }
> 
> .cooked, .d-editor-preview {
> p:has(> [data-wrap="character"]) {
> display: none;
> }
>     
> p:has(> [data-wrap="character"]) + * {
> margin-top: 0;
> }
> }
> 
> ```

Here is a small demo of how it looked:

---

<div class="post-metadata">

### Author: ![asc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/asc/32/288324_2.png) [@asc](https://meta.discourse.org/u/asc)
#### Post date: [24 במרץ,‏ 2023,‏ 4:15pm UTC](https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389/3 "2023-03-24T16:15:05Z")

</div>

This is very cool, thank you for sharing! I was looking for something similar as well. Do you know if this affects how posts appear in search as well?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [24 במרץ,‏ 2023,‏ 8:02pm UTC](https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389/4 "2023-03-24T20:02:25Z")

</div>

Good question! The tag name and its content is part of the post content; this might affect the search result.  
I will try something cleaner, like using a modal and saving in custom fields instead.

EDIT: I think I’ve misunderstood 😄 if you’re talking about changes appearing in the search result, the answer is no (nor will the HTML appear).

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [27 באוגוסט,‏ 2024,‏ 3:32am UTC](https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389/5 "2024-08-27T03:32:54Z")

</div>

This is pretty cool. You vid scrolls fast. Is the url on the forum site?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [27 באוגוסט,‏ 2024,‏ 2:22pm UTC](https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389/6 "2024-08-27T14:22:04Z")

</div>

Hey, Dan. What do you mean?

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [28 באוגוסט,‏ 2024,‏ 11:57am UTC](https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389/7 "2024-08-28T11:57:26Z")

</div>

The avatar url. Is that just an uploaded image or pointing to an external site?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [28 באוגוסט,‏ 2024,‏ 12:07pm UTC](https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389/8 "2024-08-28T12:07:03Z")

</div>

This is an external URL. It should be possible to work with a local URL.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [28 באוגוסט,‏ 2024,‏ 12:17pm UTC](https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389/9 "2024-08-28T12:17:54Z")

</div>

Cool thanks

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [29 באוגוסט,‏ 2024,‏ 11:34pm UTC](https://meta.discourse.org/t/replacing-avatar-username-for-a-specific-post/253389/10 "2024-08-29T23:34:50Z")

</div>

Thinking might be an idea to propose maybe in the community wiki to have a forum template guide. As often folks come looking for ideas on different type of forum setups

In this case might be a bit niche. But a tabletop RPG template that includes this Feature you created.