Come aggiungere HTML personalizzato dopo "post_1" (parte 2)

[valsha (KingPin)]

Secondo questo post How to add customer HTML after "post_1"
ed esempio:

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

possiamo impostare l’immagine desiderata, ma come possiamo centrare correttamente questa immagine e fare in modo che venga ridimensionata anche per il design mobile?

Perché ora viene visualizzata così:

[Don]

Ciao,

Per fare questo è necessario utilizzare del CSS.

Nella vista Common (CSS) per mobile e desktop, imposta una larghezza del 100% sull’immagine.

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

---

Nella vista Desktop (CSS), aggiungi una larghezza massima all’id #custom-ad per impostare la larghezza del banner uguale a quella dell’avatar del topic + al corpo del topic. Questo corrisponderà alla larghezza del 100% dell’immagine, come abbiamo già aggiunto sopra nella sezione Common.

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

45px = Larghezza dell’avatar del topic
690px + (11px * 2) = Larghezza del corpo del topic e il padding di 11px a sinistra e a destra applicato alla classe .cooked.

Il risultato sarà simile a questo

Vista Desktop (completa)

---

Vista Desktop (responsive)

---

Vista Mobile

[valsha (KingPin)]

Tutto insieme sarà qualcosa del genere?

<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, devi aggiungere queste sezioni al CSS.

Quindi tutto sarà insieme.

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

Grazie, MOLTISSIMO!