Stel de uitgelichte afbeelding in zonder deze in het onderwerp te plaatsen

Ondersteuning
21

Ik denk dat de naam meestal wordt toegevoegd in het alt-attribuut. Wanneer ik een bestand upload, wordt de naam meestal vóór de grootte in markdown toegevoegd, en dat is het deel dat door “alt” wordt gebruikt.

Dus hide-this-image-vacations-2025.jpg zou ![hide-this-image-vacations-2025|500x500](upload://wDxG1UR10Uj4bCO9l3pUbJvBAW5.png) worden

en kan worden verborgen met

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

Aangezien ik geen expert ben in CSS, vroeg ik ChatGPT naar jouw optie en kreeg ik dit, omdat ik afbeeldingen wil verbergen die beginnen met hide-this-image-, maar dan iets anders hebben. Ik kreeg dit antwoord:

Nee, pure CSS ondersteunt geen wildcard- of "begint met"-selectors voor alt-attributen op afbeeldingen.

CSS-attribuutselectors ondersteunen alleen:

  • Exacte overeenkomst: [alt=\"waarde\"]
  • Bevat woord: [alt~=\"waarde\"]
  • Bevat subtekenreeks: [alt*=\"waarde\"]
  • Begint met: [alt^=\"waarde\"]
  • Eindigt met: [alt$=\"waarde\"]

Echter, alt^=\"hide-this-image-\" zal niet betrouwbaar werken in je voorbeeld omdat CSS het alt-attribuut van <img> niet in alle browsers kan matchen wanneer de afbeelding wordt gerenderd, vooral niet in systemen zoals Discourse waar het alt-attribuut niet noodzakelijkerwijs in het DOM wordt weerspiegeld op een manier die CSS kan benaderen.

Workaround met CSS (werkt alleen in sommige omgevingen):

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

Maar nogmaals, dit werkt mogelijk niet consistent in Discourse vanwege de manier waarop afbeeldingen worden gerenderd (bijv. via markdown of JS). In dat geval heb je JavaScript nodig.

Betrouwbaar JavaScript-alternatief:

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

Dit zal betrouwbaar werken in alle omgevingen, inclusief Discourse.

23

ChatGPT’s solution seems to work:

image
image1114×546 58.3 KB

And Facebook Debugger sees it as the featured image:

image
image741×377 50.1 KB

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

I noticed that it was keeping some space where the image was supposed to be, so I asked ChatGPT again and it added that it needed to hide the parent container, which in this case it’s the <div> tag.

It’s working great now!

24

Bedankt daarvoor. Toegevoegd aan mijn notities.

25

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