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

Support

AI-generated summary

The discussion is about adding custom HTML after the first post in a Discourse forum. valsha shared a script to add an image after the first post, but was unsure how to center and scale it for mobile design. Don provided a solution using CSS, suggesting to add a 100% width to the image for both mobile and desktop views, and a maximum width to #custom-ad for desktop view. valsha attempted to combine the code, but Don clarified that the CSS should be added to separate sections (Common CSS and Desktop CSS). The correct implementation involves adding the script to the Common Header and the CSS to the respective sections.

1

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

image
image1280×1132 52.9 KB

2

Hello,

You have to use some CSS to do this. :slightly_smiling_face:

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

Desktop view (full)

Screenshot 2021-09-05 at 13.20.26
Screenshot 2021-09-05 at 13.20.26865×396 52.9 KB

Desktop view (responsive)

Screenshot 2021-09-05 at 13.20.50
Screenshot 2021-09-05 at 13.20.50690×405 106 KB

Mobile view

Screenshot 2021-09-05 at 13.21.41
Screenshot 2021-09-05 at 13.21.41499×351 64.2 KB

3

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

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

So this will be all together.

Common / Header :arrow_down:

<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
Screenshot 2021-09-05 at 19.41.25994×494 48.4 KB

Common / CSS :arrow_down:

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

Screenshot 2021-09-05 at 19.33.16
Screenshot 2021-09-05 at 19.33.161073×553 24.4 KB

Desktop / CSS :arrow_down:

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

Screenshot 2021-09-05 at 19.33.34
Screenshot 2021-09-05 at 19.33.34914×389 20.2 KB

5

Thank you, VERY MUCH! :+1: