Vistas previas de la lista de temas (TLP)

[merefield (Robert)]

Este es un Componente de Tema, pero tiene la opción de añadir un plugin complementario.

	Resumen	El componente original Topic Preview que permite añadir imágenes y extractos (¡y más!) a la Lista de Temas, al tiempo que se puede configurar qué adiciones aparecen en qué lista.
	Enlace al Repositorio	GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub
	Guía de Instalación	Installing a theme or theme component
	Patrocinio	Por favor, considera convertirte en un patrocinador continuo de mi trabajo de código abierto a un nivel que se adapte a los recursos y necesidades de tu organización o tuyos, para garantizar que este componente reciba el mantenimiento que merece y siga funcionando para tu sitio en el futuro.

¿Disfrutas de este Componente de Tema? Por favor, dale en GitHub

Instalar este componente de tema

Funciona muy bien con Discourse Bars 🍻 🍸 (a sidebar framework)!

Descripción general

Topic List Previews te permite:

• Añadir miniaturas, extractos, avatares de participantes y estadísticas de temas a las listas de temas
• Usar filas tradicionales, mosaicos responsivos o diseños tipo masonry
• Configurar las vistas previas de forma independiente por lista de temas, categoría y etiqueta
• Controlar el tamaño, la resolución, las alternativas (fallbacks) y los límites de visualización de las miniaturas
• Destacar temas seleccionados con mosaicos destacados más grandes
• Añadir temas «Destacados» encima de las listas de temas, filtrados y ordenados según sea necesario
• Mejorar la búsqueda de página completa con miniaturas, extractos y detalles del autor
• Añadir un Muro de Usuarios a las páginas de actividad: la función «Cartera»

El Sidecar

Esto puede complementarse con el plugin ‘sidecar’: https://github.com/merefield/discourse-topic-previews-sidecar-pro

Actualmente, este es un repositorio privado al que tienen acceso mis patrocinadores de GitHub que contribuyen al menos con $7/mes.

para añadir las siguientes funciones:

• «Acciones»: marcar con marcador, compartir y dar me gusta directamente desde la lista de temas
• Selector de miniaturas: selecciona cualquier imagen de todo el tema
• Fondos de color dominante basados en la miniatura seleccionada
• Eliminación automática de los bordes negros de las miniaturas de YouTube
• Recreación opcional de miniaturas al reconstruir una publicación de tema
• Longitud de extracto configurable y eliminación opcional de enlaces
• Vistas previas de soluciones aceptadas y respuestas de preguntas y respuestas
• Opción para mostrar el extracto de la última publicación
• Opción para dirigir los clics en las vistas previas a la última publicación
• Vistas previas de miniaturas en los resultados de búsqueda
• Preferencia por usuario para miniaturas de menor resolución

Guía de instalación del plugin: Install plugins on a self-hosted site

Necesitas al menos el Componente de Tema; el Plugin es opcional.

Estos ajustes se pueden aplicar a todas las listas de temas seleccionadas o a nivel de sitio o específico de categoría.

Este conjunto de funciones flexible te permite crear una variedad de diferentes estilos de listas de temas, incluyendo

Estilo Básico

Ajustes relevantes

• miniatura de lista de temas
• extracto de lista de temas
• acción de lista de temas

Estilo Pinterest (Masonry) o «mosaicos»

Ajustes relevantes

• mosaicos de lista de temas
• miniatura de lista de temas
• extracto de lista de temas
• acción de lista de temas
• ancho de miniatura de lista de temas
• alto de miniatura de lista de temas

que tiene la opción de formato ancho (detrás del ajuste topic_list_tiles_wide_format):

Esto funciona de manera responsiva, por lo que se contraerá al formato masonry si no se le da suficiente ancho (y viceversa).

Imágenes Destacadas

Ajustes relevantes

• etiqueta de imágenes destacadas de lista de temas
• recuento de imágenes destacadas de lista de temas
• ancho destacado de lista de temas
• alto destacado de lista de temas
• título destacado de lista de temas
• extracto destacado de lista de temas
• orden destacado de lista de temas

Alternancia de Extractos:

Introduje esto hace un tiempo para usarlo con mi plugin de Resúmenes de Temas con IA.

Puedes usarlo para TLP:

GitHub - merefield/discourse-tc-excerpts-toggle: A small Discourse theme component that adds a...

Ejemplos en la vida real

• https://www.artofsm.art/

Soporte

No proporciono ningún soporte garantizado de forma gratuita. Puedo proporcionar soporte a empresas o instituciones que se inscriban en una de mis capas de patrocinio mensual GOLD o PLATINUM.

También hay una opción de búsqueda de errores única.

[raghukamath (Raghavendra Kamath)]

¿Hay alguna forma de que el orden de las imágenes destacadas se base en el momento en que se añade la etiqueta? Actualmente, trae la imagen destacada del tema que tiene actividad reciente, empujando hacia abajo las imágenes etiquetadas más recientes.

Por ejemplo, si tengo 10 imágenes y marco 5 de ellas como destacadas, ahora esas 5 se muestran en la barra superior. Si añado 5 etiquetas más, estas reemplazarán a las 5 existentes. Pero si alguno de los 5 temas anteriores tiene comentarios o publicaciones, esa imagen se pone al frente ahora.

[merefield (Robert)]

¿Etiqueta? No, pero existe esta opción para ordenar por fecha de creación:

[merefield (Robert)]

Advertencia: Voy a implementar un cambio en el diseño de Tiles (elemento) muy pronto. Si tienes algunos ajustes de CSS, es posible que necesiten ser… eh… ajustados:

Prometo que no haré esto muy a menudo, pero este cambio es para organizar las cosas y facilitar algunas nuevas funcionalidades que podrían aparecer en el futuro…

Actualmente, el cambio está en la rama beta.

[raghukamath (Raghavendra Kamath)]

Sí, esa opción ayuda un poco, pero si alguna de las publicaciones antiguas tiene alguna actualización, aparece al frente.

[merefield (Robert)]

Solo estoy utilizando las opciones nativas disponibles dentro de la API de Discourse (es un componente temático en el fondo, por lo que no puedes cambiar la API). Cuando tenga tiempo, volveré a revisar el orden. Sin embargo, esto surgió hace un tiempo e hice un cambio para ayudar a uno de los usuarios. Topic List Previews (legacy) - #1154 by merefield. Me sorprende que esto no funcione como se especifica. ¿Esperarías que el created_at de un tema permanezca estático a pesar de las nuevas publicaciones? ¿Estás seguro de que has cambiado la configuración y has actualizado el navegador?

[merefield (Robert)]

@raghukamath Lo acabo de probar y parece que funciona como se esperaba. Todavía no cambiará el orden en respuesta a nuevas publicaciones y respeta la fecha created_at. Por favor, actualiza tu navegador e inténtalo de nuevo.

[raghukamath (Raghavendra Kamath)]

No hay problema. Probaré más. Quizás me confundí debido al comportamiento cuando la opción está habilitada. Lamento molestarte tanto.

Otro problema que mis miembros destacaron es que la corrección CSS del color del tema no leído y leído no se aplica a los navegadores móviles.

[merefield (Robert)]

@raghukamath

Otro problema que mis miembros destacaron es que la corrección CSS del color del tema no leído y leído no se aplica a los navegadores móviles.

Sí, eso todavía estaba pendiente como se indicó anteriormente. Intentaré enviarlo con la actualización del diseño descrita anteriormente, probablemente dentro de unos días.

[flash]

Hola, estaba intentando trabajar con el plugin obsoleto de git cuando no pude anular el CSS en la miniatura móvil. Siguió revirtiendo a una altura de 80px. Empecé a buscar y vi que se trasladó al componente. ¿Tendré el mismo problema y necesitaré clonar el componente para cambiarlo o hay otra solución? Quiero que el móvil tenga el ancho completo en el navegador móvil.

[merefield (Robert)]

¿No se adaptaría el diseño aquí a tus necesidades: Topic List Previews (TLP) - #4 by merefield a tus necesidades? Las nuevas fichas tienen miniaturas de ancho completo. Esto se encuentra actualmente en la rama beta. Instálala si lo deseas como un Componente de Tema adicional y pruébala. Recuerda especificar la rama al instalar y editar el nombre del Componente de Tema para que quede claro que es la Beta.

[flash]

Definitivamente lo haría. Ahora lo tengo a todo lo ancho como quería. Gracias.

[merefield (Robert)]

He fusionado la rama beta:

• el estilo interno de las fichas se ha modernizado y ordenado. Las miniaturas ahora ocupan todo el ancho de la columna.
• hay una serie de simplificaciones de CSS
• el móvil ha tenido algunas mejoras menores de diseño para los que no son fichas.
• los títulos de las fichas ahora también deberían reflejar las visitas anteriores en el móvil.

Layout changes

[sofi.pocketful (Sofi)]

Hola,

¡Gracias por este increíble componente! Me encanta el diseño

Soy relativamente nuevo en Discourse y no sé mucho sobre los términos técnicos.

He tenido problemas con que las imágenes no se muestren en el componente de lista. Por alguna razón, las imágenes se muestran en la vista previa del componente, pero cuando cargo el real, las imágenes ya no están allí.

^ Esta es la vista previa del componente

[sofi.pocketful (Sofi)]

^ Así se ve cuando cargo la página real

Ahora, creo que tiene algo que ver con mi configuración de Discourse??

¿Hay alguna configuración específica que deba activarse para que este componente funcione? Realmente no sé por qué no está funcionando como debería…

[merefield (Robert)]

Hola, gracias por tu interés.

Un par de cosas:

• Si nunca has instalado un componente o plugin similar antes, puede haber un retraso antes de que se generen todas las miniaturas. Este es un proceso por lotes y lleva tiempo. Este proceso debería comenzar a ejecutarse en segundo plano automáticamente una vez que hayas instalado el componente y lo hayas añadido a un tema. Revisa tu cola de sidekiq. Es posible que veas muchos trabajos en cola.
• No es necesariamente compatible con cualquier tema, siempre existe la posibilidad de un conflicto: solo está desarrollado y diseñado con el tema predeterminado. Por favor, pruébalo en tu sitio solo con el tema predeterminado inicialmente. Puedes adaptar su apariencia, pero eso requerirá basarse en los artefactos especiales de este componente.

[sofi.pocketful (Sofi)]

Hola Robert:

¡Gracias por tu respuesta! Probaré lo que sugeriste en mi sitio

[flash]

Hola Robert. Estoy incorporando una tabla con JavaScript de terceros debajo del encabezado y el script rompe las vistas previas cuando lo uso en un componente. ¿Alguna idea para una solución alternativa?

[merefield (Robert)]

Si hay un error en ese script que impide la ejecución de javascript, podría romper el código de diseño de TLP que requiere que javascript funcione de la mejor manera. Busque errores rojos en la consola de su navegador.

[raghukamath (Raghavendra Kamath)]

@merefield

¿Acabo de probar esto y parece que funciona como se esperaba? Todavía no cambiará el orden en respuesta a nuevas publicaciones y respeta la fecha created_at. Por favor, actualiza tu navegador e inténtalo de nuevo.

Hola, activé la opción de fecha de creación como sugeriste. De alguna manera resuelve los problemas. pero creo que en el plugin anterior el orden se establecía según la fecha en que se etiquetaba la publicación. Además, el problema de que las imágenes antiguas aparezcan en la página principal ante cualquier actualización o respuesta al tema hace que sea difícil que una imagen reciente permanezca destacada. Supongamos que hago una imagen destacada y si alguna publicación antigua de hace un año recibe una nueva respuesta, la página principal tendrá la imagen destacada de esa publicación. Si se responden muchas publicaciones antiguas, la imagen destacada recién etiquetada desaparece.