lundi 22 mai 2023

Adding custom text below categories image in discourse

In discourse categories page have one class i can target to add custom text using content on class::after but this function create text on all the images because all have same class .category-logo.aspect-image img , i want to add unique text below all categories , i have written this code but it only works after reloading the page. please support

    <script>
  document.addEventListener("DOMContentLoaded", function() {
    $(function() {
      var categories = [
        {
          logoUrl: "/uploads/",
          line1: "ATALANTA, USA",
          line2: "<a href='https://example.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
          logoUrl: "/uploads", // Replace with actual image URL for Category 2
          line1: "Denver, United States",
          line2: "<a href='https://example.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        // Add more objects for other categories
        {
          logoUrl: "/uploads", // Replace with actual image URL for Category 2
          line1: "Dowman Drive, Atalanta",
          line2: "<a href='https://example.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
          logoUrl: "/uploads", // Replace with actual image URL for Category 2
          line1: "ATALANTA, USA",
          line2: "<a href='https://example.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
          logoUrl: "/uploads", // Replace with actual image URL for Category 2
          line1: "ATALANTA, USA",
          line2: "<a href='https://example.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
          logoUrl: "/uploads", // Replace with actual image URL for Category 2
          line1: "ATALANTA, USA",
          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>



Aucun commentaire:

Enregistrer un commentaire