¿Cómo agregar texto único debajo de cada imagen de categoría?

Desarrollador
1

Cómo agregar texto personalizado cuando la clase para cada categoría es la misma, como si quisiera agregar algún texto debajo de .category-logo.aspect-image img agregará texto personalizado a todas las categorías, ¿cómo agregar texto único debajo de la imagen de cada categoría? Intenté agregar una nueva clase a cada categoría y luego agregué texto con class::after, está funcionando bien pero solo se muestra después de recargar la página cada vez.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    $(function() {
      var categories = [
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGÚN TEXTO",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGÚN TEXTO",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        // Agrega más objetos para otras categorías
        {
         logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGÚN TEXTO",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
         logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGÚN TEXTO",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
        logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGÚN TEXTO",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
      logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "ALGÚN 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"); // Agrega aquí el nombre de tu clase personalizada

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

Hola Pushpender!

Se podría lograr 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;
  }
}

Por favor, prueba este código y dime si hace lo que quieres.
Sugiero usar IDs para identificar categorías, ya que su slug puede cambiar. Sin embargo, los IDs siempre serán los mismos.
Puedes añadir comentarios en tu CSS para escribir qué ID de categoría está relacionado con qué nombre de categoría.

3 Me gusta
3

Todavía no funciona

  1. El slug de la categoría es /c/staff/3
  2. La URL de la imagen es /uploads/default/original/1X/8dd2540613b1bec241a29373562a06edab93ec25.png
  3. Quiero añadir texto personalizado debajo de la imagen de cada categoría (7 categorías en total) como a continuación
    image
    image1307×330 28.6 KB
4

Así se ve en mi instancia de prueba:

image
image1232×981 114 KB

¿Es eso lo que quieres lograr?

Si este es el caso, esta información es irrelevante, excepto por el ID de la categoría junto al slug.

5

Esta es una página diferente. Quiero agregar texto dentro de la página de categoría 'como cuando haces clic en la categoría General en tu foro y luego verás la página de temas donde tenemos la imagen y la descripción de la categoría en la parte superior. Estoy usando el tema Air

Desde la página de inicio

image
image1343×602 64.5 KB

a dentro de la página de categorías, aquí es donde necesito agregar texto debajo de la imagen de la categoría

image
image1512×808 66.3 KB

6

Oh, ya veo. :slight_smile:

Todavía puedes usar una solución SCSS pura usando las ‘slugs’ de las categorías:

:information_source: Si quieres añadir saltos de línea en el texto, pon \\A dentro de tu texto y añade white-space: pre; en las propiedades del pseudo-elemento :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 Me gusta
7

funciona muy bien, realmente aprecio tu apoyo. Intenté todo, desde CSS hasta JavaScript. Solo una consulta más, quiero agregar 2 líneas, cómo agregar un salto de línea o agregar texto debajo del primer texto.

¡Todo natural!
¡TODO NATURAL!

1 me gusta
8

Actualicé mi respuesta para añadir esta información.

También añadí .category-heading al selector para evitar que las subcategorías tengan el mismo texto debajo de su imagen, y eliminé la altura máxima del contenedor de la imagen porque podría ocultar el texto debajo de la imagen.

1 me gusta
9

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