Lista de temas de Discourse Autor y Publicadores

[Lilly]

	Resumen	Añade un autor de tema a la columna izquierda de las páginas de lista de temas, así como una opción para mostrar solo el póster más reciente en la columna de pósteres predeterminada. El avatar del autor también se puede dimensionar y dar forma.
	Vista previa	\u003chttps://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters\u003e
	Repositorio	\u003chttps://github.com/Lillinator/discourse-topic-list-author-posters\u003e
	Guía de instalación	Cómo instalar un tema o componente de tema
	¿Nuevo en los temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Descripción general

Este componente de tema de Discourse inserta un avatar del autor del tema en la primera columna de todas las rutas de lista de temas y tiene configuraciones que permiten al administrador especificar la forma y el tamaño del avatar. Además, el avatar del autor no se mostrará como el primer avatar en la lista de pósteres.

También hay una configuración para hacer que la columna de avatares de los pósteres muestre solo el póster más reciente, pero solo si hay más de un participante en el tema. Por lo tanto, el avatar del autor solo se mostrará si hay otros pósteres en el tema.

Además, los administradores también pueden optar por mostrar el autor del tema en la página de la categoría 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 de tamaño y forma del avatar.

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

En una vista pequeña (tamaño móvil), el autor aparecerá donde está el avatar del último póster.

Este tema funciona bien con Extractos de lista de temas y resúmenes de gists de 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 del avatar del autor de la lista de temas	Tamaño de los avatares en la columna de avatar del autor de las rutas de la página de lista de temas: small (pequeño), medium (mediano) o large (grande).
Radio del borde del avatar del autor de la lista de temas	Redondeo del avatar en las rutas de la página de lista de temas: 0% = cuadrado → 50% = círculo. tab_style = esquinas izquierdas redondeadas
Mostrar solo el último póster en la lista de temas	Muestra solo el avatar del último póster en la columna de pósteres, pero solo si hay más de un participante en el tema.
Alinear verticalmente la parte superior de la fila	Interruptor para alinear las filas arriba o en el medio
Mostrar autor en la página de categorías	Muestra el avatar del autor en lugar del último póster en las listas de temas en la página de categorías.
Tamaño del avatar del tema de la página de categoría	Tamaño de los avatares en la columna de avatar del autor en las listas de temas de la página de categorías: small (pequeño), medium (mediano) o large (grande).
Radio del borde del avatar de la página de categoría	Redondeo del avatar en la página de categorías: 0% = cuadrado → 50% = círculo. tab_style = esquinas izquierdas redondeadas

Capturas de pantalla

Aquí hay algunas capturas de pantalla con diferentes configuraciones de tamaño y forma de avatar, que también muestran con gists de resumen de IA expandidos.

Capturas de pantalla de varias páginas de lista de temas con diferentes configuraciones de componente habilitadas, que muestran los modos de gists compactos y expandidos, y la barra lateral expandida/colapsada

Con la configuración predeterminada:

Forma de avatar tab_style grande con gists de resumen expandidos:

Avatares pequeños con forma de radio de borde del 15% y Topic_list_show_last_poster_only habilitado:

Avatares de tamaño mediano con radio de borde del 0% (cuadrado) con Topic_list_show_last_poster_only habilitado, y gists de resumen expandidos:

Capturas de pantalla de la página de categoría que muestran 2 tamaños y formas diferentes de avatares con autor o último póster.

Configuración predeterminada del componente, con avatares redondos de tamaño mediano y Show_author_on_categories_page habilitado:

Avatares de tamaño grande en estilo tab_style y Show_author_on_categories_page deshabilitado:

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

Con avatares de autor estilo tab_style:

---

Notas

• Inserta el avatar del autor y cambia la columna de pósteres donde se espera en las pestañas de la página de perfil.
• El comportamiento móvil es el mismo que el predeterminado en las listas de pie de tema (temas sugeridos/relacionados) y en las páginas de pestañas de perfil y bandeja de entrada.
• Realmente no es compatible con el tema horizon.

---

Posibles tareas futuras

• ¿Añadir un interruptor de desactivación para móvil?
• ¿Exenciones de categoría y etiqueta?
• ¿Soporte de izquierda a derecha?
• ¿Dar forma a los avatares de los pósteres?

Como siempre, gracias a @Moin por la idea, los comentarios y la ayuda con la depuración.

[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.