Como adicionar HTML personalizado após "post_1" (parte 2)

[valsha (KingPin)]

De acordo com este post How to add customer HTML after "post_1"

e este exemplo:

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

Podemos definir a imagem que precisamos, mas como fazer corretamente para que essa imagem fique centralizada e seja dimensionada para o design mobile?

porque agora ela aparece assim

[Don]

Olá,

Você precisará usar um pouco de CSS para fazer isso.

Na visualização Comum (CSS) para Mobile e Desktop, adicione uma largura de 100% à imagem.

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

---

Na visualização Desktop (CSS), adicione uma largura máxima ao ID #custom-ad para definir a largura do banner igual à do avatar do tópico + corpo do tópico. Isso corresponderá à largura de 100% da imagem que adicionamos acima na configuração comum.

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

45px = Largura do avatar do tópico
690px + (11px * 2) = Largura do corpo do tópico e o preenchimento de 11px à esquerda e 11px à direita usados na classe .cooked.

Ficará assim

Visualização Desktop (total)

---

Visualização Desktop (responsiva)

---

Visualização Mobile

[valsha (KingPin)]

No total, será algo assim?

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

Não, você precisa adicionar isso às seções de CSS.

Então, tudo ficará junto.

Comum / Cabeçalho

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

---

Comum / CSS

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

---

Desktop / CSS

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

[valsha (KingPin)]

Muito, MUITO obrigado!