Wie fügt man benutzerdefiniertes HTML nach „post_1“ ein (Teil 2)

[valsha (KingPin)]

Laut diesem Beitrag How to add customer HTML after "post_1"
und diesem Beispiel:

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

können wir das gewünschte Bild festlegen. Wie stellen wir jedoch korrekt sicher, dass das Bild zentriert ist und auf mobilen Geräten skaliert wird?

Derzeit wird es so angezeigt:

[Don]

Hallo,

Du musst dafür etwas CSS verwenden.

Füge im Common (CSS)-Ansicht für Mobile und Desktop eine Breite von 100 % für das Bild hinzu.

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

---

Füge in der Desktop-(CSS)-Ansicht eine maximale Breite für die ID #custom-ad hinzu, um die Bannerbreite gleich der Topic-Avatar- plus Topic-Body-Breite zu setzen. Das entspricht der 100 %-Breite des Bildes, die wir oben im Common-Bereich hinzugefügt haben.

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

45px = Breite des Topic-Avatars
690px + (11px * 2) = Breite des Topic-Body sowie die linke und rechte 11px-Padding, die auf der Klasse .cooked verwendet werden.

Es wird so aussehen:

Desktop-Ansicht (vollständig)

---

Desktop-Ansicht (responsiv)

---

Mobile-Ansicht

[valsha (KingPin)]

Alles zusammen wird dann ungefähr so aussehen?

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

Nein, du musst diese in die CSS-Bereiche einfügen.

Das Ganze sieht also so aus.

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

Vielen, vielen Dank!