Reddit-ish Theme Apply background image and blur

[Damian_Boon]

Hopfully this will help someone who uses the Reddit-ish theme, it adds a bg image to the topic card and applys a blur making the site feel cleaner.

Add this JS to your component

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();
});

Then add this CSS

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

/* Blurred copy of the post image */
.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;
}

/* Darkens the blurred background */
.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;
}

/* Keep the original image sharp and centred */
.custom-topic-layout_image > img {
    position: relative;
    z-index: 1;

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

    object-fit: contain;
}