Tema estilo Reddit: aplicar imagen de fondo y desenfoque

[Damian_Boon]

Espero que esto ayude a alguien que use el tema estilo Reddit; añade una imagen de fondo a la tarjeta del tema y aplica un desenfoque, lo que hace que el sitio se vea más limpio.

Añade este JS a tu componente

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

Luego añade este CSS

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

/* Copia desenfocada de la imagen del mensaje */
.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;
}

/* Oscurece el fondo desenfocado */
.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;
}

/* Mantiene la imagen original nítida y centrada */
.custom-topic-layout_image > img {
    position: relative;
    z-index: 1;

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

    object-fit: contain;
}