「post_1」の後にカスタムHTMLを追加する方法（パート2）

[valsha (KingPin)]

この投稿 How to add customer HTML after "post_1" と以下の例によると、

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

必要な画像を設定することはできますが、この画像を正しく中央揃えにし、モバイルデザインでも同じ画像が適切に拡大縮小されるようにするにはどうすればよいでしょうか？

現在、以下のように表示されてしまいます。

[Don]

こんにちは、

これを行うには、いくつかの CSS を使用する必要があります。

Common (CSS) のモバイルおよびデスクトップ表示で、画像に 100% の幅を追加してください。

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

---

デスクトップ (CSS) 表示では、#custom-ad ID に最大幅を追加して、バナー幅をトピックのアバター + トピック本文と同じに設定します。これは、上記で Common に追加した画像の 100% 幅になります。

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

45px = トピックアバターの幅
690px + (11px * 2) = トピック本文の幅と、.cooked クラスで使用されている左 11px と右 11px のパディング。

見た目は以下のようになります

デスクトップ表示（全体）

---

デスクトップ表示（レスポンシブ）

---

モバイル表示

[valsha (KingPin)]

全体として、このような形になりますか？

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

いいえ、これらは CSS セクションに追加する必要があります。

つまり、これらはすべてまとめられます。

共通 / ヘッダー

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

---

共通 / CSS

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

---

デスクトップ / CSS

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

[valsha (KingPin)]

どうも、ありがとうございます！:＋1: