Incrustar una lista de temas de Discourse en otro sitio

Hola,

Me preguntaba si hay alguna forma de mostrar el avatar del autor del último post y la categoría de los posts, tal como en la página principal del foro, en lugar de solo los títulos de los temas.

3 Me gusta

Si pasas template=complete, hay mucha más información en el embed:

3 Me gusta

¡Vaya, gracias, eso es… demasiada información :laughing:! ¿Hay algo intermedio, o debería ocultar la información innecesaria con CSS personalizado?

Por cierto, esto muestra al autor del tema, no al autor del último mensaje.

3 Me gusta

La plantilla completa envuelve toda la información en contenedores, ya que se espera que cada sitio la personalice para que coincida con su propio diseño mediante CSS.

3 Me gusta

¡Esto es genial!

¿Es posible cambiar su ancho?

2 Me gusta

Es un contenedor fluido, se adaptará al ancho del elemento padre.

2 Me gusta

En mi sitio no ocurre. Por desgracia, es demasiado ancho para el div en el que está.

2 Me gusta

Verifica dos veces el marcado, oculta y posiciona los elementos correctamente; debería funcionar en cualquier contenedor:

2 Me gusta

Lamentablemente, eso no funciona en mi sitio web. Creo que quizás los estilos CSS del framework responsivo están causando confusión. ¿Existe alguna forma de cambiar el ancho (por ejemplo, al 90 % de su valor actual o incluso reducirlo en algunos píxeles)?

2 Me gusta

¿Has probado usar CSS como:

d-topics-list iframe {
    padding: 0 5%;
}

?

2 Me gusta

Eso no funciona. Sin embargo, si edito la etiqueta iframe en la consola F12 de Chrome para incluir width="100%", funciona perfectamente… ¿hay alguna manera de hacer ese cambio?

2 Me gusta

He añadido un ejemplo de cómo agregar CSS personalizado a la lista en el OP.

4 Me gusta

Gracias. Lo intenté. Sí hace que los temas incrustados se muestren en formato de cuadrícula. Desafortunadamente, el ancho de la cuadrícula (es decir, dos temas) sigue siendo el mismo que antes: nada cerca del 100%.

El CSS anterior (d-topics-list iframe) no cambia el iframe en absoluto. ¡Ojalá pudiera cambiarlo para que tenga “width: 100%”…

Lo he probado en un documento HTML en blanco y aún así es estrecho. ¿Tienes más ideas? :slight_smile:

3 Me gusta

¡Me encanta este incrustado… :sparkling_heart:

Un par de problemas y una solicitud de función…:

  • Si agrego los parámetros allow-create="true" y category="4", al hacer clic en el botón ‘+ Crear nuevo tema’, el modal/ventana emergente ‘Agregar nuevo tema’ no se abre. ¿Se supone que debería hacerlo?
  • Si agrego los parámetros allow-create="true" y tags="random-tag", al hacer clic en el botón ‘+ Crear un nuevo tema’ me llevan a la lista de temas filtrada por random-tag, pero el menú desplegable de etiquetas no muestra ‘random-tag’ y, al hacer clic en ‘Agregar nuevo tema’, la etiqueta no se ha prellenado.
  • ¿Podemos incluir las primeras, digamos, 100 palabras de la publicación en el tema completo?
4 Me gusta

¡Eso sería genial!

Además, todavía tengo muchas ganas de solucionar lo del ancho… :slight_smile:

2 Me gusta

El CSS debe agregarse a tu sitio, no al CSS incrustado de Discourse. Así que tendrías algo como esto:

<html>
  <head>
    <script src="https://jonathan5-discourse.com/javascripts/embed-topics.js"> 
    </script>
    <style>
      d-topics-list iframe{
        width: 100%!important;
        }
    </style>
  </head>
  <body>
    <d-topics-list discourse-url="https://jonathan5-discourse.com" category="5" per-page="5"></d-topics-list>
  </body>
</html>
6 Me gusta

¡Muchas gracias! Ahora parece obvio. Pasé de no poder aplicar estilos al CSS interno del iframe (intentándolo desde mi sitio) a no poder aplicar estilos al propio iframe (intentándolo desde Discourse). ¡Lo probaré y te daré noticias!

Actualización: Tu CSS funcionó, ¡muchas gracias!

4 Me gusta

Acabo de probarlo. En mi caso es category=5, ya que ese es el número de categoría que estoy incrustando. No muestra la ventana emergente, sino que abre una nueva pestaña con la URL https://forum.example.com/new-topic?category_id=5. ¿Quizás tienes una configuración del navegador que bloquea este tipo de «ventanas emergentes»?

2 Me gusta

¡Gracias por confirmar que te funciona, @Jonathan5! He desactivado el componente de tema discourse-tag-sidebar y ahora la ventana emergente funciona :sunglasses:

3 Me gusta

Echaré un vistazo a esto :eyes:

4 Me gusta