Layouts Plugin

[Jay91 (Jay Abie)]

How i can add google adsense banner using this plugin ?

[angus (Angus McLeod)]

I recommend that you use the Unofficial Google AdSense plugin instead.

[ckshen]

@angus

No, it’s just been moved again, and subsumed into another plugin. If you’re interested in using it I can create a separate plugin. It’s basically just a wrapper for the map-widget in the locations plugin.

Any luck with this? Thanks!

[angus (Angus McLeod)]

I’ve added a layouts-map widget to the Locations Plugin.

https://github.com/angusmcleod/discourse-locations/commit/422b583584fa02f7b2df42bdfd070c97ad262c5e

See e.g. https://discourse.angusmcleod.com.au/c/locations/layouts

If you have both the Custom Layouts and Locations Plugins installed, layouts-map will be available in the Layouts admin area and the category-specific layouts widget settings.

The locations displayed on the map will be:

• No category: All locations.
• Category: Locations in that category.
• Topic: Topic location.

The widget itself is controlled like any other custom layouts widget, by category-specific or site-wide route settings.

There are also two site settings relevant to the widget:

• location layouts map search enabled: Enables the map-search functionality.
• location layouts map show avatar: Display’s the user’s avatar in the top left corner of the map.

[ckshen]

Thanks Angus! I installed it and it works well. One question- Do you think we can style the layout and map size via CSS, or is it pretty much set by the plugin? specifically, with the map, the topic list got squished, though the browser window still has a lot of space to utilize horizontally. so i am thinking about using CSS to put the map in those unused space instead. secondly, using CSS to make the map bigger, like taller in height, for example.

Thanks.

[angus (Angus McLeod)]

The site settings layouts sidebar ${left or right} width set the width of the sidebars. Widgets are currently 100% of the width of the sidebar, so increasing the sidebar with will also increase the width of the map.

@ckshen

i am thinking about using CSS to put the map in those unused space instead

If you’re referring to the white space to the left and right of the 1110px (1126px with padding) discourse envelope, it’s a bad idea to put stuff here.

There a number of reasons why a website or app will set a maximum width for all content, including differing screen resolutions between users. The Discourse team has chosen 1110px. Facebook’s “gobalContainer” has a max-width of 981px.

Putting stuff in that margin area will be both incongruous with overall Discourse design and will not be a great experience for users with smaller screens or poor screen resolution.

There are a few ways you can deal with the effect a wider sidebar has on the topic list:

1. Remove elements. This is why the Layouts plugin has the layouts list navigation disabled and layouts list header disabled settings (both site and category-specific). But if you use these settings you need something to replace the removed functionality with, e.g. a dedicated navigation widget.

2. Make existing elements more compact. This is why the Layouts plugin has the layouts list nav menu menu setting(s). This puts the filter list nav buttons (e.g. Latest etc) into a menu to save space.

@ckshen

using CSS to make the map bigger, like taller in height, for example.

You can do this by adding some custom css to your theme in Admin > Customize. The rule you want to change is:

.nav-container .locations-map:not(.expanded) {
  height: 170px;
}

Make sure you include the :not(.expanded).

[ckshen]

Thanks for the background about Discourse’s width. Appreciate it.

I configured as you suggested via CSS. Looks great. Its a great implementation for the type of geographical focused discussions. Appreciate the plugin.

Is there a way to only show the map in categories where location plugin is enabled?
or disable the map for certain categories/subcategories where its irrelevant? Thanks!

[angus (Angus McLeod)]

@ckshen

Is there a way to only show the map in categories where location plugin is enabled?

The layouts plugin also has category-specific settings. See Category Settings > Settings. Use these instead of the site-wide settings.

[Jay91 (Jay Abie)]

I use this plugin already, but i want to show ads on the side bar this why i asked.
if i cant, can you tell me how i can show links to categories through this plugin ?

[angus (Angus McLeod)]

If you wanted to use this plugin, you could use this widget to add arbitrary html to a sidebar:

https://github.com/angusmcleod/layouts-custom-html

You add the html to the layouts_custom_html site setting.

[ckshen]

Angus, there is a single pixel box around the list of topics with this plugin. whereas without, there are only a single pixel line between topics but without the box. Is the box intentional?

With the plugin:

vs without:

[ckshen]

Here’s a question for those who has used the custom-html widget. I am planning to display a different html for every category. I think I need to fork/ duplicate the original widget a number of times and load them all into app.yml so different settings can be applied to each widget.

Anyone can think of a cleaner way to do this?

[angus (Angus McLeod)]

@ckshen

there is a single pixel box around the list of topics with this plugin

Yes; to clarify this happens when you turn on the layouts list nav menu setting, i.e. to use the nav menu instead of the list of nav buttons. The css was out of date. I’ve updated it.

Bring nav-menu css up to date

@ckshen

I am planning to display a different html for every category. I think I need to fork/ duplicate the original widget a number of times and load them all into app.yml so different settings can be applied to each widget.

Anyone can think of a cleaner way to do this?

I’ve added category-specific html strings to the widget. Have a look in the category settings. Category takes precedence over site.

Add category-specific html strings

[ckshen]

This plugin plus the custom html plugin enables many possibilities. Right now we show a map and some social icons on each category. But really one can do anything. So, thank you for the plugin! Am thinking about a category sidebar on the left.

[nothing (Hakan)]

widget does not work stable. categorized html also appears in other categories and also looks at home. Sidebar caches do not reset and stay plugged in between pages.

A look at the affection, HTML added to category A, it also appears in category B

[Stranik (Evgeny)]

Hi, @angus

Many asked to add categories (in sidebar) all over the forum. Maybe it makes sense to add this to your plugin?

I created a widget and added 3 files to your plugin and it works. Here is a little code.

https://github.com/Toxuru/widget-cat

[angus (Angus McLeod)]

@nothing

widget does not work stable. categorized html also appears in other categories and also looks at home.

I’m not sure what you’re referring to? I haven’t built a category-specific html widget.

@Stranik

Many asked to add categories (in sidebar) all over the forum. Maybe it makes sense to add this to your plugin?

I created a widget and added 3 files to your plugin and it works. Here is a little code.

Great! Looks like you already did it for me

[Stranik (Evgeny)]

@angus

Great! Looks like you already did it for me

It was easy. Perhaps the code can be simplified even more.
If your plugin will add categories, that would be great .

[exetico (Tobias)]

Hi,

We’re facing some problems with horizontal scroll on our forum, caused by the display:flex, in layouts.

.layouts-nav-button {
  @extend .nav-pills;
  float: left;
}

Guess it’s a few commits since i saw it the first time.

https://github.com/angusmcleod/discourse-layouts/blob/master/assets/stylesheets/common/layouts.scss#L430

[angus (Angus McLeod)]

Could you point me to where this is happening on your site? It’ll make it a little easier to understand what is going on. Thanks.