كيفية إضافة نص فريد أسفل كل صورة فئة؟

[pinder99 (Raza shield)]

كيفية إضافة نص مخصص عندما يكون للفئة نفس الفئة، كما لو كنت أرغب في إضافة نص أسفل .category-logo.aspect-image img، فسيؤدي ذلك إلى إضافة نص مخصص لجميع الفئات، وكيفية إضافة نص فريد أسفل كل صورة فئة، لقد حاولت إضافة فئة جديدة لكل فئة ثم أضفت نصًا باستخدام class::after، إنه يعمل بشكل جيد ولكنه يظهر فقط بعد إعادة تحميل الصفحة في كل مرة

<script>
  document.addEventListener("DOMContentLoaded", function() {
    $(function() {
      var categories = [
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "نص ما",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "نص ما",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        // Add more objects for other categories
        {
         logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "نص ما",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
         logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "نص ما",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
        logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "نص ما",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
      logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "نص ما",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
      ];

      $(".category-heading").each(function(index) {
        var category = categories[index];
        var $logoElement = $(this).find(".category-logo img");
        var $descriptionElement = $("<p>")
          .html(category.line1 + "<br>" + category.line2)
          .addClass("custom99"); // Add your custom class name here

        $logoElement.after($descriptionElement);
      });
    });
  });
</script>

[Canapin (Coin-coin le Canapin)]

مرحباً Pushpender!

يمكن تحقيق ذلك باستخدام SCSS:

$categories: 13 12;
$labels: "first label" "second label";

@each $category, $label in zip($categories, $labels) {
  .category-title-link[href$="/#{$category}"] .category-logo.aspect-image:after {
    display: block;
    content: $label;
  }
}

يرجى تجربة هذا الرمز وإخباري إذا كان يقوم بما تريده.
أقترح استخدام المعرفات (IDs) لتحديد الفئات، حيث يمكن أن يتغير الـ slug الخاص بها. ومع ذلك، ستبقى المعرفات (IDs) دائمًا كما هي.
يمكنك إضافة تعليقات في ملف CSS الخاص بك لكتابة أي معرف فئة (category ID) يتعلق بأي اسم فئة (category name).

[pinder99 (Raza shield)]

لا يزال لا يعمل

1. اسم الفئة هو /c/staff/3
2. عنوان URL للصورة هو /uploads/default/original/1X/8dd2540613b1bec241a29373562a06edab93ec25.png
3. أريد إضافة نص مخصص أسفل كل صورة فئة (إجمالي 7 فئات) كما هو موضح أدناه
   
   

[Canapin (Coin-coin le Canapin)]

هذا ما يبدو عليه الأمر في نسخة الاختبار الخاصة بي:

هل هذا ما تريد تحقيقه؟

إذا كان الأمر كذلك، فهذه المعلومات غير ذات صلة، باستثناء معرف الفئة بجوار الاسم المستعار.

@pinder99

• الاسم المستعار للفئة هو /c/staff/3
• عنوان URL للصورة هو /uploads/default/original/1X/8dd2540613b1bec241a29373562a06edab93ec25.png

[pinder99 (Raza shield)]

هذه صفحة مختلفة. أريد إضافة نص داخل صفحة الفئة "مثل عندما تنقر على فئة عامة في منتداك ثم سترى صفحة الموضوعات حيث لدينا صورة الفئة ووصفها في الأعلى. أنا أستخدم سمة Air

من الصفحة الرئيسية

إلى داخل صفحة الفئات هذا هو المكان الذي أحتاج فيه إلى إضافة نص أسفل صورة الفئة

[Canapin (Coin-coin le Canapin)]

أوه، فهمت.

لا يزال بإمكانك استخدام حل SCSS نقي باستخدام شرائح الفئات:

إذا كنت ترغب في إضافة فواصل أسطر في النص، فضع \\A داخل النص الخاص بك، وأضف white-space: pre; في خصائص العنصر الزائف :after.

$categories: "nature", "general";
$labels: "All natural!\\ANaturaaal!" "Another text";

@each $category, $label in zip($categories, $labels) {
  body.category-#{$category} .category-heading .category-logo.aspect-image {
    max-height: none;
    &:after {
      display: block;
      content: $label;
      font-size: 1.25em;
      color: var(--primary-700);
      white-space: pre;
      text-align: center;
    }
  }
}

[pinder99 (Raza shield)]

يعمل بشكل رائع، أقدر دعمك حقًا. لقد جربت كل شيء من CSS إلى JavaScript، فقط استفسار آخر أريد إضافة سطرين، كيف أضيف فاصل أسطر أو أضيف نصًا أسفل النص الأول.

كل طبيعي!!
كل طبيعي!!

[Canapin (Coin-coin le Canapin)]

لقد قمت بتحديث إجابتي لإضافة هذه المعلومات.

لقد أضفت أيضًا .category-heading في المحدد لمنع الفئات الفرعية من أن يكون لها نفس النص أسفل صورتها، وأزلت max-height من حاوية الصورة لأنها قد تخفي النص الموجود أسفل الصورة.