Comment ajouter un texte unique sous chaque image de catégorie ?

Dev
1

Comment ajouter du texte personnalisé lorsque la classe pour chaque catégorie est la même, par exemple si je veux ajouter du texte sous .category-logo.aspect-image img, cela ajoutera du texte personnalisé à toutes les catégories. Comment ajouter un texte unique sous l’image de chaque catégorie ? J’ai essayé d’ajouter une nouvelle classe à chaque catégorie, puis d’ajouter du texte avec class::after, cela fonctionne bien mais n’apparaît qu’après le rechargement de la page à chaque fois.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    $(function() {
      var categories = [
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "TEXTE QUELCONQUE",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "TEXTE QUELCONQUE",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        // Ajoutez plus d'objets pour d'autres catégories
        {
         logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "TEXTE QUELCONQUE",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
         logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "TEXTE QUELCONQUE",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
        logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "TEXTE QUELCONQUE",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
      logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "TEXTE QUELCONQUE",
          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"); // Ajoutez votre nom de classe personnalisé ici

        $logoElement.after($descriptionElement);
      });
    });
  });
</script>
2 « J'aime »
2

Salut Pushpender !

Cela pourrait être réalisé avec 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;
  }
}

Essayez ce code et dites-moi s’il fait ce que vous voulez.
Je suggère d’utiliser des ID pour identifier les catégories, car leur slug peut changer. Les ID, cependant, resteront toujours les mêmes.
Vous pouvez ajouter des commentaires dans votre CSS pour noter quel ID de catégorie est lié à quel nom de catégorie.

3 « J'aime »
3

Toujours pas fonctionnel

  1. Le slug de la catégorie est /c/staff/3
  2. L’URL de l’image est /uploads/default/original/1X/8dd2540613b1bec241a29373562a06edab93ec25.png
  3. Je veux ajouter du texte personnalisé sous chaque image de catégorie (7 catégories au total) comme ci-dessous
    image
    image1307×330 28.6 KB
4

Voici à quoi cela ressemble sur mon instance de test :

image
image1232×981 114 KB

Est-ce ce que vous voulez accomplir ?

Si c’est le cas, cette information est sans importance, à l’exception de l’ID de catégorie à côté du slug.

5

Ceci est une page différente. Je veux ajouter du texte à l’intérieur de la page de catégorie 'comme lorsque vous cliquez sur la catégorie Général sur votre forum, puis vous verrez la page des sujets où nous avons l’image et la description de la catégorie en haut. j’utilise le thème air

Depuis la page d’accueil

image
image1343×602 64.5 KB

jusqu’à l’intérieur de la page des catégories, c’est là que je dois ajouter du texte sous l’image de la catégorie

image
image1512×808 66.3 KB

6

Oh, je vois. :slight_smile:
Vous pouvez toujours utiliser une solution SCSS pure en utilisant les slugs de catégorie :

:information_source: Si vous souhaitez ajouter des sauts de ligne dans le texte, insérez \\A dans votre texte et ajoutez white-space: pre; dans les propriétés de l’élément pseudo :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 « J'aime »
7

fonctionne très bien, j’apprécie vraiment votre soutien, j’ai tout essayé, du CSS au JavaScript, juste une autre question, je veux ajouter 2 lignes, comment ajouter un saut de ligne ou ajouter du texte sous le premier texte

Tout naturel !!
TOUT NATUREL !!2

1 « J'aime »
8

J’ai mis à jour ma réponse pour ajouter ces informations.

J’ai également ajouté .category-heading au sélecteur pour éviter que les sous-catégories n’aient le même texte sous leur image, et j’ai supprimé la hauteur maximale du conteneur d’image car elle pourrait masquer le texte sous l’image.

1 « J'aime »
9

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