Temas destacados

¡Gracias por la actualización! :heart:

Con algunos trucos de CSS, moví el avatar como una superposición sobre la miniatura en modo tarjeta:

.featured-topics__topic-details .topic-author {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

¿Cómo puedo reducir la altura del div del autor del tema (púrpura) a 0 y eliminar efectivamente el espacio mientras sigo mostrando el avatar?

1 me gusta

Si estás escribiendo CSS personalizado, en lugar de agregar código que sobrescriba uno de los diseños preestablecidos, te recomendaría que elijas la opción de diseño Ninguno en la configuración del tema y declares tus estilos desde cero.

Por ejemplo, podrías copiar la hoja de estilos de tarjetas predeterminada y declarar el contenedor featured-topics__topic-details como una cuadrícula. Luego, puedes posicionar sus elementos exactamente como desees, en lugar de moverlos con declaraciones absolutas.

2 Me gusta

¡Esa es una gran idea!

Por ahora, estamos contentos con la plantilla y solo unos pequeños ajustes de CSS para probarla inicialmente. Una vez que lleguemos a la fase de optimización de CTR, probablemente seguiremos tu consejo. :slight_smile:

2 Me gusta

No estoy seguro de si este es el comportamiento esperado o si podría considerarse un error:

Cuando se configuran tres temas en la configuración, pero solo se muestran dos, aparece un espacio donde debería estar el tercer tema. Sería ideal que las tarjetas se redimensionaran para ocupar todo el ancho en tales casos.

Si a alguien le interesa usar el desplazamiento horizontal en dispositivos móviles, aquí hay algo de CSS que se me ocurrió (con la ayuda de la IA). También incluye algunos ajustes de scroll snap y tamaño que encontré más adecuados para nuestro caso de uso.

PD: También intenté crear algunas pastillas de navegación sin añadir HTML, pero eso definitivamente fue un estiramiento.

@media (max-width: 750px) {
  .featured-topics__topic-wrapper {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 1em 10vw; /* Relleno lateral para visibilidad de tarjetas vecinas */
    gap: 1rem; /* Espaciado consistente entre tarjetas */
    overscroll-behavior-x: contain; /* Evita interferencias de sobredesplazamiento */
    scroll-behavior: smooth; /* Desplazamiento suave */
    scrollbar-width: none; /* Oculta la barra de desplazamiento */
    -ms-overflow-style: none;
  }

  .featured-topics__topic-wrapper::-webkit-scrollbar {
    display: none; /* Oculta la barra de desplazamiento en navegadores WebKit */
  }

  .featured-topics__topic-container {
    flex: 0 0 80vw; /* Tarjetas más estrechas para visibilidad lateral */
    min-width: 280px; /* Ancho mínimo para pantallas pequeñas */
    scroll-snap-align: center; /* Centra cada tarjeta al desplazarse */
    height: unset !important; /* Altura consistente */
  }

  .featured-topics__topic-thumbnail {
    height: 40vw;
    width: 100%;
  }
}

Hola, ¡muchas gracias por este componente, me encanta!

¿Alguien podría ayudarme a ajustar el tamaño del título, ya que es demasiado grande en este momento?

Recibí un mensaje de error que dice que este componente necesita ser actualizado para ser compatible con los próximos cambios en el núcleo de Discourse. ¿Alguien sabe si hay una actualización planeada?

Actualicé el componente a principios de este año. Necesitas reinstalar para usar la nueva versión, mira: :index_pointing_up: Featured Topics - #38 by manuel

1 me gusta

¡Oh, muchas gracias, funcionó!

Lo único que no puedo arreglar (he estado molestando a Chat GPT durante una hora, supongo…) es la altura de las tarjetas, ¿algún consejo sobre cómo puedo reducirla/eliminarla?

Hola Manuel, ¿hay alguna forma de que tu fantástico componente temático aquí ignore las imágenes (para que solo muestre un extracto en su lugar)?

Tengo bastantes temas destacados sin imágenes (que quiero destacar), pero se ven bastante mal junto a los que contienen imágenes. Además, me interesa más el texto que las imágenes.

La plantilla del componente renderiza una variedad de contenido disponible sobre un tema. El aspecto final se ajusta luego con reglas de estilo. Por ejemplo, cuando selecciona “tarjetas” como diseño, los extractos del tema se ocultan cuando hay una imagen destacada y se muestran siempre que no la hay:

Si siempre desea mostrar el extracto y nunca mostrar una imagen, puede seleccionar “ninguno” para Diseño y agregar su propia hoja de estilos. O sobrescribir las reglas del diseño de tarjetas que muestran la imagen y ocultan el extracto.

1 me gusta