Embedding a list of Discourse Topics in another site

More fields? Just add template="complete" to the element and you get all the fields:

Here is how it looks:

It’s all flexbox, so you can do a lot of reordering with CSS.

6 Likes

Cool, if some does the job you’r welcome to share the solution :wink:

is this intended? not sure why the “Something went wrong” message appears.

(and in other news, dragging to upload image is not working for me anymore. instead of uploading as usual, it displays the image in the browser and I have to hit back to get back to my post. not sure this is just here in this topic or generally - will have to test)

If your browser is having trouble with the iframe, check it on the source on https://codepen.io/xfalcox/pen/bGbXpbr

1 Like

Could anyone share a css template for an example how to style it?

Eg I would like to change:

https://studmed.dk/embed/topics?discourse_embed_id=de-51rb9nq87&category=5&per_page=5&template=complete

To this:

http://colormag.liljefred.dk/

Here you have the icons:

<i class="fa fa-heart-o"></i>

and

<i class="fa fa-comment"></i>

And you have box around every post…

Is there a way to apply CSS when the widget is embedded in another domain?

Yes, just make sure to add the styles in the Embedded area in the active theme.

5 Likes

Thanks, that works. :slight_smile:

2 Likes

I managed to embed the latest posts on my website. But below issues:

  1. How to show the embed in full width or 100%?

Also tried to add this CSS into the ‘Embed CCS’ but on my website, but it still shows small like a mobile device.

d-topics-list iframe {
width: 100%;
}

  1. How to show the replies views and activity like below:

I would use chrome’s inspector to find out why that element is not using the full width and fix that with your custom CSS.

As for the other columns, @techAPJ added support for those. @techAPJ could you explain how to display them?

4 Likes

You can see more topic details in embed using the parameter ?template=complete. So the URL for the embed will be forum.example.com/embed/topics?template=complete.

3 Likes

@techAPJ When I tried to add below code then nothing will display on the module position.

<d-topics-list discourse-url="https://hoteltalk.app/embed/topics?template=complete" per-page="10">

Is there any document or article with some examples on how to format it correctly?