Category Previews

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 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: Discourse Theme Creator

  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 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 boxed categories 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

Install this theme component

37 Likes

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.

6 Likes

Staff users and anonymous users will always see the category previews.

So, those who dont register on the forum can see inside the category ?

Anon users will not be able to see inside the real, restricted category. 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
7 Likes

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

4 Likes

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 .

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.

3 Likes

Yeah i got it Thanks ! lol

But finally how install it that on our own site ?

As mentioned, there are instructions in the original post:

Then you will need to configure the theme settings, your category restrictions, and your group settings according to your needs.

4 Likes

Yeah my bad, didnt see the github link. Thank you very much for your time

2 Likes

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/ category-slug /12
Group : Its for group name who access to the restricted category.

2 Likes

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.

Yes, you will want to follow this guide: How to use category security settings to create private categories

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).

9 Likes

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:

1 Like

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.

1 Like

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 #theme category here on Mete uses theme as the slug:

1 Like

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

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.

1 Like

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

3 Likes

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.

2 Likes

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.

4 Likes

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 breaks down the settings a bit more than the OP.

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.

4 Likes