I’d like to add a customer banner (for affiliate purposes) inside of my Posts. Specifically, I’d like to add this block of (example) HTML right after Therefore, looking something like this: [bannerexample] I’ve had limited success with CSS :after. And so was wondering if this is something that could be done from inside the using a like this example. EDIT: Having played around with it a little more, it seems cleaner to insert the banner at the end of instead.: ... CUSTOM HTML HERE

Posts are widgets which means what you’re trying to do will involve a bit more work that just adding html. Discourse themes have the ability to decorate widgets so you can leverage on that. Decorating a widget is explained in the link above so let’s focus on what you’re trying to do - add markup after the first post in every topic. Start by adding the markup to all posts. So something like this api.decorateWidget("post:after", helper => { return helper.h("div", "test text"); }); to the header section of your theme. That should be enough to add “test text” below every post. [widget001] Let’s breakdown the script above api.decorateWidget("post:after", helper => { calls the decorateWidget method, the target widget being post and the target location being after. So after a post widget. helper is a built in helper that gives you access to a bunch of stuff that I will explain later return helper.h("div", "test text") This is the desired additional markup you want to add. You might notice that there’s no html in there and that’s because discourse widgets emit virtual nodes and not raw html. Explaining what virtual nodes are or how the syntax works is outside of the scope for this topic, so I’ll skip that. I’ve added a note to write a howto for authoring virtual nodes but here are a couple of example for now helper.h("div", "test text") renders test text and return helper.h("div#custom-ad", [ helper.h( "a.custom-ad-link", { href: "example.com" }, helper.h("img", { src: "https://picsum.photos/id/74/750/90" }) ) ]); will render In a nutshell, a node looks like this helper.h(selector, {properties}, children) I’ll explain this more in the virtual node howto. So, now you have the nodes ready, you would just need to add the whole script to the header section of your theme, so something like this api.decorateWidget("post:after", helper => { return helper.h("div#custom-ad", [ helper.h( "a.custom-ad-link", { href: "example.com" }, helper.h("img", { src: "https://picsum.photos/id/74/750/90" }) ) ]); }); However, there’s still a problem here, the ad will be inserted below every post in the stream, which is not ideal. [widget002] This is where the helper comes in handy, the post attributes are passed to the helper, so you can do a quick console.log(helper) You’ll be able to see all the post attributes available for you to work with. [widget003] those are just examples, there’s more in there. Luckily, the firstPost attribute is available for us here, so all you have left is to feed that into a conditional that will only render the ad markup if it’s indeed the first post, otherwise nothing happens. So something like this: api.decorateWidget("post:after", helper => { const firstPost = helper.attrs.firstPost; const h = helper.h; if (firstPost) { return h("div#custom-ad", [ h( "a.custom-ad-link", { href: "example.com" }, h("img", { src: "https://picsum.photos/id/74/750/90" }) ) ]); } }); and that will insert your ad only after the first post. One additional thing to do here is to add a height to the image, otherwise it will cause jitter as it loads. So like I briefly touched on above, the height attribute for the image tag is a property, so you’re need to add it next to the src With all of that put together, here’s the final code for what you’re trying to achieve api.decorateWidget("post:after", helper => { const firstPost = helper.attrs.firstPost; const h = helper.h; if (firstPost) { return h("div#custom-ad", [ h( "a.custom-ad-link", { href: "example.com" }, h("img", { src: "https://picsum.photos/id/74/750/90", height: "90" }) ) ]); } }); One last note I want to highlight is that you can actually use raw html if virtual nodes prove to be to tricky, but it’s not recommended and it’s much better to use virtual nodes. So the same script with raw html would like like this const RawHtml = require("discourse/widgets/raw-html").default; api.decorateWidget("post:after", helper => { const firstPost = helper.attrs.firstPost; if (firstPost) { return [ new RawHtml({ html: ` ` }) ]; } }); but again, this is not recommended.

I liked this post, but I just want to add: This is a fanatic explanation. I really appreciate posts like this.

That’s because @johani is :fire: :hot_pepper: :muscle:

How to add customer HTML after "post_1"

Product Support

DigitalStartup (Craig) July 16, 2019, 2:15pm 3

I always appreciate the solutions that explain how to get from A-Z rather than just an answer. Thank you.

Topic		Replies	Views
How to add content (html) below posts? Development	4	289	November 5, 2024
Add Banner/HTML (Widget) before reply button Development	4	819	January 19, 2024
How to insert ads after topic content? Product Support advertising	3	2690	June 8, 2023
Assistance automatically inserting a banner after every initial post within a forum topic Marketplace	4	1298	October 17, 2018
Request: House Ads Plugin Feature	11	3588	October 26, 2018

How to add customer HTML after "post_1"

Related topics