The ultimate wikidot comments counter
A sophisticated, conditional way to present the number of comments
A couple of weeks ago Timothy Foster presented the singular/plural CSS changer for counting comments. Today, I’d like to build on his idea and take the comments counting to the next level. The aim is for the comments counter to not only be able to add/remove the 's' on the end of comments, but for it to also say 'No comments yet' when the page has not yet been commented. If you’d like to see it in action, I’ve added it to the comments for BMC blog posts… just scroll down to the bottom of the page.
The basics
We’ll start with the basics, building the singular/plural support. For this tutorial, I'm assuming that you're working with the comments module in the live template, but this could just as easily be applied to the ListPages module.
On the live template (category:_template) with the comments module, you will presumably want to say something along the lines of '12 comments'. To remove that pesky 's' when only one comment has been posted, you just need to wrap a span around the 's', and use the %%comments%% variable in the class name.
%%comments%% comment[[span class="sp%%comments"]]s[[/span]]
Then, for the CSS that will hide the 's' when only one comment has been posted, we do something a little like this…
.sp1 {display:none;}
Supporting no comments
So that was the solution Timothy came up with. Now we’ll use this on a larger scale to add the 'No comments yet' section. All you have to do is wrap the entire phrase used above in a span, and add the 'No comments yet' section in a separate span. We will use two classes for the 'No comments yet' element - I’ll explain why a little later on.
[[span class="zeroComments c%%comments%%"]]No comments yet...[[/span]][[span class="allComments%%comments%%"]]%%comments%% comment[[span class="sp%%comments%%"]]s[[/span]][[/span]]
Using CSS, we can toggle the display of each of span elements depending on the number of comments that have been posted. We want to hide the zeroComments class by default, and only display it when %%comments%% returns 0. This is the reason for using the two separate classes in the one span. You could hide it inline with style="display:none;" and then override it with !important, but I prefer to keep everything neat and tidy. We also want to hide the allComments class when no comments have been made.
.sp1 {display:none;} .zeroComments {display:none;} .zeroComments.c0 {display:inline;} .allComments0 {display:none;}
You then can put this in a CSS module on the _template page, or add it to your site’s main CSS if you plan on using it in multiple categories.
Bringing it all together
For those of you who like to take the easy route, here is everything bundled up in a nice, easy to copy block:
+ Comments
+++ [[span class="zeroComments c%%comments%%"]]No comments yet...[[/span]][[span class="allComments%%comments%%"]]%%comments%% comment[[span class="sp%%comments%%"]]s[[/span]][[/span]]
[[module Comments]]
[[module CSS]]
.sp1 {display:none;}
.zeroComments {display:none;}
.zeroComments.c0 {display:inline;}
.allComments0 {display:none;}
[[/module]]
And there you have it… how to add a more advanced comments counter to your wikidot site. Of course, there is the potential to show something completely different for every individual number of comments, but that would get very complex. There is one different application of this that I can think of, but I’ll save it for a rainy day. Until then, can you think of any novel ways of using this technique other than counting comments?
Enjoy the article? Tweet it!
Discussion - No comments yet…7 comments
Testing comment counter
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
what a genius idea!
Glad you like it :)
BMC Creative | RoaringApps | @brycecammo
An idea for your blog: How about a tutorial, spanning several blog posts, which teaches us how to create a simple theme from scratch?
Perhaps it might put you out of business if people learn how to create themes themselves, but I know that it's something that I'd definitely like to learn :)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Elaborating on my previous post… I'm not interested in using font-face to use fancy fonts, or doing anything special… but it would be useful to be taught how to create a theme that has the basics - a rectangular design with a background for the body, background for outside the body, and a very simple top and side navigation. Really, really simple theme.
I'm particularly interested in how you use tools like those available in web browsers to develop the theme. And where do you start? Do you do the body first? Do you decide on a colour scheme first? Etc.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
That would interest me too. Of course you could always copy an existing theme and study the css but it's not the same thing. It would be nice if someone explained the stuff more thoughtfully and maybe (as you mentioned) told the best way to start etc.
___TTT___/ http://www.trumpetexercises.net
(_|||_) \ - Janne
Sounds good. All you have to do is find me some time :)
I hadn't thought of it before, but it is something I would like to do now that you mention it. I probably won't get a chance to write it until later in the year though.
BMC Creative | RoaringApps | @brycecammo
Post preview:
Close preview