トピックに投稿せずに、注目の画像を設定する

[Moin]

通常、名前はalt属性に追加されると思います。ファイルをアップロードすると、名前がマークダウンのサイズの前に追加され、それが「alt」で使用される部分です。

[alltiagocom (Tiago)]

CSSの専門家ではないため、ChatGPTにオプションについて尋ねたところ、次のような回答を得ました。hide-this-image- で始まる画像に何か別のものが続く場合に、その画像を非表示にしたいのです。以下はその回答です。

いいえ、純粋なCSSでは、画像の alt 属性に対するワイルドカードや「前方一致」セレクターはサポートされていません。

CSS属性セレクターがサポートしているのは以下のものだけです。

• 完全一致: [alt="value"]
• 単語を含む: [alt~="value"]
• 部分文字列を含む: [alt*="value"]
• 前方一致: [alt^="value"]
• 後方一致: [alt$="value"]

ただし、alt^="hide-this-image-" は、特にDiscourseのようなシステムで、CSSがアクセスできる方法で alt 属性がDOMに必ずしも反映されない場合など、画像がレンダリングされる際にCSSがすべてのブラウザで <img> の alt 属性に一致しないため、ご提示の例では確実に機能しません。

CSSによる回避策（一部の環境でのみ機能します）:

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

しかし、繰り返しますが、これは画像がレンダリングされる方法（例: MarkdownやJS経由）のため、Discourseでは一貫して機能しない可能性があります。その場合は、JavaScriptが必要になります。

JavaScriptによる確実な代替案:

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

これにより、Discourseを含むすべての環境で確実に機能します。

[alltiagocom (Tiago)]

ChatGPT のソリューションは機能するようです。

Facebook デバッガーもこれをフィーチャー画像として認識しています。

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

画像が表示されるべき場所にスペースが残っていることに気づいたので、もう一度 ChatGPT に尋ねたところ、この場合は <div> タグである親コンテナを非表示にする必要があると付け加えられました。

これでうまく動作しています！

[alltiagocom (Tiago)]

ありがとうございます。メモに追加しました。