“post_1” 뒤에 고객 HTML 추가하는 방법 (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%;
    }
  }
}

---

데스크톱 뷰(CSS)에서 #custom-ad ID에 최대 너비를 추가하여 배너 너비를 토픽 아바타 + 토픽 본문과 동일하게 설정하세요. 이는 위에서 공통에 추가한 이미지 100% 너비가 됩니다.

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

45px = 토픽 아바타 너비
690px + (11px * 2) = .cooked 클래스에 사용되는 토픽 본문 너비 및 왼쪽 11px, 오른쪽 11px 패딩입니다.

아래와 같은 모습으로 표시됩니다.

데스크톱 뷰 (전체)

---

데스크톱 뷰 (반응형)

---

모바일 뷰

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

정말 많이 감사합니다!