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

¡Creo que este es un gran componente!

Admito que pasé dos o tres días tratando de aprender a crear un componente de tema para hacer exactamente lo que hace este componente. No siento que ese tiempo se haya desperdiciado porque aprendí mucho, pero desearía haber seguido antes el consejo de ask.discourse y haber revisado este componente.

Una cosa que no puedo descifrar

Me gusta el diseño de tarjeta, pero me gustaría mostrar una miniatura y un extracto en el diseño de tarjeta. Cualquier pista sería apreciada.

En su lugar, he optado por el diseño de lista, pero quería cambiar algunas cosas. Las he añadido a mi pestaña common.css. Quizás esto ayude a alguien más

para quitar la etiqueta del tema

.featured-topics__topic-tag {
    display: none;
}

para quitar el avatar del autor

.featured-topics__wrapper .topic-author {
    display: none;
}

para quitar el enlace de la categoría

.featured-topics__wrapper .category-link {
    display: none;
}

Edición para añadir:

Dejaré la publicación original anterior intacta, pero quería añadir

cómo hacer que el extracto se muestre en la vista de tarjeta

.featured-topics__topic-container.thumbnail .topic-excerpt {
    display: contents;
}

Además, me ha llegado a gustar más el diseño de vista de lista en el escritorio que el diseño de tarjeta, pero se ve horrible en el móvil. La miniatura está a la izquierda y el título y el extracto están en una columna estrecha a la derecha. No he descubierto cómo hacer que el texto se ajuste alrededor de la miniatura o apilar todo en una sola columna.

Como descubrí cómo hacer que la miniatura y el extracto se muestren en el diseño de tarjeta, que se ve decente en el móvil, he cambiado a ese diseño porque sospecho que la mayoría de los usuarios están viendo el sitio en un teléfono.

Este es un gran componente y complemento, ¡gracias por su trabajo!
Sin embargo, parece haber un problema con el contenido que no se actualiza, a menos que realice una actualización completa de la página, presionando F5.
Como ejemplo:
Creo un tema con la etiqueta destacada.
Voy a la página de inicio haciendo clic en el banner del sitio web.
El tema debería aparecer en ‘Temas Destacados’, pero no lo hace.
Solo aparece si actualizo la página con la tecla F5. Incluso si vuelvo a hacer clic en el banner, no aparecerá.
Lo mismo ocurre si elimino una publicación destacada. Solo desaparecerá si actualizo la página con F5 o si cierro la pestaña y vuelvo a abrir la página.
¿Alguna idea de por qué sucede esto?

1 me gusta

Esto es por diseño. El contenido no se actualiza dinámicamente, refleja el estado en la carga de la página. Normalmente no es un problema ya que el contenido estará actualizado para cualquier visitante nuevo del sitio.

3 Me gusta