Imposta l'immagine in primo piano senza pubblicarla nell'argomento

Supporto
21

Penso che di solito il nome venga aggiunto nell’attributo alt. Quando carico un file, il nome viene solitamente aggiunto davanti alla dimensione in markdown, ed è quella la parte utilizzata da “alt”.

22

Dato che non sono un esperto di CSS, ho chiesto a ChatGPT la tua opzione e ho ottenuto questo, dato che voglio nascondere le immagini che iniziano con hide-this-image-, ma poi hanno qualcos’altro. Ho ricevuto questa risposta:

No, il CSS puro non supporta selettori jolly o “inizia con” per gli attributi alt delle immagini.

I selettori di attributi CSS supportano solo:

  • Corrispondenza esatta: [alt=\"valore\"]
  • Contiene parola: [alt~=\"valore\"]
  • Contiene sottostringa: [alt*=\"valore\"]
  • Inizia con: [alt^=\"valore\"]
  • Finisce con: [alt$=\"valore\"]

Tuttavia, alt^=\"hide-this-image-\" non funzionerà in modo affidabile nel tuo esempio perché il CSS non può corrispondere all’attributo alt di <img> in tutti i browser quando l’immagine viene renderizzata, specialmente in sistemi come Discourse in cui l’attributo alt non è necessariamente riflesso nel DOM in un modo a cui il CSS possa accedere.

Soluzione alternativa con CSS (funziona solo in alcuni ambienti):

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

Ma ancora una volta, questo potrebbe non funzionare in modo coerente in Discourse a causa di come vengono renderizzate le immagini (ad esempio, tramite markdown o JS). In tal caso, avresti bisogno di JavaScript.

Alternativa affidabile con JavaScript:

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

Questo funzionerà in modo affidabile in tutti gli ambienti, incluso Discourse.

23

La soluzione di ChatGPT sembra funzionare:

image
image1114×546 58.3 KB

E Facebook Debugger la vede come immagine in primo piano:

image
image741×377 50.1 KB

Componente con il 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";
        }
      });
  });
});

Ho notato che manteneva dello spazio dove l’immagine doveva essere, quindi ho chiesto di nuovo a ChatGPT e ha aggiunto che era necessario nascondere il contenitore padre, che in questo caso è il tag <div>.

Ora funziona benissimo!

24

Grazie per questo. Aggiunto alle mie note.

25

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