How to add customer HTML after “post_1” (part2)

[valsha (KingPin)]

According to this post How to add customer HTML after "post_1"
and this example:

<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

[Don]

Hello,

You have to use some CSS to do this.

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

#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.

#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)

---

Desktop view (responsive)

---

Mobile view

[valsha (KingPin)]

All together it will be something like this?

<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));
}

[Don]

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

So this will be all together.

Common / Header

<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>

---

Common / CSS

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

---

Desktop / CSS

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

[valsha (KingPin)]

Thank you, VERY MUCH!