Cómo agregar HTML de cliente después de "post_1" (parte 2)

[valsha (KingPin)]

De acuerdo con este post How to add customer HTML after "post_1"
y este ejemplo:

<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 establecer la imagen que necesitemos, pero ¿cómo centrar correctamente esta imagen y hacer que se escale para el diseño móvil?

porque ahora se muestra así

[Don]

Hola,

Para hacer esto, debes usar algo de CSS.

En la vista Móvil y Escritorio (CSS) común, añade un ancho del 100% a la imagen.

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

---

En la vista Escritorio (CSS), añade un ancho máximo al ID #custom-ad para que el ancho del banner sea igual al del avatar del tema más el cuerpo del tema. Esto equivaldrá al ancho del 100% de la imagen que acabamos de añadir en la configuración común.

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

45px = Ancho del avatar del tema
690px + (11px * 2) = Ancho del cuerpo del tema más el relleno de 11px a la izquierda y 11px a la derecha utilizado en la clase .cooked.

Se verá así

Vista de escritorio (completa)

---

Vista de escritorio (responsiva)

---

Vista móvil

[valsha (KingPin)]

¿Todo junto será algo así?

<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, debes agregar esto a las secciones de CSS.

Así que todo quedará junto.

Común / Encabezado

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

---

Común / CSS

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

---

Escritorio / CSS

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

[valsha (KingPin)]

¡Muchas gracias!