Establecer imagen destacada sin publicarla en el tema

Soporte
21

Creo que normalmente el nombre se añade en el atributo alt. Cuando subo un archivo, el nombre se suele añadir delante del tamaño en markdown, y esa es la parte que utiliza “alt”.

22

Dado que no soy un experto en CSS, le pregunté a ChatGPT sobre tu opción y obtuve esto, ya que quiero ocultar imágenes que comiencen con hide-this-image-, pero que luego tengan algo más. Obtuve esta respuesta:

No, CSS puro no admite selectores comodín o de “comienzo con” para atributos alt en imágenes.

Los selectores de atributos de CSS solo admiten:

  • Coincidencia exacta: [alt=\"valor\"]
  • Contiene palabra: [alt~=\"valor\"]
  • Contiene subcadena: [alt*=\"valor\"]
  • Comienza con: [alt^=\"valor\"]
  • Termina con: [alt$=\"valor\"]

Sin embargo, alt^=\"hide-this-image-\" no funcionará de manera confiable en tu ejemplo porque CSS no puede coincidir con el atributo alt de <img> en todos los navegadores cuando la imagen se renderiza, especialmente en sistemas como Discourse donde el atributo alt no se refleja necesariamente en el DOM de una manera que CSS pueda acceder.

Solución alternativa con CSS (solo funciona en algunos entornos):

.cooked img[alt^="hide-this-image-"] {
  display: none;
}

Pero de nuevo, esto puede no funcionar de manera consistente en Discourse debido a cómo se renderizan las imágenes (por ejemplo, a través de markdown o JS). En ese caso, necesitarías JavaScript.

Alternativa confiable con JavaScript:

document.querySelectorAll('.cooked img[alt^="hide-this-image-"]').forEach(img => {
  img.style.display = 'none';
});

Esto funcionará de manera confiable en todos los entornos, incluido Discourse.

23

La solución de ChatGPT parece funcionar:

image
image1114×546 58.3 KB

Y el Depurador de Facebook lo ve como la imagen destacada:

image
image741×377 50.1 KB

Componente con el Javascript:

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

export default apiInitializer((api) => {
  api.onPageChange(() => {
    document
      .querySelectorAll('.cooked img[alt^="featured-image-"]')
      .forEach((img) => {
        const parent = img.closest("div");
        if (parent) {
          parent.style.display = "none";
        } else {
          img.style.display = "none";
        }
      });
  });
});

Me di cuenta de que mantenía algo de espacio donde se suponía que debía estar la imagen, así que le pregunté a ChatGPT nuevamente y agregó que necesitaba ocultar el contenedor principal, que en este caso es la etiqueta <div>.

¡Ahora funciona muy bien!

24

Gracias por eso. Añadido a mis notas.

25

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.