Definir imagem destacada sem postá-la no tópico

Suporte
21

Eu acho que geralmente o nome é adicionado no atributo alt. Quando eu faço upload de um arquivo, o nome é geralmente adicionado na frente do tamanho em markdown, e essa é a parte usada pelo “alt”.

22

Como não sou especialista em CSS, perguntei ao ChatGPT sobre sua opção e obtive esta resposta, pois quero ocultar imagens que começam com hide-this-image-, mas depois têm outra coisa. Obtive esta resposta:

Não, o CSS puro não suporta seletores de curinga ou “começa com” para atributos alt em imagens.

Os seletores de atributos CSS suportam apenas:

  • Correspondência exata: [alt=\"valor\"]
  • Contém palavra: [alt~=\"valor\"]
  • Contém substring: [alt*=\"valor\"]
  • Começa com: [alt^=\"valor\"]
  • Termina com: [alt$=\"valor\"]

No entanto, alt^=\"hide-this-image-\" não funcionará de forma confiável em seu exemplo porque o CSS não consegue corresponder ao atributo alt de <img> em todos os navegadores quando a imagem é renderizada, especialmente em sistemas como o Discourse, onde o atributo alt não é necessariamente refletido no DOM de uma forma que o CSS possa acessar.

Solução alternativa com CSS (funciona apenas em alguns ambientes):

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

Mas, novamente, isso pode não funcionar de forma consistente no Discourse devido à forma como as imagens são renderizadas (por exemplo, por meio de markdown ou JS). Nesse caso, você precisaria de JavaScript.

Alternativa confiável com JavaScript:

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

Isso funcionará de forma confiável em todos os ambientes, incluindo o Discourse.

23

A solução do ChatGPT parece funcionar:

image
image1114×546 58.3 KB

E o Depurador do Facebook o vê como a imagem em destaque:

image
image741×377 50.1 KB

Componente com o 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";
        }
      });
  });
});

Notei que ele estava mantendo algum espaço onde a imagem deveria estar, então perguntei novamente ao ChatGPT e ele acrescentou que era necessário ocultar o contêiner pai, que neste caso é a tag <div>.

Está funcionando muito bem agora!

24

Obrigado por isso. Adicionado às minhas notas.

25

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