Lista de temas de Discourse: autores y participantes

[Lilly (Lillian)]

	Resumen	Agrega el autor del tema a la columna izquierda de las páginas de listas 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

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 listas de temas e incluye configuraciones que permiten al administrador especificar la forma y el tamaño de la imagen de perfil. Además, la imagen de perfil del autor no se mostrará como la primera imagen en la lista de publicadores.

También existe una configuración para que la columna de imágenes de perfil 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 de perfil del autor solo se mostrará si hay otros publicadores en el tema.

Además, los administradores también pueden elegir mostrar al autor del tema en la página de categorías cuando las vistas de listas 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 la imagen de perfil.

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 se muestra la imagen de perfil del último publicador.

Este componente funciona bien con Extractos de listas de temas y Resúmenes de gists con IA de Discourse.

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 de perfil del autor en la lista de temas	Tamaño de las imágenes de perfil en la columna del autor de la lista de temas - pequeño, medio o grande.
Radio de borde de la imagen de perfil del autor en la lista de temas	Redondeo de las imágenes de perfil en la 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 de perfil del último publicador en la columna de publicadores, pero solo si hay más de un participante en el tema.
Alinear filas verticalmente hacia arriba	Interruptor para alinear las filas en la parte superior o en el medio
Mostrar autor en la página de categorías	Mostrar la imagen de perfil del autor en lugar del último publicador en las listas de temas de la página de categorías.
Tamaño de la imagen de perfil en la página de categorías	Tamaño de las imágenes de perfil en la columna del autor de las listas de temas en la página de categorías - pequeño, medio o grande.
Radio de borde de la imagen de perfil en la página de categorías	Redondeo de las imágenes de perfil 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 de perfil, también mostrando resúmenes de gists con IA expandidos.

Capturas de pantalla de varias páginas de listas de temas con diferentes configuraciones del componente habilitadas, mostrando tanto el modo compacto como el expandido de gists, y la barra lateral expandida/colapsada

Con la configuración predeterminada:

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

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

Imágenes de perfil de tamaño medio con radio de borde del 0% (cuadrado) y Topic_list_show_last_poster_only habilitado, además de 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 de perfil con autor o último publicador.

Configuración predeterminada del componente, con imágenes de perfil redondas de tamaño medio y Show_author_on_categories_page habilitado:

Imágenes de perfil de tamaño grande con estilo tab_style y Show_author_on_categories_page deshabilitado:

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

Con imágenes de perfil del autor con estilo tab_style:

---

Notas

• Inserta la imagen de perfil del autor y modifica 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 de pie de página de 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 deshabilitar en móviles?
• ¿Excepciones para categorías y etiquetas?
• ¿Soporte de izquierda a derecha?
• ¿Dar forma a las imágenes de perfil de los publicadores?

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

---

Consulta mi otro contenido 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 (Lillian)]

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 (Lillian)]

[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 (Lillian)]

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 (Lillian)]

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