Come aggiungere testo univoco sotto ogni immagine di categoria?

Sviluppatore
1

Come aggiungere testo personalizzato quando la classe per ogni categoria è la stessa, ad esempio se voglio aggiungere del testo sotto .category-logo.aspect-image img aggiungerà testo personalizzato a tutte le categorie, come aggiungere testo univoco sotto l’immagine di ogni categoria, ho provato ad aggiungere una nuova classe a ogni categoria e poi ho aggiunto testo con class::after funziona bene ma viene visualizzato solo dopo aver ricaricato la pagina ogni volta

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

Ciao Pushpender!

Potrebbe essere ottenuto con 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;
  }
}

Prova questo codice e dimmi se fa quello che desideri.
Suggerisco di utilizzare gli ID per identificare le categorie, poiché il loro slug può cambiare. Gli ID, tuttavia, rimarranno sempre gli stessi.
Puoi aggiungere commenti nel tuo CSS per annotare quale ID di categoria è correlato a quale nome di categoria.

3 Mi Piace
3

Ancora non funziona

  1. Lo slug della categoria è /c/staff/3
  2. L’URL dell’immagine è /uploads/default/original/1X/8dd2540613b1bec241a29373562a06edab93ec25.png
  3. Voglio aggiungere un testo personalizzato sotto ogni immagine di categoria (7 categorie in totale) come di seguito
    image
    image1307×330 28.6 KB
4

Ecco come appare sulla mia istanza di test:

image
image1232×981 114 KB

È questo che vuoi ottenere?

Se è così, queste informazioni sono irrilevanti, ad eccezione dell’ID della categoria accanto allo slug.

5

Questa è una pagina diversa. Voglio aggiungere testo all’interno della pagina della categoria "come quando fai clic sulla categoria Generale sul tuo forum e poi vedrai la pagina degli argomenti in cui abbiamo l’immagine e la descrizione della categoria in alto. sto usando il tema Air

Dalla pagina principale

image
image1343×602 64.5 KB

alla pagina interna delle categorie, è qui che devo aggiungere testo sotto l’immagine della categoria

image
image1512×808 66.3 KB

6

Oh, capisco. :slight_smile:

Puoi ancora usare una soluzione SCSS pura utilizzando gli slug delle categorie:

:information_source: Se vuoi aggiungere interruzioni di riga nel testo, inserisci \\A all’interno del tuo testo e aggiungi white-space: pre; nelle proprietà dell’elemento 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 Mi Piace
7

funziona benissimo apprezzo molto il tuo supporto, ho provato di tutto dal CSS a JavaScript, solo un’altra domanda voglio aggiungere 2 righe come aggiungere interruzione di riga o aggiungere testo sotto il primo testo

Tutto naturale!!
TUTTO NATURALE!!

1 Mi Piace
8

Ho aggiornato la mia risposta per aggiungere queste informazioni.

Ho anche aggiunto .category-heading nel selettore per evitare che le sottocategorie abbiano lo stesso testo sotto la loro immagine e ho rimosso l’altezza massima dal contenitore dell’immagine perché potrebbe nascondere il testo sotto l’immagine.

1 Mi Piace
9

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