Wie fügt man eindeutigen Text unter jedem Kategoriebild hinzu?

Entwickler
1

Wie füge ich benutzerdefinierten Text hinzu, wenn die Klasse für jede Kategorie gleich ist, z. B. wenn ich Text unter .category-logo.aspect-image img hinzufügen möchte, wird benutzerdefinierter Text zu allen Kategorien hinzugefügt? Wie füge ich eindeutigen Text unter jedem Kategoriebild hinzu? Ich habe versucht, jeder Kategorie eine neue Klasse hinzuzufügen und dann Text mit class::after hinzuzufügen. Es funktioniert gut, aber es wird jedes Mal nur nach dem Neuladen der Seite angezeigt.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    $(function() {
      var categories = [
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "EINIGE TEXT",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "EINIGE TEXT",
          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: "EINIGE TEXT",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
         logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "EINIGE TEXT",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
        logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "EINIGE TEXT",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
      logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "EINIGE TEXT",
          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 „Gefällt mir“
2

Hallo Pushpender!

Das könnte mit SCSS erreicht werden:

$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;
  }
}

Bitte probiere diesen Code aus und sage mir, ob er das tut, was du möchtest.
Ich schlage vor, IDs zur Identifizierung von Kategorien zu verwenden, da sich ihr Slug ändern kann. IDs bleiben jedoch immer gleich.
Du kannst Kommentare in deinem CSS hinzufügen, um aufzuschreiben, welche Kategorie-ID sich auf welchen Kategorienamen bezieht.

3 „Gefällt mir“
3

Funktioniert immer noch nicht

  1. Der Kategorie-Slug ist /c/staff/3
  2. Die Bild-URL ist /uploads/default/original/1X/8dd2540613b1bec241a29373562a06edab93ec25.png
  3. Ich möchte unter jedem Kategoriebild (insgesamt 7 Kategorien) benutzerdefinierten Text hinzufügen, wie unten gezeigt
    image
    image1307×330 28.6 KB
4

Hier ist, wie es auf meiner Testinstanz aussieht:

image
image1232×981 114 KB

Ist das das, was Sie erreichen möchten?

Wenn dies der Fall ist, sind diese Informationen irrelevant, mit Ausnahme der Kategorie-ID neben dem Slug.

5

Dies ist eine andere Seite. Ich möchte Text innerhalb der Kategorieseite hinzufügen, wie wenn Sie auf die allgemeine Kategorie in Ihrem Forum klicken und dann die Themen-Seite sehen, auf der wir oben ein Kategoriebild und eine Beschreibung haben. Ich benutze das Air-Theme.

Von der Homepage

image
image1343×602 64.5 KB

zu innerhalb der Kategorieseite, hier muss ich Text unter dem Kategoriebild hinzufügen.

image
image1512×808 66.3 KB

6

Oh, ich verstehe. :slight_smile:

Sie können immer noch eine reine SCSS-Lösung mit Kategorie-Slugs verwenden:

:information_source: Wenn Sie Zeilenumbrüche im Text hinzufügen möchten, fügen Sie \\A in Ihren Text ein und fügen Sie white-space: pre; zu den :after-Pseudoelement-Eigenschaften hinzu.

$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 „Gefällt mir“
7

funktioniert super, ich schätze Ihre Unterstützung sehr. Ich habe alles von CSS bis JavaScript ausprobiert, nur noch eine Frage: Ich möchte 2 Zeilen hinzufügen, wie füge ich einen Zeilenumbruch hinzu oder füge Text unter dem ersten Text hinzu

Ganz natürlich!!
GANZ NATÜRLICH!!

1 „Gefällt mir“
8

Ich habe meine Antwort aktualisiert, um diese Informationen hinzuzufügen.

Ich habe auch .category-heading in den Selektor aufgenommen, um zu verhindern, dass Unterkategorien denselben Text unter ihrem Bild haben, und die maximale Höhe des Bildcontainers entfernt, da dies den Text unter dem Bild verbergen könnte.

1 „Gefällt mir“
9

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