# Category Previews
**URL:** https://meta.discourse.org/t/category-previews/155296
**Category:** Theme component
**Created:** [June 19, 2020, 1:12am UTC](https://meta.discourse.org/t/category-previews/155296 "2020-06-19T01:12:48Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [June 19, 2020, 1:12am UTC](https://meta.discourse.org/t/category-previews/155296/1 "2020-06-19T01:12:48Z")
This component will allow you to add “category previews” to your categories page so users are able to see that a category exists without having access to the actual category. The preview looks like a standard category, but can link to a specified page where a user can be educated on how to gain access.
I’ve included a simple example below, but there are many different ways this component can be configured. Please be sure to read all of the information included in the Theme Settings.
### Theme Creator Demo
:warning: You will need to be logged into an account here on Meta for this to work
1. Navigate to [https://theme-creator.discourse.org](https://theme-creator.discourse.org) and log-in using the button in the header if you are not already logged-in
2. Use the following link to activate the preview of this component: [Theme Creator](https://theme-creator.discourse.org/theme/tshenry/category-previews)
3. Scroll down the category list until you find the “restricted category preview” category and attempt to enter it:
4. You will be taken to a [published page](https://meta.discourse.org/t/page-publishing/151971) with instructions on how to proceed to access the category:
### Settings
I did my best to explain how this component works in the theme settings. The setup is not the most intuitive experience so feel free to ask questions and I will update the instructions to provide clarity.
### Additional Notes
I imagine there will be many different edge use-cases. I can’t guarantee that I can make this component work with all of them, but feedback and suggestions are welcome :slight_smile: Here are some things to keep in mind:
- Currently this will not work with the “Boxes with Featured Topics” or “Subcategories with Featured Topics” category page styles. If there are enough requests, I can see about adding support
- There are `above-$CATEGORY` classes added to the previews that appear above a specific category. This can be used to add additional styling.
- This will not work with sub-categories displayed on the categories page
- Staff users and anonymous users will **always** see the category previews.
- Pay special attention to the **IMPORTANT** notes in the Theme Settings
| | | |
| --- | --- | --- |
| :hammer_and_wrench: | **Repository** | [github.com/tshenry/discourse-category-previews](https://github.com/tshenry/discourse-category-previews) |
| :open_book: | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
---
### Author:  [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [June 19, 2020, 2:04am UTC](https://meta.discourse.org/t/category-previews/155296/2 "2020-06-19T02:04:44Z")
Oh, I _like_ this, we just implemented special interest groups this week and we’ve had questions on how people would be able to find them. We do use box category styles, so would request that for sure.
---
### Author:  [@Td\_skt](https://meta.discourse.org/u/Td_skt)
#### Post date: [July 8, 2020, 2:22pm UTC](https://meta.discourse.org/t/category-previews/155296/3 "2020-07-08T14:22:16Z")
> Staff users and anonymous users will **always** see the category previews.
So, those who dont register on the forum can see inside the category ?
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [July 8, 2020, 5:41pm UTC](https://meta.discourse.org/t/category-previews/155296/4 "2020-07-08T17:41:38Z")
Anon users will **not** be able to see inside the real, [restricted category](https://meta.discourse.org/t/how-to-use-category-security-settings-to-create-private-categories/87678). They will only see the category **preview**. Staff can see/access everything. Here’s a breakdown of a hypothetical category list:
**Staff User** (always sees both)
- Restricted Category
- Restricted Category Preview
- Public Category
**Anon User** (only ever sees the preview)
- Restricted Category Preview
- Public Category
**Logged-in User with access to restricted category** (preview not needed, so never shown)
- Restricted Category
- Public Category
---
### Author:  [@tomtjes](https://meta.discourse.org/u/tomtjes)
#### Post date: [July 10, 2020, 1:58am UTC](https://meta.discourse.org/t/category-previews/155296/5 "2020-07-10T01:58:54Z")
Just here to confirm that this works great with sites that have categories available to anonymous users, and others for logged-in users only. You can use the previews as a push to sign up.
`category-slug~Category Title~Member access only~https://discourse.example.com/signup~trust_level_0`
---
### Author:  [@Td\_skt](https://meta.discourse.org/u/Td_skt)
#### Post date: [July 10, 2020, 6:53pm UTC](https://meta.discourse.org/t/category-previews/155296/6 "2020-07-10T18:53:16Z")
Sorry, i make certainly the noob.
But, the 1 is ok. Not complicated.
When i click on the link in the 2 i have that :
When i go in “View Theme” i have an install button :
I dont want click on that, i am afraid to change all my forum.
Can you help me please and sorry again .
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [July 10, 2020, 7:16pm UTC](https://meta.discourse.org/t/category-previews/155296/7 "2020-07-10T19:16:42Z")
Hmm, I’m not getting the same behavior. I just tried running through the demo steps and everything appears to be working properly:
Just to be clear, the demo on our theme-creator site is just a demonstration of a use-case. You will need to install it on your own site using the installation steps at the end of the OP.
---
### Author:  [@Td\_skt](https://meta.discourse.org/u/Td_skt)
#### Post date: [July 10, 2020, 7:21pm UTC](https://meta.discourse.org/t/category-previews/155296/8 "2020-07-10T19:21:02Z")
Yeah i got it Thanks ! lol
But finally how install it that on our own site ?
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [July 10, 2020, 7:23pm UTC](https://meta.discourse.org/t/category-previews/155296/9 "2020-07-10T19:23:33Z")
As mentioned, there are instructions in the original post:
> [@tshenry](#):
>
> ### Installation
>
> > :warning: This requires core changes that were added in commit [`a3e8124`](https://github.com/discourse/discourse/commit/a3e812453ede5ad4a8ae00188c7aaf1fca4f77fc). Please make sure you have updated your site recently enough to have picked it up.
>
> [Repository Link](https://github.com/tshenry/discourse-category-previews)
> `https://github.com/tshenry/discourse-category-previews`
>
> If you are unfamiliar with theme components and how to install them, check out the [theme installation guide](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682). And if you’d like to learn more about Discourse themes, take a look at [this guide](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966).
Then you will need to configure the theme settings, your [category restrictions](https://meta.discourse.org/t/how-to-use-category-security-settings-to-create-private-categories/87678), and your [group settings](https://meta.discourse.org/t/configure-custom-group-access-and-visibility/138296) according to your needs.
---
### Author:  [@Td\_skt](https://meta.discourse.org/u/Td_skt)
#### Post date: [July 10, 2020, 7:28pm UTC](https://meta.discourse.org/t/category-previews/155296/10 "2020-07-10T19:28:28Z")
> [@tshenry](#):
>
> [GitHub - tshenry/discourse-category-previews · GitHub](https://github.com/tshenry/discourse-category-previews)
Yeah my bad, didnt see the github link. Thank you very much for your time
---
### Author:  [@Td\_skt](https://meta.discourse.org/u/Td_skt)
#### Post date: [July 10, 2020, 8:38pm UTC](https://meta.discourse.org/t/category-previews/155296/11 "2020-07-10T20:38:33Z")
So now, can you explain how use that please. English is not my native langage so its complicated.
Lets say i want to convert a public category in restricted category. Its possible ?
So can you give an example to put instead “Add item…”. Tell me if i right ?
category-slug : Name of category we want restricted
Preview name : Example : My restricted category
Preview Description : Exemple : “This a a restricted category”
URL : [https://example.com/c/](https://example.com/c/) **category-slug** /12
Group : Its for group name who access to the restricted category.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [July 10, 2020, 9:36pm UTC](https://meta.discourse.org/t/category-previews/155296/12 "2020-07-10T21:36:47Z")
You are doing a good job with your English :slight_smile: The set-up for this is tricky even when English is your native language.
> [@Td\_skt](#):
>
> i want to convert a public category in restricted category. Its possible ?
Yes, you will want to follow this guide: [Understanding groups and category permissions](https://meta.discourse.org/t/how-to-use-category-security-settings-to-create-private-categories/87678)
> [@Td\_skt](#):
>
> So can you give an example to put instead “Add item…”. Tell me if i right ?
Close!
If it helps, here is what I have in my theme setting for the demo:
`junk~restricted category preview~This category is only available to members of the "joinable-group" user group. Select for more information.~https://theme-creator.discourse.org/pub/logged-in-user-access~joinable_group`
And how it relates to the description of the theme setting:
| Theme Setting Part | Value |
| --- | --- |
| category-slug | `junk` |
| Preview Name | `restricted category preview` |
| Preview Description | `This category is only available to members of the "joinable-group" user group. Select for more information.` |
| `https://example.com` | `https://theme-creator.discourse.org/pub/logged-in-user-access` |
| group | ` joinable_group` |
And here is a diagram to show how the different parts relate:
In the image, “ :lock: restricted” is the real category that can only be accessed by the ` joinable_group` user group (and staff by default).
---
### Author:  [@Td\_skt](https://meta.discourse.org/u/Td_skt)
#### Post date: [July 11, 2020, 10:28am UTC](https://meta.discourse.org/t/category-previews/155296/13 "2020-07-11T10:28:16Z")
Thank you for your time dude. Ok ok it’s much clearer that way. And actually it was not obvious ^^
So lets do that ! and thanks again :slight_smile:
---
### Author:  [@Td\_skt](https://meta.discourse.org/u/Td_skt)
#### Post date: [July 16, 2020, 10:41am UTC](https://meta.discourse.org/t/category-previews/155296/14 "2020-07-16T10:41:46Z")
Hi, its me again ^^
So, i put the settings here :
I have some questions :
1 : How build URL ?
2 : When we write the settings close to “category previews” after i confirm that. Its finish ?
3 : I did that but impossible to see the private category. I need to create that manually or not ?
Thansk and again sorry, its too hard for me.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [July 16, 2020, 5:14pm UTC](https://meta.discourse.org/t/category-previews/155296/15 "2020-07-16T17:14:22Z")
Hi :slight_smile:
1. Which URL? Can you share the _full_ value of the `category previews` theme setting in your screenshot? I should be able to give you suggestions based what you have entered into that setting.
2. When you make a change to the `category previews` setting, click outside of the text field and you should see two buttons appear. Use the green one to save changes. After you save the changes, you will need to refresh any open browser tabs/windows to see the effect.
3. Assuming **Groupe privee** is a category you have already created, you need to find and use the slug for it. It will most likely be something like **group-privee**. You can confirm this by navigating to the **Groupe privee** category and looking at your browser’s address bar. For example, the #Customization > Theme category here on Mete uses **theme** as the slug:
---
### Author:  [@Td\_skt](https://meta.discourse.org/u/Td_skt)
#### Post date: [July 16, 2020, 7:48pm UTC](https://meta.discourse.org/t/category-previews/155296/16 "2020-07-16T19:48:22Z")
Thanks for your reply.
So here is the category preview : Groupe privee~Parlons societe offshore~Cette catégorie est seulement disponible aux utilisateurs ayant rejoint le groupe.~[https://forum.objectifhijra.com/pub/logged-in-user-access~groupe\_joignable](https://forum.objectifhijra.com/pub/logged-in-user-access~groupe_joignable)
If i understand correctly, the category must be created earlier ? I tried with existing category and same thing, nothing happen.
Yeah, i spoke about of URL in the categroey preview. How we build this URL ? Or if we need to create the category before, so i take the URL which is created by discourse.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [July 16, 2020, 8:24pm UTC](https://meta.discourse.org/t/category-previews/155296/17 "2020-07-16T20:24:58Z")
There are a few things to address:
1. Your forum is using boxed categories, so it will not work. From the original post:
2. The first part of your setting (Group privee) needs to be the slug of an existing, public category. The preview will display **above** this category. It should not be the name of the category you are trying to preview.
3. It doesn’t look like URL you are using (`https://forum.objectifhijra.com/pub/logged-in-user-access`) is a real published page. You would need to create a published page using the instructions at [Page Publishing](https://meta.discourse.org/t/page-publishing/151971) and use the generated link to that page.
4. Make sure you actually have a group with the name `groupe_joignable`
Unfortunately, I’m not sure how much more I will be able to help you. It’s fairly difficult to explain on its own and I think our language barrier isn’t helping. What I might recommend is posting in our #Marketplace category to see if you can hire someone to log into your site and help you directly.
---
### Author:  [@Td\_skt](https://meta.discourse.org/u/Td_skt)
#### Post date: [July 16, 2020, 8:33pm UTC](https://meta.discourse.org/t/category-previews/155296/18 "2020-07-16T20:33:02Z")
Its ok dude. I understood everything ! Thanks.
Im so sad it doesnt work with boxed categories style :frowning:
How can i do…
Anyway, thanks for everything. Im sure that will help other people.
---
### Author:  [@downey](https://meta.discourse.org/u/downey)
#### Post date: [March 10, 2021, 10:24pm UTC](https://meta.discourse.org/t/category-previews/155296/20 "2021-03-10T22:24:37Z")
I just learned about this theme component and am excited that it may streamline some workaround hacks I’d been using. A couple questions that I couldn’t tell if were just beyond my understanding of how things work, or haven’t been created yet:
1. Should anonymous (not logged-in) users be able to see the category preview item in the /categories listing? I was hoping that they might see what’s available to encourage them to create an account, but in my tests so far I haven’t been able to make that happen.
2. Are admins able to see the category preview even if they’re in the specified group that shouldn’t see it? I am in `group-x` as specified in the string, but am still seeing it above the actual restricted category.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [March 10, 2021, 10:41pm UTC](https://meta.discourse.org/t/category-previews/155296/21 "2021-03-10T22:41:27Z")
> [@downey](#):
>
> Should anonymous (not logged-in) users be able to see the category preview item in the /categories listing?
Absolutely, that’s one of the most important scenarios this component should be covering! Can you make sure you are using the slug of the category the preview should appear above? In case it’s helpful, [this post](https://meta.discourse.org/t/category-previews/155296/12) breaks down the settings a bit more than the OP.
> [@downey](#):
>
> Are admins able to see the category preview even if they’re in the specified group that shouldn’t see it? I am in `group-x` as specified in the string, but am still seeing it above the actual restricted category.
Yes, I wanted to make sure staff (mods/admins) always see the preview so they are always aware of it’s existence and placement. It’s best to use a test user account when testing out component.
[Next page](https://meta.discourse.org/t/category-previews/155296.md?page=2)