Beitragsbild festlegen, ohne es im Thema zu posten

Unterstützung
21

Ich denke, normalerweise wird der Name im Alt-Attribut hinzugefügt. Wenn ich eine Datei hochlade, wird der Name normalerweise vor der Größe im Markdown hinzugefügt, und das ist der Teil, der von „alt“ verwendet wird.

22

Da ich kein CSS-Experte bin, habe ich ChatGPT nach Ihrer Option gefragt und diese Antwort erhalten. Ich möchte Bilder ausblenden, die mit hide-this-image- beginnen, aber dann etwas anderes haben. Ich habe diese Antwort erhalten:

Nein, reines CSS unterstützt keine Platzhalter- oder „beginnt mit“-Selektoren für alt-Attribute bei Bildern.

CSS-Attributselektoren unterstützen nur:

  • Exakte Übereinstimmung: [alt=\"value\"]
  • Enthält Wort: [alt~=\"value\"]
  • Enthält Teilzeichenfolge: [alt*=\"value\"]
  • Beginnt mit: [alt^=\"value\"]
  • Endet mit: [alt$=\"value\"]

alt^=\"hide-this-image-\" funktioniert jedoch in Ihrem Beispiel nicht zuverlässig, da CSS das alt-Attribut von <img> in allen Browsern nicht immer abgleichen kann, wenn das Bild gerendert wird, insbesondere in Systemen wie Discourse, in denen das alt-Attribut nicht unbedingt in einer Weise im DOM reflektiert wird, auf die CSS zugreifen kann.

Workaround mit CSS (funktioniert nur in einigen Umgebungen):

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

Aber auch hier funktioniert dies in Discourse möglicherweise nicht konsistent, da Bilder gerendert werden (z. B. über Markdown oder JS). In diesem Fall benötigen Sie JavaScript.

Zuverlässige JavaScript-Alternative:

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

Dies funktioniert in allen Umgebungen, einschließlich Discourse, zuverlässig.

23

Die Lösung von ChatGPT scheint zu funktionieren:

image
image1114×546 58.3 KB

Und der Facebook Debugger sieht es als das hervorgehobene Bild:

image
image741×377 50.1 KB

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

Mir fiel auf, dass etwas Platz dort blieb, wo das Bild sein sollte. Also fragte ich ChatGPT erneut und es fügte hinzu, dass der übergeordnete Container, in diesem Fall das <div>-Tag, ausgeblendet werden müsse.

Es funktioniert jetzt großartig!

24

Danke dafür. Zu meinen Notizen hinzugefügt.

25

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