הגדרת תמונה ממוצעת מבלי לפרסם אותה בנושא

תמיכה
21

אני חושב שבדרך כלל השם מתווסף במאפיין alt. כשאני מעלה קובץ, השם בדרך כלל מתווסף לפני הגודל במרקדאון, וזה החלק ש"alt" משתמש בו.

22

מכיוון שאני לא מומחה ב-CSS, שאלתי את ChatGPT לגבי האפשרות שלך וקיבלתי את התשובה הזו, מכיוון שאני רוצה להסתיר תמונות שמתחילות ב-hide-this-image-, אבל אז יש להן משהו אחר. קיבלתי את התשובה הזו:

לא, CSS טהור אינו תומך בבוררים של תווים כלליים או “מתחיל ב-” עבור תכונות alt בתמונות.

בוררי תכונות CSS תומכים רק ב:

  • התאמה מדויקת: [alt=\"value\"]
  • מכיל מילה: [alt~=\"value\"]
  • מכיל תת-מחרוזת: [alt*=\"value\"]
  • מתחיל ב: [alt^=\"value\"]
  • מסתיים ב: [alt$=\"value\"]

עם זאת, alt^=\"hide-this-image-\" לא יעבוד באופן אמין בדוגמה שלך מכיוון ש-CSS לא יכול להתאים לתכונת alt של <img> בכל הדפדפנים כאשר התמונה מוצגת, במיוחד במערכות כמו Discourse שבהן תכונת alt לא בהכרח משתקפת ב-DOM באופן ש-CSS יכול לגשת אליו.

פתרון עוקף עם CSS (עובד רק בסביבות מסוימות):

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

אבל שוב, זה עשוי לא לעבוד באופן עקבי ב-Discourse בגלל האופן שבו תמונות מוצגות (למשל, דרך markdown או JS). במקרה כזה, תצטרך JavaScript.

חלופת JavaScript אמינה:

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

זה יעבוד באופן אמין בכל הסביבות, כולל 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

תודה על כך. הוספתי להערות שלי.

25

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