Add a tag column to your /categories page

This theme component adds a column displaying tags to your categories page.

This only works if the desktop category page style site setting is set to either categories and latest topics or categories and top topics.

This component comes with a number of settings:

  • tag_count: change the number of tags that appear by default. When only a subset of tags is shown you’ll also get a “more” button.

  • categories_page_column_count: this controls the number of columns on the page in total. Note that when the browser is less than 768px wide, all the content will stack into a single column.

  • tag_column_count: the number of columns used within the tags section

  • hide_categories_column: enabling this will hide the categories, this may be useful for sites that want to focus on tagging

  • categories_column: the column categories appear in

  • categories_row: the row categories appear in

  • tags_column: the column tags appear in

  • tags_row: the row tags appear in

  • topics_column: the column topics appear in

  • topics_row: the row topics appear in

:information_source: Note that the column and row settings accept values that work with grid-column and grid-row… so for example, by default the topics_row value is 1 / span 2, this means topics start in row 1, and span across 2 rows. So as seen in the screenshot above, the topics column is as tall as both the categories and tags columns, which are only 1 row high.

The row and column settings grant a lot of layout flexibility. With a few changes you can change the layout to something like this:

or this:

16 Likes

It’d be amazing if this could support tag groups!

4 Likes

Thank you for creating and sharing this out @awesomerobot. I am confused and would love some handholding to create this layout on our instance. I want to exactly replicate this screenshot. Would you be willing breakdown what each setting needs to be set at for that?

55577d2d5febb6972b149465c0deb3c15330c188_2_689x445

and @awesomerobot, how can I sort them by name rather than count?

and is there a setting which makes showing all tags all the time, rather that having a More button? @awesomerobot

Cheers
Neil

Sure no problem… from the default settings, you’d change the following:

tag column count: 8
tags column: 1 / span 2
topics row: 2

you can make the tag count setting higher, to something like 999 perhaps?

There’s no option for this at the moment

3 Likes

Nice to hear from you and thank you @awesomerobot

1 Like

Hi @awesomerobot, many thanks for this!

Is it possible to not just show it under /categories, but instead on the landing page?

We currently have it implemented under Tags | Latest - FIC Forum

…but we’d like to have it implemented on the landing page: https://forum.ic.org/, making the end result look like so:

Is there a way?

…actually I think I found a way - settings > basic setup > top menu: set the first to ‘categories’ and this makes the start page view default to the above.
:smiley:

This might be a bug @awesomerobot: if one has tag groups enabled then only tags from the ‘Other tags’ group are pulled in.

To replicate:

  1. Enable tag groups
  2. Add tags in a group
  3. See that only the tags not belonging to the ‘Other tags’ group are visible



@awesomerobot Hello Kris. Sounds like you might be able to guide me on a new anomaly. If you can great, otherwise, I am at ease with starting a new thread.

After a few days of stability using the theme component which adds tags on the left side of our /categories page, this morning all the names of the tags have disappeared and it looks like this! I have also attached what it looked like after we successfully installed the component and set it up the way we like it best.

What do you think is causing this behavior?
What steps can I be taking to troubleshoot?

I know that I can ever so easily revert to the original /categories page and set it up again. I need help from others who have more experience than me. First asking for support. :relaxed:

I look forward to hearing from you.
Cheers!
Neil
72b2dbacd9ccb2476c193852a9e9d5470a43de29_2_690x388