Lista de temas de Discourse: autor y participantes

[Lilly]

	Resumen	Agrega el autor del tema a la columna izquierda de las páginas de lista de temas, así como una opción para mostrar solo al último publicador en la columna de publicadores predeterminada. La imagen de perfil del autor también puede ajustarse en tamaño y forma.
	Vista previa	https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
	Repositorio	https://github.com/Lillinator/discourse-topic-list-author-posters
	Guía de instalación	Cómo instalar un tema o un componente de tema
	¿Nuevo en los temas de Discourse?	Guía para principiantes sobre el uso de temas en Discourse

Instalar este componente de tema

Descripción general

Este componente de tema para Discourse inserta la imagen de perfil del autor del tema en la primera columna de todas las rutas de lista de temas y cuenta con configuraciones que permiten al administrador especificar la forma y el tamaño de la imagen. Además, la imagen del autor no aparecerá como la primera imagen en la lista de publicadores.

También existe una opción para que la columna de imágenes de los publicadores muestre solo al último (más reciente) publicador, pero solo si hay más de un participante en el tema. Por lo tanto, la imagen del autor solo se mostrará si hay otros publicadores en el tema.

Además, los administradores también pueden optar por mostrar al autor del tema en la página de categorías cuando las vistas de lista de temas más recientes están habilitadas (es decir: Categorías con temas más recientes), y también hay opciones para el tamaño y la forma de las imágenes.

También hay un interruptor para alinear verticalmente el contenido de la fila en la parte superior o en el medio.

En pantallas pequeñas (tamaño móvil), el autor aparecerá donde normalmente está la imagen del último publicador.

Este componente funciona bien con Extractos de lista de temas y Resúmenes de gists con Discourse AI.

Configuración

Captura de pantalla de la configuración con las opciones predeterminadas en la página de administración del componente

Configuración	Descripción
Tamaño de la imagen del autor en la lista de temas	Tamaño de las imágenes en la columna del autor en las rutas de la página de lista de temas: pequeño, medio o grande.
Radio de borde de la imagen del autor en la lista de temas	Redondeo de las imágenes en las rutas de la página de lista de temas: 0% = cuadrado → 50% = círculo. tab_style = esquinas redondeadas a la izquierda
Mostrar solo al último publicador en la lista de temas	Mostrar solo la imagen del último publicador en la columna de publicadores, pero solo si hay más de un participante en el tema.
Alinear verticalmente la fila hacia arriba	Interruptor para alinear las filas hacia arriba o en el medio
Mostrar autor en la página de categorías	Mostrar la imagen del autor en lugar del último publicador en las listas de temas de la página de categorías.
Tamaño de la imagen en la página de categorías	Tamaño de las imágenes en la columna del autor en las listas de temas de la página de categorías: pequeño, medio o grande.
Radio de borde de la imagen en la página de categorías	Redondeo de las imágenes en la página de categorías: 0% = cuadrado → 50% = círculo. tab_style = esquinas redondeadas a la izquierda

Capturas de pantalla

Aquí hay algunas capturas de pantalla con diferentes configuraciones de tamaño y forma de las imágenes, también mostrando resúmenes de gists expandidos con IA.

Capturas de pantalla de varias páginas de lista de temas con diferentes configuraciones del componente activadas, mostrando ambos modos de gists compactos y expandidos, y la barra lateral expandida/colapsada

Con la configuración predeterminada:

Forma de imagen tab_style grande con resúmenes de gists expandidos:

Imágenes pequeñas con forma de radio de borde del 15% y Topic_list_show_last_poster_only activado:

Imágenes de tamaño mediano con radio de borde del 0% (cuadrado) con Topic_list_show_last_poster_only activado, y resúmenes de gists expandidos:

Capturas de pantalla de la página de categorías mostrando 2 tamaños y formas diferentes de imágenes con el autor o el último publicador.

Configuración predeterminada del componente, con imágenes redondas de tamaño mediano y Show_author_on_categories_page activado:

Imágenes de tamaño grande con forma tab_style y Show_author_on_categories_page desactivado:

Captura de pantalla de la vista en tamaño móvil

Con imágenes del autor en estilo tab_style:

---

Notas

• Inserta la imagen del autor y cambia la columna de publicadores donde se espera en las pestañas de la página de perfil.
• El comportamiento en móviles es el mismo que el predeterminado en las listas del pie de página de los temas (temas sugeridos/relacionados) y en las páginas de pestañas de perfil y bandeja de entrada.
• No es realmente compatible con el tema Horizon.

---

Posibles tareas futuras

• ¿Agregar un interruptor para desactivar en móviles?
• ¿Excepciones para categorías y etiquetas?
• ¿Soporte de izquierda a derecha?
• ¿Dar forma a las imágenes de los publicadores?

Como siempre, gracias a @Moin por la idea, la retroalimentación y la ayuda para depurar.

---

Consulta mi otro material de Discourse

[jordanjay29]

¡Gracias por crear esto, resolvió instantáneamente un problema potencial para mí!

@Lilly

Mejoras adicionales de estilo

Quizás esto ya esté planeado, quería mencionar que noté que el relleno y la alineación de la columna del avatar del póster a la izquierda tienen una sangría extraña (que no está presente en el móvil con el componente deshabilitado, a modo de comparación). Parece que el atributo text-align de td.posters también está afectando a la imagen.
La alineación de la lista de avatares de los pósters también cambia cuando está habilitada, y parece que la alineación de td.topic-list-data está anulando la predeterminada. Es bastante fácil hacer cambios de estilo por mi parte si estás de acuerdo con esto por lo demás.
Componente fantástico, gracias de nuevo.

[Lilly]

gracias por el informe, acabo de implementar una corrección. actualiza el componente y avísame si eso ayuda.

[jordanjay29]

La alineación izquierda del avatar es mejor en el escritorio. Agregué este CSS para ajustar la columna del póster central a mis preferencias:

td.posters.topic-list-data {
    vertical-align: middle !important;
}

Creo que su futura desactivación móvil también ayudará, porque el estilo utiliza un poco más de espacio en blanco del necesario.

[Lilly]

[quote=“jordanjay29, post:4, topic:394364”]La alineación a la izquierda del avatar es mejor en el escritorio. Agregué este CSS para ajustar la columna del póster del medio a mis preferencias:

[/quote]

La alineación vertical superior es intencional para ser consistente con el resto de la tarjeta del tema y no se cambiará.

No hice ningún cambio en el móvil, pero lo revisaré.

[jordanjay29]

Es posible que la alineación vertical se haya aplicado de forma demasiado amplia en su CSS y probablemente solo necesite dirigirse a la custom-author-column donde está utilizando td.topic-list-data. Sospecho que cambiar el objetivo a td.custom-author-column.topic-list-data lo resolverá y eliminará la necesidad de estilos personalizados para solucionarlo de mi parte.

[Lilly]

No, pretendía que la columna de pósteres estuviera alineada verticalmente arriba junto con todos los demás elementos de la fila. Se ve fuera de lugar alineada en el medio (especialmente si habilitas extractos o resúmenes de IA), pero supongo que es una cuestión de gusto, así que puedes ajustarlo como prefieras.

He subido un pequeño cambio para móvil.

[jordanjay29]

Dado que mi foro no utiliza extractos, gists ni resúmenes de IA, se prefiere la apariencia predeterminada de Discourse. Ese cambio me parece que tendría más sentido en un componente de tema dedicado, pero diferimos y lo he arreglado por mi parte, así que no hay resentimientos.

El aspecto móvil se ve un poco mejor, ¡gracias!

[Lilly]

@jordanjay29 después de pensarlo más, decidí agregar un interruptor de alineación (bastante fácil).

Aquí tienes

Hay una nueva configuración Alinear verticalmente la fila superior que puedes desactivar para obtener el valor predeterminado en el medio. Avísame si eso funciona para ti.