Table vs visibility toggles

The visibility toggles mode is quite recent in Link Library, only having been added a couple months ago. I am having a hard time visualizing what you mean by two columns. Do you have two top-level categories, each with a bunch of sub-categories? Then perhaps it’s not so much about two columns, but having new columns each time there’s a new category. Honestly, I did not give much thought to how visibility toggles should work with sub-categories. Do you have an idea of how you’d like this to look visually?

I think I’ve probably confused things by mentioning the visibility toggles, because I suspect I’m not using them the way they’re intended.

I have many categories. Some of them have no sub-categories, but some have a list of sub-categories. If I display them in a table format, and give the table 2 columns, then the two lists acquire a lot of empty space between the entries. This is because, for instance, the first entry in the left column is just a single category, but the first entry in the right column has 5 sub-categories. Therefore the first entry in the left column now has 5 empty lines beneath it before the next table row starts. This is how HTML handles tables so this isn’t surprising.

What I’d like to achieve is for the list to span over two columns, but without any empty space between entries. I suppose putting each category and sub-category in their own individual cells might do it. I don’t know if there’s another way to make a second column without using a table.

Hope that makes more sense!

Indeed, talking about visibility toggles did confuse things are bit. Would you be able to share a screenshot of what you are getting at the moment? Or better yet provide a link to the page you’re building? I don’t see a lot of ways of displaying something in two columns where one item has sub-elements and the other one does not, but it may be possible to do something with some CSS.

The site isn’t yet online for me to provide a link.
Here’s a mockup of how it looks when you use a table with two columns…
https://ibb.co/MRbXGgD
and here’s roughly what I’d like to achieve…
https://ibb.co/h9HPLWV

It’s the same list, but without all the blank space that the 2 column table introduces.

That makes it really clear. Thank you. It is possible to do something like this with the masonry plugin, which I’ve recently used in other parts of Link Library. That being said, it’ll take time to implement which I don’t have right this moment. I should be able to look doing something like this in the next two to three weeks.

I was really asking if it was possible to do that with the existing functionality, rather than asking for you to do more work! This is already an incredibly customizable plugin as it is. If you do decide it’s something you want to add in the future, I’d be very happy to help test it.

Actually, come to think of it, there is a way that you might be able to make the layout look better without any enhancement from my side.

If you go Global Options, there is an option called Category selection method. This option has two values, with Multi-Select List being the default. The other option is called Comma-separated ID list.

Choosing that second will open up a new option for sorting categories under the Categories tab of your library configuration allowing you to sort by Order of categories based on included category list. You can then go to the Common tab of your library configuration and specify the exact order in which categories will be displayed by entering their numeric IDs, separated with commas.

All of that being said, this will affect the order in which categories will be displayed for both the [link-library-cats] shortcode as well as the [link-library] shortcode.

Let me know if this solution would work for you or if I should still try to put something better in place. Thanks.

I appreciate the suggestion but I don’t think it’ll work with the number of categories that may end up being potentially used. A predictable alphabetical sorting is important too.

Oh, I thought that the order did not matter since your first image showed all of the libraries in order, then the second one showed them out of order.

If you need proper sorting, I’m not sure I see a solution, except perhaps to make all categories top-level categories and add the parent category names to the sub-catgegory names. For example, if a parent category was Travel and a child Japan, perhaps renaming the child to Travel – Japan and making it a top-level category.

Mixing up the order in my second example wasn’t deliberate, but now that I’ve spent some time with it, I’m thinking that a mixed up order is probably preferable if it means we can lose the blank space. Aesthetics over usability! ??

It’s only the table that is responsible for the blank space. If each entry in the table didn’t have its own cell wouldn’t this mean the contents could be vertically aligned?

The issue here would be how to procedurally generate that table and know when to stop one table cell and start the second column.

I don’t know how often you would expect to be making changes to your list of categories, but one thing you might want to consider is just to grab the HTML code from the [link-library-cats] output and modify it by hand to replace the shortcode. That way, you can style it exactly as you want to.

That’s actually a neat idea. I can give the list time to mature and become more static, and then convert it to a static page. Thanks ??