Previsualizaciones de la lista de temas (TLP)

Este es un componente de tema pero tiene la opción de agregar un complemento complementario.

|||
-|-|-|
:information_source: | Resumen | El componente original de vista previa de temas que le permite agregar imágenes y extractos (¡y más!) a la lista de temas mientras puede configurar qué adiciones aparecen en qué lista.
:hammer_and_wrench: | Enlace al repositorio | GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists
:open_book: | Guía de instalación | Installing a theme or theme component
:heart: | Patrocinio | Por favor, considere convertirse en un patrocinador continuo de mi trabajo de código abierto a un nivel que se adapte a sus recursos y necesidades, o a los de su organización, para garantizar que este componente reciba el mantenimiento que merece y continúe funcionando para su sitio en el futuro.

¿Disfrutando de este componente de tema? Por favor, dale :star: en GitHub

Instalar este componente de tema

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

Descripción general

Las vistas previas de la lista de temas le permiten:

  • Agregar imágenes, extractos y estadísticas de temas a los elementos de la lista de temas; y
  • Cambiar el diseño y el estilo de los elementos de la lista de temas
  • Agregar temas ‘Destacados’ encima de las listas de temas y los temas.
  • Agregar Muro de Usuario a la página de actividad del Usuario (también conocida como función de ‘Portafolio’).

El Sidecar

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

para agregar las siguientes características:

  • ‘acciones’ (marcar, enlazar y dar me gusta desde la Lista de Temas)
  • Selector de miniaturas en el Editor de Metadatos del Tema. (Seleccione cualquier miniatura de todo el Tema usando una interfaz de usuario simple)
  • Coloración del fondo basada en el color dominante de la miniatura
  • Procesamiento de miniaturas de YouTube para eliminar los bordes negros (crítico para determinar el mejor color dominante).
  • Opción para recrear miniaturas al reconstruir la Publicación del Tema para permitirle administrar rápidamente la eliminación de bordes en una base de tema individual.

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

Necesita al menos el Componente de Tema, el Plugin es opcional.

Estas configuraciones se pueden aplicar a todas o a listas de temas seleccionadas, a nivel de sitio o específicas de categoría.

Este conjunto de características flexibles le permite crear una variedad de estilos diferentes de listas de temas, incluyendo

Estilo Básico

Configuraciones relevantes
  • miniatura de la lista de temas
  • extracto de la lista de temas
  • acción de la lista de temas

Estilo Pinterest (Masonry) también conocido como ‘tiles’

Configuraciones relevantes
  • tiles de la lista de temas
  • miniatura de la lista de temas
  • extracto de la lista de temas
  • acción de la lista de temas
  • ancho de miniatura de la lista de temas
  • alto de miniatura de la lista de temas

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

Esto funciona de forma receptiva, por lo que colapsará en formato masonry si no se le da suficiente ancho (y viceversa).

Imágenes Destacadas

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

Alternar Extractos:

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

Puedes usarlo para TLP:

Ejemplos en la naturaleza :seedling:

Soporte

No proporciono ningún soporte garantizado de forma gratuita. Puedo proporcionar soporte a empresas o instituciones que se suscriban a uno de mis niveles de patrocinio mensual ORO o PLATINO.

También existe una opción de caza de errores única.

54 Me gusta

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

3 Me gusta

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

image

1 me gusta

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.

3 Me gusta

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

2 Me gusta

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?

3 Me gusta

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

3 Me gusta

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.

1 me gusta

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.

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.

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

1 me gusta

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

1 me gusta

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.
4 Me gusta

Hola,

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

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

1 me gusta


^ 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…

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.
1 me gusta

Hola Robert:

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

1 me gusta

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?

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.

1 me gusta

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.