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

مطور
1

كيفية إضافة نص مخصص عندما يكون للفئة نفس الفئة، كما لو كنت أرغب في إضافة نص أسفل .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>
إعجابَين (2)
2

مرحباً 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).

3 إعجابات
3

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

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

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

image
image1232×981 114 KB

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

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

5

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

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

image
image1343×602 64.5 KB

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

image
image1512×808 66.3 KB

6

أوه، فهمت. :slight_smile:

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

:information_source: إذا كنت ترغب في إضافة فواصل أسطر في النص، فضع \\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;
    }
  }
}

image
image1136×638 79.5 KB

image
image1130×623 62.2 KB

إعجابَين (2)
7

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

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

إعجاب واحد (1)
8

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

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

إعجاب واحد (1)
9

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