How to add unique text below each category image?

Dev
1

How to add custom text when class for each category is same , like if i want to add some text below .category-logo.aspect-image img it will add custom text to all categories , how to add unique text below each category image , i tried adding new class to each category and then added text with class::after it is working fine but it only shows after reloading page every time

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

Hi Pushpender!

It could be achieved with 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;
  }
}

Please try this code and tell me if it does what you want.
I suggest using IDs to identify categories, as their slug can change. IDs, however, will always stay the same.
You can add comments in your CSS to write down which category ID is related to which category name.

3 Likes
3

Still not working

  1. Category slug is /c/staff/3
  2. Image URL is /uploads/default/original/1X/8dd2540613b1bec241a29373562a06edab93ec25.png
  3. I want to add custom text below each category (total 7 categories) image like below
    image
    image1307×330 28.6 KB
4

Here is how it looks on my test instance:

image
image1232×981 114 KB

Is that what you want to achieve?

If this is the case, this information is irrelevant, except for the category ID next to the slug.

5

This is different page. I want to add text inside the category page 'like when you click on the General category on your forum and then you will see topics page where we have category image and description on the top. i am using air theme

From homepage page

image
image1343×602 64.5 KB

to inside categories page this is where i need to add text below category image

image
image1512×808 66.3 KB

6

Oh, I see. :slight_smile:

You can still use a pure SCSS solution using category slugs:

:information_source: If you want to add line breaks in the text, put \A inside your text, and add white-space: pre; in the :after pseudo element properties.

$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 Likes
7

working great really appreciate your support ,I tried everything from CSS to JavaScript , just one more query i want to add 2 lines how to add line break or add text below first text

All natural!!
ALL NATURAL!!2

1 Like
8

I updated my answer to add this information.

I also added .category-heading in the selector to prevent subcategories from having the same text under their image, and removed the max-height from the image container because it may hide the text below the image.

1 Like
9

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