Como adicionar texto exclusivo abaixo de cada imagem de categoria?

Dev
1

Como adicionar texto personalizado quando a classe para cada categoria é a mesma, como se eu quisesse adicionar algum texto abaixo de .category-logo.aspect-image img, isso adicionará texto personalizado a todas as categorias. Como adicionar texto exclusivo abaixo da imagem de cada categoria? Tentei adicionar uma nova classe a cada categoria e depois adicionei texto com class::after, está funcionando bem, mas só aparece após recarregar a página todas as vezes.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    $(function() {
      var categories = [
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGUM TEXTO",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGUM TEXTO",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        // Adicione mais objetos para outras categorias
        {
         logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGUM TEXTO",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
         logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGUM TEXTO",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
        logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGUM TEXTO",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
      logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGUM TEXTO",
          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"); // Adicione o nome da sua classe personalizada aqui

        $logoElement.after($descriptionElement);
      });
    });
  });
</script>
2 curtidas
2

Olá Pushpender!

Isso poderia ser alcançado com SCSS:

$categories: 13 12;
$labels: "primeiro rótulo" "segundo rótulo";

@each $category, $label in zip($categories, $labels) {
  .category-title-link[href$="/#{$category}"] .category-logo.aspect-image:after {
    display: block;
    content: $label;
  }
}

Por favor, tente este código e me diga se ele faz o que você deseja.
Sugiro usar IDs para identificar categorias, pois seus slugs podem mudar. IDs, no entanto, permanecerão sempre os mesmos.
Você pode adicionar comentários em seu CSS para anotar qual ID de categoria está relacionado a qual nome de categoria.

3 curtidas
3

Ainda não está funcionando

  1. O slug da categoria é /c/staff/3
  2. O URL da imagem é /uploads/default/original/1X/8dd2540613b1bec241a29373562a06edab93ec25.png
  3. Quero adicionar um texto personalizado abaixo de cada imagem de categoria (total de 7 categorias) como abaixo
    image
    image1307×330 28.6 KB
4

É assim que fica na minha instância de teste:

image
image1232×981 114 KB

É isso que você quer alcançar?

Se for esse o caso, esta informação é irrelevante, exceto pelo ID da categoria ao lado do slug.

5

Esta é uma página diferente. Quero adicionar texto dentro da página da categoria 'como quando você clica na categoria Geral no seu fórum e então você verá a página de tópicos onde temos a imagem e a descrição da categoria no topo. Estou usando o tema Air

Da página inicial

image
image1343×602 64.5 KB

para dentro da página de categorias, é aqui que preciso adicionar texto abaixo da imagem da categoria

image
image1512×808 66.3 KB

6

Ah, entendi. :slight_smile:
Você ainda pode usar uma solução SCSS pura usando slugs de categoria:

:information_source: Se você quiser adicionar quebras de linha no texto, coloque \\A dentro do seu texto e adicione white-space: pre; nas propriedades do pseudo-elemento :after.

$categories: "nature", "general";
$labels: "All natural!\A Naturaaal!" "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 curtidas
7

funcionando muito bem, realmente aprecio seu apoio, tentei de tudo, de CSS a JavaScript, apenas mais uma pergunta, quero adicionar 2 linhas, como adicionar quebra de linha ou adicionar texto abaixo do primeiro texto

Tudo natural!!
TUDO NATURAL!!

1 curtida
8

Atualizei minha resposta para adicionar esta informação.

Também adicionei .category-heading ao seletor para evitar que subcategorias tenham o mesmo texto abaixo de sua imagem e removi a altura máxima do contêiner da imagem, pois isso pode ocultar o texto abaixo da imagem.

1 curtida
9

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