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: [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: 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 } ); 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?

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. :slightly_smiling_face: I did not extensively test all edge cases. It’s a starting point. Expected wrap format: [wrap=character avatar=" " 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 :slight_smile: Head 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 [^"]+)"\s+data-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; } }); 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:

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?

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 :smile: if you’re talking about changes appearing in the search result, the answer is no (nor will the HTML appear).

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

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

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.

Replacing avatar & username for a specific post

Development

Arkshine August 28, 2024, 12:07pm 8

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

Topic		Replies	Views
Adding text below avatar or next to username UX	4	2785	March 29, 2016
Avatars by posts in Category with Featured Topics Product Support	2	1345	November 11, 2018
Trying to replace / auto-format strings in user posts Development	3	596	November 13, 2023
Cannot mount the "post-avatar" on the "topic-above-post-stream" plugin outlet Development	2	457	June 26, 2023
Updated Custom Header Icon: Post Data via URL Development plugin-api	5	362	February 12, 2025

Replacing avatar & username for a specific post

Related topics