In the Category list layout subcategories show up with their colour blob and, if restricted access, the lock icon before the title.
In the Category boxes layout then neither colour blob, nor lock icon show up, but if a logo is defined for the subcategory then it is shown (reduced to 20px by default).
This is inconsistent. There should at very least be an option to match the normal (list) appearance for the subcategory titles. Ideally there would also be the option to display the logo in the list layout as well.
Or even a plugin-outlet to enable us to modify this illogical behaviour (I’ve been looking and can’t find one - if there is please what is it?)
By the way the logos here are really a bit big, forcing lots of wasted space - I prefer to reduce them to 75px height
Default Boxes with Subcategories
Note a couple of my subcategories there have logo images set and they are shown.
The layout is quite space wasteful - the Category Logo is restricted to 40px, but is centred above the title. The subcategory logos are not respecting their aspect ratio (the --aspect-image calculations are not working and are anyway unnecessary, if you just set a height the the aspect will be respected if there is space.).
The subcat logos are also a bit large forcing space between the lines.
My modification step one
The logo floats left of the title which is centred in the remaining space.
The subcategories are one per line with colour stripe and lock icon, but the subcategory logos are not show (which is consistent with the default).
In a box I don’t think it makes sense to try and cram two short subcat titles onto one line if there is space, looks better with separate line for each I think, but others might prefer to squeeze them up if there are a lot of subcats.
My final modifications:
The subcat logos are shown at 18px ht with the correct aspect ratio at the end of the title. This is optional and they could be positioned between the lock icon and the text, but I prefer to have the stripes and titles lining up.
It would also make sense to have the option to use subcat logos in the other default layouts, but I’ve not bothered with those.
Here I am also using the Category Icons component (an icon is only set on the Niki Test subcategory) so the position of the stripe is slightly shifted to make the icon line up with it, and the icon colour is the stripe colour so it effectively is used in place of the stripe - but those are mods to that component, not the core.
Finally here is how it renders as subcategory boxes shown above the parent category topics if that is set.
Obviously at the moment there are no grandchild categories to show, but that will need accommodating. Also it might be better to float the logo vertically when there is a really long title - better perhaps to just keep category titles short!
So a mixture of HTML text/x-handlebars in /head for the theme effectively replacing “components/categories-boxes” and SCSS. I’m happy to send the code to anyone competent to test it and feed it in to github.
This works ok for my site, but there may be other consequences I haven’t spotted.
I was planning on looking at this layout this week to try and integrate a third level of subcategories, so I can take a look at the consistency while I’m at it.
Sub-sub categories are somewhat irrelevant to this topic, but they are a work in progress that will influence the style of this page going forward… which is why I’m including them. Not entirely happy with this approach for a few reasons, but it’s a tricky layout.
Due to how much these boxes’ content can vary, we might want to truncate sub-sub categories at some point… or do some JS height calculations so we can apply a masonry-style layout where boxes aren’t all equal height? Need to think about it some more.
For the existing single level of subcategories I switched to the badge style for the categories instead of the generic link. I also improved our aspect ratio calculations, they weren’t really being used at all.
I do think the logo above the title is taking quite a lot of vertical space which is at a premium with an overlong description and several subcategories.
Since one of the advantages of the boxes layout is getting more categories visible without scrolling I think it would be very good to default to having the logo and title next to each other. Of course one could achieve this pretty much with css overrides but be nice to get it right by default.
On the grandchild category problem I do like your sub boxes but a possible optional setting would be to simply only show one level of subcategory with an indicator when a further level exists - maybe a “+N subcategories” in small text under the child category title if there are grandchildren.
