Vista previa de la lista de temas (TLP)

[merefield (Robert)]

Este es un Componente de Tema pero tiene la opción de agregar un plugin complementario.

	Resumen	El componente de Vista Previa de Tema original que te permite agregar imágenes y extractos (¡y más!) a la Lista de Temas mientras puedes configurar qué adiciones aparecen en qué lista.
	Enlace del 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 recurrente de mi trabajo de código abierto en un nivel que se ajuste a los recursos y necesidades de ti o de tu organización para asegurar que este componente reciba el mantenimiento que merece y continúe funcionando para tu sitio en el futuro.

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

Instalar este componente de tema

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

Descripción General

Vista Previa de Lista de Temas te permite:

• Agregar miniaturas, extractos, avatares de participantes y estadísticas de temas a las listas de temas
• Usar filas tradicionales, baldosas responsivas o diseños estilo mampostería (masonry)
• Configurar vistas previas de forma independiente por lista de temas, categoría y etiqueta
• Controlar el tamaño de la miniatura, resolución, alternativas y límites de visualización
• Resaltar temas seleccionados con baldosas destacadas más grandes
• Agregar temas “Destacados” encima de las listas de temas, filtrados y ordenados según sea necesario
• Mejorar la búsqueda en página completa con miniaturas, extractos y detalles del autor
• Agregar un Muro de Usuario a las páginas de actividad - la función “Portafolio”

El Complemento (Sidecar)

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

Actualmente es un repositorio privado al que tienen acceso los patrocinadores de GitHub que contribuyan con al menos $7/mes.

para agregar las siguientes características:

• ‘Acciones’ — marcar como favorito, 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 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 solución aceptada y respuestas de preguntas y respuestas
• Opción para mostrar el extracto de la última publicación
• Opción para dirigir los clics de la vista previa 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 pueden aplicarse a todas o a listas de temas seleccionadas a nivel de todo el sitio o específico de categoría.

Este conjunto de características 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 (Mampostería) aka ‘baldosas’

Ajustes relevantes

• baldosas 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 opción de formato ancho (detrás del ajuste topic_list_tiles_wide_format):

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

Imágenes Destacadas

Ajustes relevantes

• etiqueta de imágenes destacadas de lista de temas
• conteo 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

Activación/Desactivación de Extractos:

Introduje esto hace un tiempo para usarlo con mi plugin 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 Naturaleza

• StarZen - Un sitio de fans no oficial de Star Citizen
• https://www.artofsm.art/

Soporte

No proporciono ningún soporte garantizado de forma gratuita. Puedo proporcionar soporte a empresas o instituciones que se registren en uno de mis niveles de Patrocinio mensual GOLD o PLATINUM.

También hay una opción de caza 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.