Reddit風テーマ：背景画像とぼかしを適用

[Damian_Boon]

Reddit風テーマを使用している方のお役に立てば幸いです。トピックカードに背景画像を追加し、ぼかし効果を加えることで、サイト全体がすっきりした印象になります。

このJSをコンポーネントに追加してください。

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  function applyImageBackgrounds() {
    document
      .querySelectorAll(".custom-topic-layout_image")
      .forEach((wrapper) => {
        const image = wrapper.querySelector("img");

        if (!image) {
          return;
        }

        const imageUrl =
          image.currentSrc ||
          image.getAttribute("src");

        if (!imageUrl) {
          return;
        }

        wrapper.style.setProperty(
          "--post-image-background",
          `url("${imageUrl}")`
        );

        wrapper.classList.add("has-post-image-background");
      });
  }

  api.onPageChange(() => {
    requestAnimationFrame(applyImageBackgrounds);
    setTimeout(applyImageBackgrounds, 250);
    setTimeout(applyImageBackgrounds, 1000);
  });

  const observer = new MutationObserver(() => {
    applyImageBackgrounds();
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  applyImageBackgrounds();
});

次に、このCSSを追加してください。

.custom-topic-layout_image {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #111;
}

/* ポスト画像のぼかしコピー */
.custom-topic-layout_image.has-post-image-background::before {
    content: "";
    position: absolute;
    inset: -30px;
    z-index: -2;

    background-image: var(--post-image-background);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    filter: blur(25px);
    transform: scale(1.18);
    opacity: 0.9;

    pointer-events: none;
}

/* ぼかした背景を暗くする */
.custom-topic-layout_image.has-post-image-background::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* 元の画像を鮮明で中央揃えに保つ */
.custom-topic-layout_image > img {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
}