Как добавить уникальный текст под каждым изображением категории?

Разработка
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>"
        },
        // Добавьте больше объектов для других категорий
        {
         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"); // Добавьте здесь ваше собственное имя класса

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

Привет, Пушпендер!

Это можно реализовать с помощью SCSS:

$categories: 13 12;
$labels: "первая метка" "вторая метка";

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

Пожалуйста, попробуйте этот код и сообщите, решает ли он вашу задачу.
Я рекомендую использовать идентификаторы (IDs) для определения категорий, так как их слаг (slug) может измениться. В то же время идентификаторы всегда остаются неизменными.
Вы можете добавлять комментарии в ваш CSS, чтобы записать, какой идентификатор категории соответствует какому названию категории.

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

Это то, чего вы хотите достичь?

Если да, то эта информация не имеет значения, за исключением ID категории рядом со слагом.

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: "Все натуральное!\ANaturaaal!" "Другой текст";

@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

7

Работает отлично, большое спасибо за поддержку! Я перепробовал всё: от CSS до JavaScript. У меня остался ещё один вопрос: как добавить две строки, разрыв строки или текст под первым текстом?

Все натурально!!
ВСЕ НАТУРАЛЬНО!!2

8

Я обновил свой ответ, чтобы добавить эту информацию.

Также я добавил .category-heading в селектор, чтобы предотвратить отображение одинакового текста под изображением для подкатегорий, и убрал max-height из контейнера изображения, так как это может скрывать текст под изображением.