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

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

1 Like

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)


Desktop view (responsive)

Screenshot 2021-09-05 at 13.20.50


Mobile view

Screenshot 2021-09-05 at 13.21.41

2 Likes

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

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>


Common / CSS :arrow_down:

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


Desktop / CSS :arrow_down:

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

2 Likes

Thank you, VERY MUCH! :+1:

2 Likes