# Embedding a list of Discourse Topics in another site

**URL:** https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911
**Category:** Announcements
**Tags:** embedding
**Created:** [15 באוגוסט,‏ 2019,‏ 5:53pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911 "2019-08-15T17:53:02Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![Shenron\_segamag](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shenron_segamag/32/188149_2.png) [@Shenron\_segamag](https://meta.discourse.org/u/Shenron_segamag)
#### Post date: [23 במרץ,‏ 2021,‏ 7:13pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/95 "2021-03-23T19:13:55Z")

</div>

Hi,

I was wondering if there was a way to display the avatar of the latest post author, and the category of the posts, just like on the front page of the forum, instead of only the topic titles ?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [23 במרץ,‏ 2021,‏ 7:25pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/96 "2021-03-23T19:25:50Z")

</div>

If you pass `template=complete` there is a lot more info in the embed:

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/c/8c885050f1bff008823a2b104d187a7b88774431.png)

---

<div class="post-metadata">

### Author: ![Shenron\_segamag](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shenron_segamag/32/188149_2.png) [@Shenron\_segamag](https://meta.discourse.org/u/Shenron_segamag)
#### Post date: [23 במרץ,‏ 2021,‏ 7:50pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/97 "2021-03-23T19:50:25Z")

</div>

Wow, thanks, that’s.. too many informations 😆 Is there something in between, or should I hide the unnecessary informations with custom css ?

Besides, this displays the topic author, not the latest post author.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [23 במרץ,‏ 2021,‏ 7:59pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/98 "2021-03-23T19:59:06Z")

</div>

> [@Shenron\_segamag](#):
>
> should I hide the unnecessary informations with custom css ?

The complete template wraps all the information in containers as it’s expected that each site will customize it to match their own design with CSS.

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [23 במרץ,‏ 2021,‏ 9:52pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/99 "2021-03-23T21:52:04Z")

</div>

> [@Falco](#):
>
> If you pass `template=complete` there is a lot more info in the embed:

This is great!

Is it possible to change its width?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [23 במרץ,‏ 2021,‏ 10:44pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/100 "2021-03-23T22:44:51Z")

</div>

It’s a fluid container, it will adapt to the width of the parent element.

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [23 במרץ,‏ 2021,‏ 10:49pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/101 "2021-03-23T22:49:03Z")

</div>

On my site it doesn’t. It’s too wide for the div it’s in, unfortunately.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [23 במרץ,‏ 2021,‏ 10:51pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/102 "2021-03-23T22:51:32Z")

</div>

Double check the markup, hide and position the elements properly, it should work in any container:

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [24 במרץ,‏ 2021,‏ 12:22am UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/103 "2021-03-24T00:22:04Z")

</div>

Sadly that doesn’t work on my website. I think maybe the CSS stuff in the responsive framework is confusing it. Is there any way of changing the width (e.g. to be 90% of its current value, or even some number of pixels less wide)?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [24 במרץ,‏ 2021,‏ 12:26am UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/104 "2021-03-24T00:26:26Z")

</div>

Did you try using CSS like:

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

```

?

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [24 במרץ,‏ 2021,‏ 12:33am UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/105 "2021-03-24T00:33:50Z")

</div>

That doesn’t work. If I edit the iframe tag in Chrome’s F12 console to include `width="100%"` it works fine though… is there any way of making that change?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [23 באפריל,‏ 2021,‏ 7:50pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/106 "2021-04-23T19:50:34Z")

</div>

I added an example of how to add custom css to the list on the OP.

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [23 באפריל,‏ 2021,‏ 9:26pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/107 "2021-04-23T21:26:44Z")

</div>

Thanks. I tried this. It does make the embedded topics display in a grid format. Unfortunately the width of the grid (i.e. two topics) is still the same width as before - nowhere near 100%.

The CSS above (d-topics-list iframe) doesn’t change the iframe at all. If only it could change it to have “width: 100%”…

I’ve tried it in an otherwise blank HTML document and it still is narrow. Any more ideas? 🙂

---

<div class="post-metadata">

### Author: ![adamgpope](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/adamgpope/32/121658_2.png) [@adamgpope](https://meta.discourse.org/u/adamgpope)
#### Post date: [12 במאי,‏ 2021,‏ 1:02pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/108 "2021-05-12T13:02:49Z")

</div>

Loving this embed… 💖

Couple of issues, and a feature request…:

- If I add the `allow-create="true"` and the `category="4"` parameters, when I click on the ‘+ Create new topic’ button the ‘Add new topic’ modal/pop-up doesn’t spin up. Is it supposed to?
- If I add the `allow-create="true"` and the `tags="random-tag"` parameters, when I click on the ‘+ Create a new topic’ button I get taken to the list of topics filtered to random-tag - but the tag drop-down doesn’t display ‘random-tag’ and when I click ‘Add new topic’ the tag hasn’t been pre-filled
- Can we get the first, say, 100 words of the post into the complete theme?

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [12 במאי,‏ 2021,‏ 1:13pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/109 "2021-05-12T13:13:11Z")

</div>

> [@adamgpope](#):
>
> Can we get the first, say, 100 words of the post into the complete theme?

This would be good!

Also I’m still keen to sort out the width thing… 🙂

---

<div class="post-metadata">

### Author: ![adamgpope](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/adamgpope/32/121658_2.png) [@adamgpope](https://meta.discourse.org/u/adamgpope)
#### Post date: [12 במאי,‏ 2021,‏ 2:36pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/110 "2021-05-12T14:36:35Z")

</div>

> [@Jonathan5](#):
>
> Also I’m still keen to sort out the width thing…

The CSS needs adding to your site, rather than Discourse’s embedded, CSS. So you’d have something like this:

```
<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>

```

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [12 במאי,‏ 2021,‏ 3:19pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/111 "2021-05-12T15:19:04Z")

</div>

Thank you very much. That seems obvious now. I went from failing to style the iframe’s internal CSS (trying within my site) to failing to style the iframe itself (trying within Discourse). I’ll give this a go and report back!

Update: Your CSS worked - thank you very much.

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [12 במאי,‏ 2021,‏ 3:52pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/112 "2021-05-12T15:52:34Z")

</div>

> [@adamgpope](#):
>
> If I add the `allow-create="true"` and the `category="4"` parameters, when I click on the ‘+ Create new topic’ button the ‘Add new topic’ modal/pop-up doesn’t spin up. Is it supposed to?

I’ve just tried this out. In my case it’s `category=5` as that’s the category number I’m embedding. It doesn’t show the popup, but opens a new tab with URL `https://forum.example.com/new-topic?category_id=5`. Maybe you’ve got a browser setting that blocks this sort of “popup”?

---

<div class="post-metadata">

### Author: ![adamgpope](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/adamgpope/32/121658_2.png) [@adamgpope](https://meta.discourse.org/u/adamgpope)
#### Post date: [12 במאי,‏ 2021,‏ 4:44pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/113 "2021-05-12T16:44:27Z")

</div>

Thanks for confirming it’s working for you, @Jonathan5. I disabled the [discourse-tag-sidebar](https://meta.discourse.org/t/discourse-tag-sidebars/111114) theme component, and now the pop-up’s working 🕶

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [12 במאי,‏ 2021,‏ 5:46pm UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/114 "2021-05-12T17:46:36Z")

</div>

> [@adamgpope](#):
>
> Can we get the first, say, 100 words of the post into the complete theme?

I will take a look into this 👀

[Previous page](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911.md?page=2)

[Next page](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911.md?page=4)
