Temas destacados

No, no directamente. Puedes elegir categorías, pero solo para restringir la selección de temas. No querría agregar más lógica para habilitar esta opción.

Una solución alternativa podría ser etiquetar automáticamente todos los temas nuevos, usando un comodín:

O usar un componente diferente. Si puedes explicar un poco más el aspecto que deseas lograr, tal vez pueda recomendarte uno.

Gracias por tu respuesta.

Añadir una etiqueta específica para el componente será una carga adicional a largo plazo si alguna vez decido eliminar este componente.

Por lo tanto, la mejor lógica para el componente sería seleccionar automáticamente las últimas publicaciones si no se especifica ninguna etiqueta.

En caso de que alguna vez elimine el componente, tendré que buscar todos los hilos que usan la etiqueta “destacado” y eliminarles la etiqueta a todos.

Puedes eliminar etiquetas de temas muy rápidamente filtrando por etiqueta y utilizando las opciones de Acción Masiva:

Creo que solo toma los que están visibles en la pantalla, así que a menudo me desplazo hacia abajo para cargarlos todos antes de aplicar la acción masiva. :+1:

1 me gusta

Bueno, también puedes simplemente eliminar esa etiqueta y desaparece :headstone: :upside_down_face:

1 me gusta

En general: El componente es una bifurcación del Componente de Mosaicos Destacados oficial. La idea y motivación principal para mí fue tener una apariencia de tarjetas con la funcionalidad que ofrece ese componente. No creo que añada más características funcionales sobre el componente original. La razón es que, en cuanto al mantenimiento del código, quiero poder seguir simplemente las correcciones de compatibilidad del componente oficial.

2 Me gusta

En caso de que a alguien le interese: modificamos el componente de tarjetas destacadas para permitir a los usuarios desplazarse horizontalmente por todos los temas destacados (fuente de temas utilizada: más recientes).

Este es el CSS utilizado:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    -ms-overflow-style: none; /* Ocultar la barra de desplazamiento para MS Edge */
    scrollbar-width: none; /* Ocultar la barra de desplazamiento para Mozilla Firefox */
    scroll-snap-type: x mandatory;
    scroll-padding: 8px;
}

.featured-card {
    scroll-snap-align: start;
}

.featured-cards-container::-webkit-scrollbar {
    display: none; /* Ocultar la barra de desplazamiento en navegadores basados en Webkit (Chrome, Safari, etc.) */
    -webkit-overflow-scrolling: touch; /* En pantallas táctiles, el contenido continúa desplazándose durante un tiempo después de finalizar el gesto de desplazamiento */
}
3 Me gusta

Solicitud de función.

¿Podemos tener una opción para mostrar esto en una página de categoría específica?

es decir, si se ven las tarjetas destacadas del Salón, se muestran aquí

la imagen que se muestra es la imagen de la categoría. Estoy usando el tema Air. Aplicación para mostrar temas destacados relacionados con esa categoría de su subcategoría Frontier news.

¿Cuál es el tamaño de imagen recomendado para la imagen de la tarjeta?

Genial, pero no es compatible con el tema FKB

¿Cómo puedo establecer el número máximo de caracteres para el título? Estoy mostrando un extracto en la tarjeta y se extiende fuera del cuadro con el texto del título y el extracto.

No hay una configuración para controlar los caracteres máximos del título. Sin embargo, puedes aumentar la configuración de altura de las tarjetas para que se ajuste al contenido.
image

Si no quieres ajustar cada vez, puedes probar este CSS en tu tema o en un componente.
Elimina el límite de altura de la tarjeta y tienes las siguientes opciones:

  • si prefieres estirar la tarjeta
  • la altura máxima de la imagen.
  • las líneas máximas del título
  • las líneas máximas del extracto
.featured-cards-container {
    $stretch_card: "true";
    $max-image-height: 10em;
    $max-title-lines: 3;
    $max-excerpt-lines: 4;
    
    height: inherit; 
    max-height: inherit;
    
    .featured-card {
        @if $stretch_card == "true" {
            height: inherit;
        }
        
        a.card-content .card-details {
            .topic-title {
                -webkit-line-clamp: $max-title-lines;
            }
            
            .topic-excerpt {
                -webkit-line-clamp: $max-excerpt-lines;
            }
        }

        a.card-content .card-image {
            height: #{$max-image-height};
            min-height: #{$max-image-height};
        }
    }
}

¡Espero que eso ayude!

1 me gusta

Gracias, en realidad tenía tu altura definida de 350 antes de publicar, pero acabo de probar tu código y parece ajustar el tamaño de la tarjeta apropiadamente para títulos con extractos.

2 Me gusta

¡Desenterrando este, es genial! ¿Hay alguna forma de habilitarlo también para la vista de smartphone?

Por alguna razón, el desplazamiento horizontal ya no funciona. ¿Alguien ha podido hacerlo funcionar en escritorio y móvil?

1 me gusta

Intenta algo como esto:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    scroll-snap-type: x mandatory;
    scroll-padding: 1.25rem;

    /* Hace que la barra de desplazamiento sea tangible pero invisible */
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;

    /* O la muestra pero delgada */
    // scrollbar-width: thin;
    // scrollbar-color: #91919185 transparent;

    /* Asegura que la barra de desplazamiento esté justo debajo del contenedor en lugar de debajo de la altura máxima. */
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

No estoy seguro de que sea una buena idea ocultar la barra de desplazamiento en un escritorio; puede ser frustrante acceder a ella.

Delgada y visible (también haciendo el fondo transparente) me parece bien. ¿Qué opinas?

3 Me gusta

¡Eso funciona en el escritorio ahora! Pero no en el móvil. Ya he improvisado algo de CSS para la barra de desplazamiento horizontal del móvil, pero no es muy sofisticado :smiley:

También he añadido el ajuste de fuentes, ya que el tamaño de la fuente del título era demasiado grande para la pantalla pequeña

.featured-cards-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1rem;
    align-content: flex-start;
    overflow-x: auto;
    max-height: 350px;
}
.featured-cards-container .featured-card {
    min-width: 90%;
    
}


.featured-card a.card-content .card-details .topic-title {
    font-size: var(--font-up-1);
}
3 Me gusta

¿Hay alguna forma de hacer que todo el elemento sea colapsable y replicar el mismo comportamiento que el componente Homepage Feature?

“¿Solo me está pasando a mí que ‘Mostrar extracto está en blanco’?”

He actualizado este componente y he movido su repositorio a GitLab: Manuel Kostka / Discourse / Components / Featured Topics · GitLab.

La nueva versión adopta un enfoque de diseño ligeramente diferente al eliminar opciones de estilo selectas de la configuración del tema. En su lugar, proporciona dos arreglos básicos de diseño (Tarjetas y Lista) y una plantilla más limpia para añadir declaraciones de estilo personalizadas a través de CSS.

Si deseas seguir utilizando el componente anterior, está disponible en GitHub - nolosb/discourse-featured-cards.

3 Me gusta

Es un poco fuera de tema, pero creo que es un gran enfoque. Me cuesta no proporcionar un millón de configuraciones en un componente en aras de la personalización cuando deberías simplificar las cosas para el usuario, pero aún así ofrecer una forma de personalizar para uso/usuarios avanzados.

3 Me gusta

Aún no he hecho eso en este componente, pero otro enfoque que me gusta es ofrecer propiedades personalizadas como la forma estándar de personalizar estilos. Por ejemplo, así, en Manuel Kostka / Discourse / Components / Extra Banners · GitLab :

En el componente, puedes declarar el estilo con un marcador de posición para la propiedad personalizada y un valor predeterminado:

background: var(--extra-banners-background, var(--secondary));
4 Me gusta