# Layouts Plugin

**URL:** https://meta.discourse.org/t/layouts-plugin/55208
**Category:** Plugin
**Tags:** pavilion, broken
**Created:** [January 5, 2017, 9:41am UTC](https://meta.discourse.org/t/layouts-plugin/55208 "2017-01-05T09:41:13Z")
**Posts on this page:** 20
**Page:** 5

<div class="post-metadata">

### Author: ![exetico](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/exetico/32/119962_2.png) [@exetico](https://meta.discourse.org/u/exetico)
#### Post date: [August 27, 2017, 1:13pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/83 "2017-08-27T13:13:59Z")

</div>

Oh, i see. Thanks for the fast reply, anyways.

I’m looking for the right solution to implement some HTML-content as an sidebar, and i guess the best thing would be to use a plugin in combination with Custom Layouts 🙂

@angus - Are you aware of any plugins allowing this, combined with your awesome plugin?

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [August 27, 2017, 2:15pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/84 "2017-08-27T14:15:49Z")

</div>

Here you go:

[https://github.com/angusmcleod/layouts-custom-html](https://github.com/angusmcleod/layouts-custom-html)

Works as you would expect a ‘custom html’ widget to. e.g.

 ![29 PM](https://global.discourse-cdn.com/meta/original/3X/4/7/47a407602916f9e6d9e92d49eb99047fc30ca375.png)

 ![41 PM](https://global.discourse-cdn.com/meta/original/3X/d/7/d7a3da90f1f537a42f185f5fbd8c12b54f5eb8c2.jpg)

Although, the better approach would be building the html by making your own widget file and using virtual dom helpers.

This would be the equivalent of the above example:

```plaintext
import { createWidget } from 'discourse/widgets/widget';
import { h } from 'virtual-dom';

export default createWidget('custom-html', {
  tagName: 'div.custom-html',

  html() {
    return h('iframe', { height: 1000, width: 500, src: 'http://www.milliondollarhomepage.com/'})
  }
})

```

@Ham I suspect the reason it didn’t work for you is a load order issue. If you change the name of the plugin folder to something alphabetically greater than `discourse-layouts`, it will work. I’ll address the underlying issue later this week.

---

<div class="post-metadata">

### Author: ![Ham](https://avatars.discourse-cdn.com/v4/letter/h/ecb155/32.png) [@Ham](https://meta.discourse.org/u/Ham)
#### Post date: [August 30, 2017, 11:29am UTC](https://meta.discourse.org/t/layouts-plugin/55208/85 "2017-08-30T11:29:07Z")

</div>

Hey @angus thanks. I have a question. If I use this one and then can assign it to left sidebar would it end up under with profile plugin you have there without issues? I already changed my css to how I like but I do have room under that plugin. I just want to make sure it doesnt affect anything else again.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [August 30, 2017, 12:38pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/86 "2017-08-30T12:38:19Z")

</div>

@Ham I can’t 100% guarantee it won’t affect your css unfortunately. I assume you’re using some custom css and this plugin significantly affects the UI.

If you’re concerned about that, I suggest you spin up a test server to test it out on.

In response to your question, you can order the sidebar widgets however you like.

[Example is live my sandbox](https://discourse.angusmcleod.com.au/).

Settings:

 ![Screenshot at Aug 30 20-30-10](https://global.discourse-cdn.com/meta/original/3X/c/6/c689788c98b19cfd070e01666cf1066bd02f1f57.png)

 ![Screenshot at Aug 30 20-36-59](https://global.discourse-cdn.com/meta/original/3X/7/c/7c6805cd2d441bdee9f809329a52dcc248128ab7.png)

End result:

 ![58 PM](https://global.discourse-cdn.com/meta/original/3X/b/8/b825c49074dafec50d81ad27035b886166e104ea.png)

---

<div class="post-metadata">

### Author: ![George\_Morris](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/george_morris/32/78284_2.png) [@George\_Morris](https://meta.discourse.org/u/George_Morris)
#### Post date: [September 8, 2017, 12:27am UTC](https://meta.discourse.org/t/layouts-plugin/55208/88 "2017-09-08T00:27:38Z")

</div>

I wish I could use this plugin but I have a base install and this is my only pluggin, yet when I enable it I get nothing on the right side.

 ![38 PM](https://global.discourse-cdn.com/meta/original/3X/3/1/31d9f48058ce0dd4759cfe0b7b0f8215993b4fb2.png)

---

<div class="post-metadata">

### Author: ![George\_Morris](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/george_morris/32/78284_2.png) [@George\_Morris](https://meta.discourse.org/u/George_Morris)
#### Post date: [September 8, 2017, 12:28am UTC](https://meta.discourse.org/t/layouts-plugin/55208/89 "2017-09-08T00:28:14Z")

</div>

My settings

 ![02 PM](https://global.discourse-cdn.com/meta/original/3X/2/8/2882db2b4038deed446ac7b5718d375a3cb47e86.png)

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [September 10, 2017, 3:13am UTC](https://meta.discourse.org/t/layouts-plugin/55208/90 "2017-09-10T03:13:15Z")

</div>

> [@George\_Morris](#):
>
> I wish I could use this plugin but I have a base install and this is my only pluggin, yet when I enable it I get nothing on the right side.

Hey George. Looks like it’s working normally.

Any widgets you want to appear in the sidebars you have to add as separate plugins. For example, the [Profile widget](https://github.com/angusmcleod/discourse-profile-widget).

Also, if you have the right sidebar enabled globally, it overrides the specific routes added in `layouts sidebar right enabled`.

---

<div class="post-metadata">

### Author: ![George\_Morris](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/george_morris/32/78284_2.png) [@George\_Morris](https://meta.discourse.org/u/George_Morris)
#### Post date: [September 11, 2017, 7:22pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/91 "2017-09-11T19:22:31Z")

</div>

Awesome, thank you. Is there a list of the widgets that can be used for this?

---

<div class="post-metadata">

### Author: ![George\_Morris](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/george_morris/32/78284_2.png) [@George\_Morris](https://meta.discourse.org/u/George_Morris)
#### Post date: [September 11, 2017, 8:18pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/92 "2017-09-11T20:18:32Z")

</div>

Sorry if I sound like a newbie (I am) but why won’t my Latest and New etc.. show in the side bar? What am I missing?

 ![36 PM](https://global.discourse-cdn.com/meta/original/3X/9/8/98d15a0f2df1ce314cc600661ba31f8d234c893d.png) ![30 PM](https://global.discourse-cdn.com/meta/original/3X/c/6/c66328396cc7078769d40ea32447e0a1b5f4d923.png)

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [September 12, 2017, 12:41am UTC](https://meta.discourse.org/t/layouts-plugin/55208/93 "2017-09-12T00:41:12Z")

</div>

`layouts sidebar right enabled` lets you select routes on which the sidebar appears. That setting doesn’t affect the content of the sidebars themselves.

Moreover, as mentioned above, as you also have `layouts sidebar right enabled global` turned on, the setting `layouts sidebar right enabled` will not matter. When turned on,`layouts sidebar right enabled global` overrides `layouts sidebar right enabled` and applies sidebars globally.

Neither setting affects the content of your sidebars.

Separately, there are also two settings that affect the visibility of the navigation buttons: `layouts list navigation disabled` and `layouts list navigation disabled global`. They follow the same pattern, i.e. the first lets you select particular routes on which navigation is not visible, and the second turns off the navigation buttons globally.

Those settings also don’t affect the content of your sidebars.

The content of the sidebars is determined by the widgets (in separate plugins) that you add.

---

<div class="post-metadata">

### Author: ![George\_Morris](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/george_morris/32/78284_2.png) [@George\_Morris](https://meta.discourse.org/u/George_Morris)
#### Post date: [September 12, 2017, 3:01am UTC](https://meta.discourse.org/t/layouts-plugin/55208/94 "2017-09-12T03:01:37Z")

</div>

Hmm, thanks for all your effort @angus

I’ve tried searching on those pluggins and I can’t seem to find any documentation on the Pavillion pluggins mentioned in your examples

---

<div class="post-metadata">

### Author: ![exetico](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/exetico/32/119962_2.png) [@exetico](https://meta.discourse.org/u/exetico)
#### Post date: [September 13, 2017, 6:03pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/95 "2017-09-13T18:03:53Z")

</div>

Hi again

I remember that i saw a screenshot with booksmarks in the widget - is that a public widget? Google and Github can’t help me find it 😉

---

<div class="post-metadata">

### Author: ![exetico](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/exetico/32/119962_2.png) [@exetico](https://meta.discourse.org/u/exetico)
#### Post date: [September 14, 2017, 3:36pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/96 "2017-09-14T15:36:08Z")

</div>

> **Old stuff**
>
> This text will be hidden

I can’t delete some of the widgets at the settings-page.

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/6/66bd7d840e829a07898efe6f34fd577ebccbe689.png)  
In clear-widget \> Preview the following value is listed: [“BAD CSRF”]  
 ![image](https://global.discourse-cdn.com/meta/original/3X/9/2/92e56ab4ffdd5a2d5bf14689dc73ac660376cdd9.png)

Is there a way to that i can clear all data saved regarding widgets?

All changes also returning errors.

**Update** : I’m still in the really basic steps, and trying to move around with stuff - and see how it goes. I also used some of your widgets to mess with a few things. I can’t say what i did wrong, but i ended up building the site from scratch 🙂

**Update2** :  
Just a funny screenshot.

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/f/ef3b05145f3c38ec6d3ed80a049e70f9fc5d1174.png)

_I missed the “Save Edit”-button a few days ago._

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [September 14, 2017, 11:51pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/97 "2017-09-14T23:51:05Z")

</div>

Thanks for this feedback, I will take a look at this later today.

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [September 15, 2017, 7:19am UTC](https://meta.discourse.org/t/layouts-plugin/55208/98 "2017-09-15T07:19:50Z")

</div>

We recently have changed the profile widget slightly and added a telegram share button for the posts to the topic page.

The read time is also shown next to the users Avatar in the widget, as a way to show the credit of each user.

the widget is located here.

[https://github.com/Alavi1412/discourse-profile-widget](https://github.com/Alavi1412/discourse-profile-widget)

After a recent update, the widget stopped showing in the topic page (as a result I don’t have snapshot!). it’s only shown in the main page.

@angus May you help us find out the problem and fix the case?

here is the error log in the console (on every page load it gives around 100’s of errors in the console! 🙁):

```plaintext
ajax @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:8657
e @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:1456
S @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:57172
M @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:57660
s @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:1456
getReadTime @ _plugin-third-party-6f39005538a926fb46bd5d18f866d202962a5b82b48433c768dc713f2c6e633e.js:1217
html @ _plugin-third-party-6f39005538a926fb46bd5d18f866d202962a5b82b48433c768dc713f2c6e633e.js:1217
p @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:44338
value @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:44473
r @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7941
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7935
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7488
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7512
l @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7588
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7578
o @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7666
r @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7658
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7579
o @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7666
r @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7658
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7645
rerenderWidget @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:27084
invokeWithOnError @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12021
flush @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12080
flush @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12204
end @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12274
run @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12388
u @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:33455
i.success @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:1456
l @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:3186
fireWith @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:3316
r @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:8758
(anonymous) @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:9124

```

some snapshot of the errors:

 ![Untitled](https://global.discourse-cdn.com/meta/original/3X/b/a/ba69f38ca082802e7d15e1fff151b02699b5ef27.png)

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [September 15, 2017, 8:42am UTC](https://meta.discourse.org/t/layouts-plugin/55208/99 "2017-09-15T08:42:27Z")

</div>

I’ve just pushed updates to the Layouts plugin, the Profile widget and the Custom html widget.

Layouts:

- Cleanup and some bugfixes
- Support for category-specific topic routes

Profile widget:

- Cleanup and style updates

Custom html:

- Allow for evaluation of `<script>`.

You can now add things like Twitter widgets directly in the sidebar.

 ![46 PM](https://global.discourse-cdn.com/meta/original/3X/9/6/964e28cf6dc8942cce7bc4668452640627dd822a.png)

I’ve set up an example in the [layouts category](https://discourse.angusmcleod.com.au/c/layouts) on my sandbox

@exetico @Pad_Pors various bugs were fixed. Please pull the latest and try again.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [September 15, 2017, 8:57am UTC](https://meta.discourse.org/t/layouts-plugin/55208/100 "2017-09-15T08:57:47Z")

</div>

@Pad_Pors I think your issue may be to do with the code in your widget. I’m taking a look at it now.

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [September 15, 2017, 8:58am UTC](https://meta.discourse.org/t/layouts-plugin/55208/101 "2017-09-15T08:58:37Z")

</div>

now the changed version of the profile widget is not shown in the main page either.

I got this error:

```plaintext
_ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:28913 TypeError: Cannot read property 'indexOf' of undefined
    at t.html (_plugin-third-party-f3ac1993127f423283ddd284f4bb638556d69ffb691610448a42c31c0723124d.js:1225)
    at t.p [as draw] (_application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:44338)
    at t.value (_application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:44473)
    at r (_vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7941)
    at i (_vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7934)
    at l (_vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:8497)
    at r (_vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:8306)
    at i (_vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:8296)
    at s.rerenderWidget (_application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:27082)
    at invokeWithOnError (_ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12021)
u @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:28913

```

 ![Untitled](https://global.discourse-cdn.com/meta/original/3X/b/7/b7c7d1fa7272495dce3ec50510af01304f061909.png)

I also think it can be due to our codes.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [September 15, 2017, 9:16am UTC](https://meta.discourse.org/t/layouts-plugin/55208/102 "2017-09-15T09:16:34Z")

</div>

Ok, I’ve fixed the bug in layouts that caused that issue for you.

[https://github.com/angusmcleod/discourse-layouts/commit/486c921db5cb25799723a1beba8ec0693c254bf8](https://github.com/angusmcleod/discourse-layouts/commit/486c921db5cb25799723a1beba8ec0693c254bf8)

Also, the issue with your widget is the topic-notifications-button.

Replace

```plaintext
this.attach('topic-notifications-button', {
  topic: topic,
  appendReason: true,
  showFullTitle: false
})

```

with

```plaintext
new ComponentConnector(this,'topic-notifications-button', {
  topic,
  appendReason: true,
  showFullTitle: false
})

```

and add this to your imports

```plaintext
import ComponentConnector from 'discourse/widgets/component_connector';

```

If you do that, your widget will load normally in topics

 ![29 PM](https://global.discourse-cdn.com/meta/original/3X/0/8/08f1f956e4d1996cee9733f3228e241aed0ec215.png)

I would make a PR, but yours is a fork of my plugin… Your plugin is now significantly different so you should create a separate repo.

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [September 15, 2017, 9:38am UTC](https://meta.discourse.org/t/layouts-plugin/55208/103 "2017-09-15T09:38:04Z")

</div>

Many Thanks Angus ❤

you made my day 🙂

[Previous page](https://meta.discourse.org/t/layouts-plugin/55208.md?page=4)

[Next page](https://meta.discourse.org/t/layouts-plugin/55208.md?page=6)