Embedding a list of Discourse Topics in another site

Announcements
59

I do not think that this is possible. The Discourse code that is used for retrieving the topics is only pulling in the latest topic lists. The available filters that I am aware of for ordering the lists are replies, views, activity, likes. You could try ordering the lists with one of these filters to select the best topics. For example:

<d-topics-list discourse-url="http://localhost:3000" category="14" per-page="5" order="replies"></d-topics-list>

The font that is used in the iframe is set on Discourse. On the latest version of Discourse I’m running into an issue with setting the font when I embed a topic list on my WordPress site. I’m testing this locally, not on a production site, so that could be related to the issue. What I’m finding is that this style is being passed for the iframe’s font:

font-family: var(--font-family);

That style is being set on Discourse, but WordPress doesn’t have access to the variable, so the font is being set as Times New Roman on my site. I’ll look into this issue some more. (Edit: the issue with setting the font is due to recent changes to Discourse. We’ll get this fixed.)

This can be tricky. The iframe that is created is inside of the d-topics-list element that you add to the page. Setting the value to an explicit width in my website’s CSS is working for me. I think this could be improved though:

d-topics-list iframe{
	width: 700px !important;
	margin-left: auto;
	margin-right: auto;
}
6 Likes
61

In the top left corner of the iframe there is a number (e.g. 110.5ms) which leads to a link to /embed/topics. Is there any way to get rid of this?

Edit: The answer is that it’s only shown to the “discourse developer”: What is this box at the upper left displaying timings in milliseconds when I am logged in as admin? :slight_smile:

7 Likes
75

Hi there! I’m trying to embed posts on a WordPress site and the embedding part I got working. Is there a way to make the mobile view a bit more appealing? If posts have images, the layout of the columns with images get squeezed together, a simple

@media (max-width: 768px) {
	.topics-list .topic-list-item .topic-column-wrapper {
	    flex-direction: column;
	}
}

would fix this issue, any chance something along those lines could be implemented?

Cheers, M

3 Likes
76

You should be able to add your own custom css here when editing your theme. Is there a reason you’d want it in core?

2 Likes
77

oh I didn’t realize that this will load my discourses theme css, let me try that and get back to you!

2 Likes
78

There is a section under themes for embedding for this purpose!

4 Likes
79

Hi, I’ve already embedded a list of topics on my website, but now I’m trying to feature one topic only based on tag, so I successfully embedded another list (with per-page=1) but the problem is that I cannot add CSS classes or ID so there is absolutely no difference between the first list and this one.
That means that even a simple thing like using a different background color for the one of the embedded lists is impossible.

Is there a workaround at all?

I’d really appreciate your help.

2 Likes
80

thanks @eviltrout, adding that code to “Embedded CSS” did the trick!

2 Likes
82

There is currently no way to add different CSS rules to different embeds. You can only add custom styling that applies to all embeds.

4 Likes
83

I’m seeing the following error while embedding latest topics here https://vceliquidrecipes.com/

includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168 POST https://vapingcommunity.co.uk/mini-profiler-resources/results 404

(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168
fetchResults @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:169
initPopupView @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:763
doInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1050
sc.onload.sc.onreadystatechange @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1065
load (async)
load @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1061
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1109
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1089
setTimeout (async)
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1085
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1118
(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1463

My embed code looks like:

<d-topics-list discourse-url="https://vapingcommunity.co.uk" status="open" order="replies" per-page="10"></d-topics-list>
2 Likes
84

Those errors look like they’re from mini profiler and probably not related to what a regular user sees. I visited your site and saw a list of topics with no errors.

4 Likes
85

Oh, so is that normal, they would show in the logs, correct?

2 Likes
86

I’m not sure it’s normal but it’s nothing to be concerned about. Most users don’t have access to mini profiler so it’s probably only showing that when you do it.

3 Likes
87

Ok, thank you for your help, it’s much appreciated as always, keep up the great work

2 Likes
88

Greetings, thank you for your hard work on this.

On Firefox and Chrome, the list doesn’t work as expected for us. Although we set it up to show 10 topics, it only shows 4.

On Chrome, we observe this js error when we embed the list:

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.
    at u (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:105)
    at window.onload (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:515)

Interestingly this doesn’t happen on Safari.

The list is embedded on this website: https://rebetiko.sealabs.net (at the end of the page, if you want to test it for yourselves).

4 Likes
89

Can anybody of you reproduce this issue? :slight_smile:

CC: @JimPas, @simon , @Vaping_Community

3 Likes
90

You have 10 topic links on the page, 6 are hidden for some reason, I have no idea about that error

Adding a height to the iframe works to show the hidden topic links

d-topics-list iframe {
    height: 380px;
    width: 700px !important;
    margin-left: auto;
    margin-right: auto;
}
4 Likes
91

I had a problem with this too. Sometimes it looked fine. Sometimes the list of topics was cut short (as if it was decided by number of pixels rather than number of topics) and the font wasn’t as expected (I can’t remember the details). I switched to using the Discourse RSS feed instead. I only use Chrome and didn’t suspect that it might have been a problem just with Chrome.

3 Likes
92

Hi there!

Is there a way to exclude topics from the list?

2 Likes
93

You could use tags for that maybe? tag the topics you want to appear in the list and filter by that?

5 Likes