Как добавить пользовательский HTML после «post_1» (часть 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%;
    }
  }
}

---

В представлении Desktop (CSS) добавьте максимальную ширину для идентификатора #custom-ad, чтобы установить ширину баннера равной ширине аватара темы + тела темы. Это будет ширина изображения 100%, которую мы добавили выше для Common.

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

45px = ширина аватара темы
690px + (11px * 2) = ширина тела темы и отступы слева и справа по 11px, применяемые к классу .cooked.

Это будет выглядеть так

Представление Desktop (полное)

---

Представление Desktop (адаптивное)

---

Представление Mobile

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

Итак, всё будет вместе.

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

Спасибо большое!