تعيين صورة مميزة دون نشرها في الموضوع

الدعم
21

أعتقد أنه عادةً ما تتم إضافة الاسم في السمة alt. عندما أقوم بتحميل ملف، تتم عادةً إضافة الاسم أمام الحجم في markdown، وهذا هو الجزء الذي تستخدمه “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 يعمل:

image
image1114×546 58.3 KB

ويراه مصحح Facebook كصورة مميزة:

image
image741×377 50.1 KB

المكون مع جافاسكريبت:

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>.

إنه يعمل بشكل رائع الآن!

24

شكرا على ذلك. تمت إضافته إلى ملاحظاتي.

25

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