Définir l'image mise en avant sans la publier dans le sujet

Soutien
21

Je pense que le nom est généralement ajouté dans l’attribut alt. Lorsque je télécharge un fichier, le nom est généralement ajouté devant la taille en markdown, et c’est la partie utilisée par “alt”.

22

Étant donné que je ne suis pas un expert en CSS, j’ai demandé à ChatGPT votre option et j’ai obtenu ceci, car je veux masquer les images qui commencent par hide-this-image-, mais qui ont ensuite autre chose. J’ai obtenu cette réponse :

Non, le CSS pur ne prend pas en charge les sélecteurs génériques ou « commence par » pour les attributs alt des images.

Les sélecteurs d’attributs CSS ne prennent en charge que :

  • Correspondance exacte : [alt=\"valeur\"]
  • Contient un mot : [alt~=\"valeur\"]
  • Contient une sous-chaîne : [alt*=\"valeur\"]
  • Commence par : [alt^=\"valeur\"]
  • Se termine par : [alt$=\"valeur\"]

Cependant, alt^=\"hide-this-image-\" ne fonctionnera pas de manière fiable dans votre exemple car le CSS ne peut pas faire correspondre l’attribut alt de <img> dans tous les navigateurs lorsque l’image est rendue, en particulier dans les systèmes comme Discourse où l’attribut alt n’est pas nécessairement reflété dans le DOM d’une manière que le CSS peut accéder.

Solution de contournement avec CSS (ne fonctionne que dans certains environnements) :

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

Mais encore une fois, cela pourrait ne pas fonctionner de manière cohérente dans Discourse en raison de la façon dont les images sont rendues (par exemple, via markdown ou JS). Dans ce cas, vous auriez besoin de JavaScript.

Alternative fiable avec JavaScript :

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

Cela fonctionnera de manière fiable dans tous les environnements, y compris Discourse.

23

La solution de ChatGPT semble fonctionner :

image
image1114×546 58.3 KB

Et le débogueur de Facebook la considère comme l’image mise en avant :

image
image741×377 50.1 KB

Composant avec le 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";
        }
      });
  });
});

J’ai remarqué qu’il laissait un espace là où l’image était censée être, j’ai donc demandé à nouveau à ChatGPT et il a ajouté qu’il fallait masquer le conteneur parent, ce qui dans ce cas est la balise <div>.

Cela fonctionne très bien maintenant !

24

Merci pour cela. Ajouté à mes notes.

25

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