# How to add customer HTML after “post\_1” (part2)

**URL:** https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619
**Category:** Support
**Created:** [September 4, 2021, 3:30pm UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619 "2021-09-04T15:30:09Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![valsha](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/valsha/32/230631_2.png) [@valsha](https://meta.discourse.org/u/valsha)
#### Post date: [September 4, 2021, 3:30pm UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619/1 "2021-09-04T15:30:09Z")

</div>

According to this post [How to add customer HTML after "post\_1"](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1/123068)  
and this example:

```plaintext
<script type="text/discourse-plugin" version="0.8">
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" })
      )
    ]);
  }
});
</script>

```

We can set the picture we need, but how to correctly make this picture centered and so that the same picture would be scaled for mobile design?

because now it shows it like that

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/4/5454b4695b0278457ea30d0510c1f6eb9dcb179e.jpeg)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [September 5, 2021, 11:25am UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619/2 "2021-09-05T11:25:47Z")

</div>

Hello,

You have to use some CSS to do this. 🙂

On Common (CSS) Mobile and Desktop view add a 100% width to the image.

```plaintext
#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}

```

* * *

On Desktop (CSS) view add a maximum width to` #custom-ad` id to set the banner width same as topic avatar + topic body. Which is going to be the image 100% width, what we add above to the common.

```plaintext
#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

```

45px = Topic avatar width  
690px + (11px \* 2) = Topic body width and the left 11px and right 11px padding used on `.cooked` class.

It will looks like ⬇

**Desktop view (full)**

 ![Screenshot 2021-09-05 at 13.20.26](https://global.discourse-cdn.com/meta/original/3X/9/c/9c4af603b16bfe3d2598690afbd2415ac595d406.jpeg)

* * *

**Desktop view (responsive)**

 ![Screenshot 2021-09-05 at 13.20.50](https://global.discourse-cdn.com/meta/original/3X/9/5/952d7c59294d3d001e87e1450f9f0b2207cb1e0a.png)

* * *

**Mobile view**

 ![Screenshot 2021-09-05 at 13.21.41](https://global.discourse-cdn.com/meta/original/3X/4/1/417aca3f0c300b0f72db6078ebf21645de940c93.png)

---

<div class="post-metadata">

### Author: ![valsha](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/valsha/32/230631_2.png) [@valsha](https://meta.discourse.org/u/valsha)
#### Post date: [September 5, 2021, 5:20pm UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619/3 "2021-09-05T17:20:18Z")

</div>

All together it will be something like this?

```plaintext
<script type="text/discourse-plugin" version="0.8">
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" })
      )
    ]);
  }
});
</script>
#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}
#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

```

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [September 5, 2021, 5:35pm UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619/4 "2021-09-05T17:35:32Z")

</div>

No, you have to add these to the css sections.

**So this will be all together.**

Common / Header ⬇

```plaintext
<script type="text/discourse-plugin" version="0.8">
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" })
      )
    ]);
  }
});
</script>

```

 ![Screenshot 2021-09-05 at 19.41.25](https://global.discourse-cdn.com/meta/original/3X/e/e/ee4d4815f0747a0356d166544805bccdc8215e5e.png)

* * *

Common / CSS ⬇

```plaintext
#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}

```

 ![Screenshot 2021-09-05 at 19.33.16](https://global.discourse-cdn.com/meta/original/3X/e/3/e3e7ebd180c606eedfd79145f56b8a78cce88053.png)

* * *

Desktop / CSS ⬇

```plaintext
#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

```

 ![Screenshot 2021-09-05 at 19.33.34](https://global.discourse-cdn.com/meta/original/3X/d/d/dd2dc2fe7a9a1a45d76d28df5a17a28de54f5b94.png)

---

<div class="post-metadata">

### Author: ![valsha](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/valsha/32/230631_2.png) [@valsha](https://meta.discourse.org/u/valsha)
#### Post date: [September 5, 2021, 8:36pm UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619/5 "2021-09-05T20:36:58Z")

</div>

Thank you, VERY MUCH! 👍

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [October 5, 2021, 8:37pm UTC](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1-part2/202619/6 "2021-10-05T20:37:23Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.