Tuesday, December 18. 2007
New serendipity comment format


I have styled most aspects of serendipity templates. Single and multi-entry pages, static pages, sidebars, headers, footers and even archives. However, in the back of my mind, and in various partially coded versions, has been the idea of a different format for entry comments than what I have typically used. I have played around with odd vs. even comments, different styles for author comments and several different methods of showing comment meta information, but none of my experimentation fully accomplished my objectives. Serendipity itself also presents a rare functionality - threaded display of comments and the ability to reply to a specific comment, or delete a specific comment if logged in as an administrator. I think I finally arrived at a great looking new comment format for my serendipity templates.
This format is not something I have totally re-invented - it just happens to be something I have never attempted. A key component of my desire was the utilization of avatars. I think avatars are a great way for visitors to feel a personal connection to the sites they visit frequently. Unfortunately, the existing serendipity avatar plugin placed images within the comment body, and I needed it to appear elsewhere. The best way to accomplish independent avatar placement was, in my opinion, via a smarty variable. I submitted my request/idea to the serendipity community, and Grischa Brockhaus came to the rescue with an updated version of the Avatar Plugin. As we exchanged emails on the concept, a few additional options were developed within the plugin, including the ability to position left, right or not at all in both the regular comments, as well as within sidebar output generated by the "Recent Comments" plugin. Most import to my need is the new option to generate output via a smarty variable, rather than directly inserting the html into the comment body. Perfect!
With Grischa's new modifications complete, and a little inspiration from Charity, I was able to bring all the different ideas I had together into a comment format that really accomplishes my objectives. I personally think the comments work best when used with hosted avatars, but I included a default avatar/icon in case the avatar plugin is not installed. This default can also be uploaded into the media library and be used as the default within the avatar plugin. I also extended the concept to trackbacks, which look nearly identical but do not use avatars.
I have decided to share this concept since I like it so much, and because others may have further ideas for refinement. However, implementation of this comment style within your own template is not a simple copy and paste - you will need to edit the css and tpls. If you REALLY love the idea, but cannot make these modifications on your own, I can be convinced to assist! :-)
For those willing to try, here are my caveats:
I have included all the required files in a single zipfile. Add the css into your stylesheet (revised to suit your tastes of course), or reference it from your index.tpl.
As previously mentioned, this is something of a work-in-progress, so if you have suggestions for improvement, or customize it further, please let me know. Even if you do not use it, please leave a comment and let me know what you think.
With Grischa's new modifications complete, and a little inspiration from Charity, I was able to bring all the different ideas I had together into a comment format that really accomplishes my objectives. I personally think the comments work best when used with hosted avatars, but I included a default avatar/icon in case the avatar plugin is not installed. This default can also be uploaded into the media library and be used as the default within the avatar plugin. I also extended the concept to trackbacks, which look nearly identical but do not use avatars.
I have decided to share this concept since I like it so much, and because others may have further ideas for refinement. However, implementation of this comment style within your own template is not a simple copy and paste - you will need to edit the css and tpls. If you REALLY love the idea, but cannot make these modifications on your own, I can be convinced to assist! :-)
For those willing to try, here are my caveats:
- I developed this for fixed width serendipity templates. If your templates use a liquid/fluid/variable width structure, you will need to figure that out on your own.
- As I am actively involved with the bulletproof template development, as well as my own derivatives, I chose to use class names which had no chance of conflicting with those normally used by most templates. I also introduced a few new classes to these files to achieve my desired look. Both the modified, and new, classes are dc_classname.
- The css is exactly what I am using on this site - you will definitely want to modify the rules to be consistent with the color scheme of your template.
- The smarty template comments.tpl must have certain widths defined within the file, and I have provided notes within the files on how to calculate those numbers. Trackbacks.tpl did not NEED to contain the width - as it does not change per trackback as it does with comments - but I defined it there to be consistent with comments.tpl.
- The template is expecting images to be 50 x 50, so you will need to adjust widths, margins, padding, etc if you use a different size avatar.
- You may wish to use a different date and time format than what I prefer.
- I am using background images for the delete and reply links. This is not absolutely ideal, but allows me to use a different color on hover. Your font family and size needs to be large enough for the background image to be completely visible.
- This concept has been tested successfully in FF2, Opera 9, and IE6 under windows.
I have included all the required files in a single zipfile. Add the css into your stylesheet (revised to suit your tastes of course), or reference it from your index.tpl.
As previously mentioned, this is something of a work-in-progress, so if you have suggestions for improvement, or customize it further, please let me know. Even if you do not use it, please leave a comment and let me know what you think.
37 Comments
| 7 Trackbacks
Defined tags for this entry: Serendipity - Plugins, serendipity themes
Trackbacks
Neues S9Y Kommentar Template mit dem Avatar Plugin
Don Chambers hat nun veröffentlicht, warum er so an einer Änderung des Avatar Plugins interessierte war: Er hat ein meiner Meinung nach ziemlich schickes Template für die Kommentar Darstellung in Serendipity erstellt. Es sieht so aus, wie B
Don Chambers hat nun veröffentlicht, warum er so an einer Änderung des Avatar Plugins interessierte war: Er hat ein meiner Meinung nach ziemlich schickes Template für die Kommentar Darstellung in Serendipity erstellt. Es sieht so aus, wie B
Pimp my comments
Mein Bulletproof-Mitentwickler Don Chambers hat eine großartige überarbeitete Darstellung der Kommentare in einem Serendipity-Blog entwickelt, erklärt und live zu bestaunen in seinem Blog. Einer der Hauptaspekte ist die komplett überarbeitete Darstellung
Mein Bulletproof-Mitentwickler Don Chambers hat eine großartige überarbeitete Darstellung der Kommentare in einem Serendipity-Blog entwickelt, erklärt und live zu bestaunen in seinem Blog. Einer der Hauptaspekte ist die komplett überarbeitete Darstellung
erlgray Theme mit hor. Sidebar
Wie der Name schon sagt solte erelgray eigentlich ein Grau-Silber Template werden. Aber im Verlauf wurde es dann so wie man es jetzt sieht. Das Besondere an diesem Template ist, dass es eine horizontale Sidebar unter dem Banner gibt. Diese habe ich für zu
Wie der Name schon sagt solte erelgray eigentlich ein Grau-Silber Template werden. Aber im Verlauf wurde es dann so wie man es jetzt sieht. Das Besondere an diesem Template ist, dass es eine horizontale Sidebar unter dem Banner gibt. Diese habe ich für zu
Avatare für Trackbacks und Monster ID's
Ich bin endlich dazu gekommen, Don Chambers Vorlagen für die deutlich schickere Kommentar und Trackback Darstellung einzubauen (link). Sieht nun viel übersichtlicher und netter aus. Dabei ist mir wieder einmal aufgefallen, dass das Avatar Plugin
Ich bin endlich dazu gekommen, Don Chambers Vorlagen für die deutlich schickere Kommentar und Trackback Darstellung einzubauen (link). Sieht nun viel übersichtlicher und netter aus. Dabei ist mir wieder einmal aufgefallen, dass das Avatar Plugin
Serendipity theme 'Exotic'
Exotic s9y themeOpen Source designs are so wonderful, many of them look fantastic, yet they're free to download and port to blog engines like Serendipity. I've produced a few themes in the past, but this is the first template released by s9y-users.com, an
Exotic s9y themeOpen Source designs are so wonderful, many of them look fantastic, yet they're free to download and port to blog engines like Serendipity. I've produced a few themes in the past, but this is the first template released by s9y-users.com, an
Gravatar Plugin
Ich habe es gerade eben schon per Twitter angekündigt. Das Gravatar-Plugin, welches ich am Wochenende installiert habe tut endlich. Dazu war es notwendig, das comments.tpl auszutauschen. Alles weitere dazu erklärt Don Chambers in einem entsprechenden
Ich habe es gerade eben schon per Twitter angekündigt. Das Gravatar-Plugin, welches ich am Wochenende installiert habe tut endlich. Dazu war es notwendig, das comments.tpl auszutauschen. Alles weitere dazu erklärt Don Chambers in einem entsprechenden
Serendipity comments via an unordered list
Serendipity themes give us nearly unlimited customization options. We can change the color of a background, use of fonts, width of any particular browser's viewport, even the structure of any specific element. I have found
Serendipity themes give us nearly unlimited customization options. We can change the color of a background, use of fonts, width of any particular browser's viewport, even the structure of any specific element. I have found
Grischa
Homepage
12/18/2007 09:54PM
But this will be my Christmas work, because I like your new comment style a lot !
Thanks for the very nice and interesting email conversation, I enjoyed it a lot!
Judebert
Homepage
12/18/2007 10:51PM
I hope you get lots of comments, so we can see what threaded comments look like in the new style.
Don Chambers
Homepage
12/18/2007 11:10PM
I really like this format, and hope others give it a "test drive" to see if there are ways to improve or expand on it.
And thanks again Grischa for making the changes I requested to the avatar plugin!!!
Everyone - keep those comments coming so we can all see the results in this new format!
Carl
12/19/2007 01:02AM
Carl
Homepage
12/19/2007 01:06AM
Don Chambers
Homepage
12/19/2007 08:53AM
Your second comment used an email address, so the plugin cycles through the available services until it finds one, then uses it. These services can be prioritized. I have it in the priority of Gravatar -> Favatar ->Pavatar ->MyBlogLog, although I am thinking about moving MyBlogLog into #2.
Carl
Homepage
12/19/2007 11:15AM
Good work.
Grischa
Homepage
12/19/2007 11:37AM
Gravatar uses the email. So no email, no Gravatar.
MyBlogLog and all other use the URL specified by the user. Carl entered a hompage in his second entry, so the plugin was able to fetch an avatar.
Wich avatar is fetched depends on what information the user entered, what is found and the order of the avatar types shown below the comment box.
Don Chambers
Homepage
12/19/2007 03:39PM
Matthias
Homepage
12/19/2007 03:21AM
YellowLed
Homepage
12/19/2007 07:02AM
Great. Just when I thought I was finished with my own template, you come up with this. Grrr!
Don Chambers
Homepage
12/19/2007 03:42PM
I actually have another new idea up my sleeve... I just want to let this one settle in before moving on.
See, this is the reason I cannot finish anything!!!
YellowLed
Homepage
12/19/2007 07:57PM
BTW: Is there a particular reason why you don't display the commentator's email address?
Don Chambers
Homepage
12/19/2007 11:33PM
Forums are great in that they allow every user to decide whether to show, or hide, an email address. Most blogs, including s9y, do not provide that ability. I have elected to use s9y's ability to hide email addresses so visitors can feel comfortable about providing it to me, and for functional purposes, such as these avatars, without worrying about spam and other consequences of revealing email addresses to an unknown audience.
Meanwhile, if anyone wants to contact YellowLed, his email is william.gates@microsoft.com!!!
Grischa
Homepage
12/23/2007 06:55AM
And speaking about Gravatar: The blog doesn't show the email adress to this service. An md5 key is produced, that is shown to Gravatar. So: If Gravatar doesn't know the email yet (because you have an account there), it won't get it by the avatar reading call.
Regarding email addresses, Gravatar is safe. But if you have an account there, Gravatar could log, what you are commenting when and where..
Carl
Homepage
12/20/2007 12:47AM
Sorry, I already get too much spam without making it even easier for these nasty people, and like most of us I'm pretty easy to contact if people really want to reach me, in fact most people can reach me in two clicks from almost any site I actively comment on so why would the blog owner need to publish my email address.
Don Chambers
Homepage
12/20/2007 01:42AM
Unfortunately, as we all know, the web is filled with those looking to "take advantage" of our mutual good will... they want our email addresses, passwords, and anything else they can get their hands on. This is why I am very careful about where I leave any of my email addresses (I have a LOT), and why I do NOT reveal email addresses of this site's visitors.
Don Chambers
Homepage
12/19/2007 05:51PM
My comment.tpl file will use a default "avatar", named comment_bubbles.png IF the avatar plugin is a)not installed, or b) installed, but not configured to output a smarty tag (in which case you would get my default, AND the plugin generated avatar).
If the plugin is configured to emit the smarty variable, this will replace my avatar. The plugin has the ability to specify a default avatar for users who do not have one on any of the services, or fail to provide an email address or url the services require to serve up the avatar.
The plugin does not provide its own default avatar - you must provide it. The easiest solution, if you like it, would be to upload my comment_bubbbles.png file to your media library and set that to the plugin's default avatar. This is how I have configured the plugin.
You may, of course, use anything you want as the plugin's default, but if you use the plugin, and do not specify a default, you will only see an asterisk for comment authors without a gravatar.
Grischa
Homepage
12/23/2007 07:01AM
Yesterday I added even a new feature to the avatar plugin for commentors not having any of these service based avatars: Monster ID avatars. They are great, because they are produced localy by the personal inputs the writer has given. Now even these writers not having a specific avatar get an unique avatar. You can see them at my blog. If you like them, just upgrade your avatar plugin and use the new "Monster ID" avatar instead of the "Default Avatar".
Don Chambers
Homepage
12/23/2007 05:21PM
I also want to point out to anyone who did not read it on your blog that you also enabled avatars for trackbacks, so I will modify my tpl and css for that as well soon.
You KNOW what functionality I want next...
Don Chambers
Homepage
12/25/2007 09:59PM
Having tested each of these different methods, I honestly think the gravatar service presents the best possible image quality as that image can be fetched at the desired size, rather than using css to resize the default image. For this reason, I am listing gravatar as my first choice for selecting avatars, and encourage anyone else using this plugin to do the same. My second choice is pavatar - simply because it works so easily by merely having a file named pavatar.png residing in your web root. Image quality is not as good as gravatar IF you want to use an image different from the 80px x 80px default, as I am doing in this new format.
Rob A
Homepage
01/31/2008 02:29PM
Don Chambers
Homepage
02/02/2008 01:35PM
With the exception of pavatar, the others work by hosting a remote image. That image can then be displayed based on certain information you provide in the comment. Gravatars work based on your email address, while Favatar and MyBlogLog display your image based on the homepage URL.
Pavatar also uses your homepage URL but is unique in that it is not remote. The file resides on YOUR site - not someone else's.
Rembrandt
Homepage
02/11/2008 05:34AM
I really really love the design!
so long...
Rembrandt
Don Chambers
Homepage
02/11/2008 11:57AM
Matthias
Homepage
03/15/2009 11:34AM
thanks for all your work here!
I´m searching a new theme for my s9y-Blog. Is your actual theme you use available ?
ray
04/03/2008 05:35PM
Love the work you have put into styling "comments.tpl" and "trackbacks.tpl".
I was wondering if it was possible to check the Email field, instead of the Name field for the "Self Reply" styling functionality.
--------
I tested this on my dev S9Y blog with comment moderation disabled and basically anybody who puts in the author's name could have the "Self Reply" styling applied to their comments.
-Ray
Don Chambers
Homepage
04/03/2008 07:42PM
You make a good point about the author... however, I suspected that the blog admin or entry author could easily intercept bogus comments that they did not submit. BUT, let's clean that up anyway!!
Look for this condition which sets the "self" class:
{if $entry.author == $comment.author}
And change it to this:
{if ($entry.author == $comment.author) and ($entry.email == $comment.clear_email)}
That now gives us 2 conditions which must be satisfied to get the "self" class... name AND email address.
I have not yet placed that revision on this site, but I have tested it in my sandbox and it works as expected.
ray
04/08/2008 07:21PM
That was an easier fix than I thought!
Cheers!
-Ray
Don Chambers
Homepage
04/08/2008 07:35PM
ray
04/08/2008 08:51PM
I will post the link as soon as it is live!
Still have to wait for the powers that be to approve on the new blog design (it's a company blog!).
------
I also made one more change to your comments.tpl code.
I made it so that only the entry author can view the comment author's email address.
It's a simple change really... on line 16 change from:
{if $comment.email}
to:
{if $comment.email && $entry.is_entry_owner}
Don Chambers
Homepage
04/08/2008 09:32PM
You really do not need the email address mod you provided if you use the spam protector plugin.
There is a configuration item labeled (in English) "Hide E-Mail addresses of commenting users". If you set that to yes, only admins will see the email address, and it will be obfusciated, removing the @ symbol and replacing it with [at].
Definitely share the link here, as well as on the s9y showcase, when your project is complete! Can't wait to see it!
ray
05/01/2008 07:35PM
The new theme is now up!
http://www.tradingpostfinancial.com/blog
Got permission to port a free, Wordpress theme called Seashore.
-Ray
Don Chambers
Homepage
03/15/2009 11:53AM
I will try to find some time soon to finish this template and release it.
Jane
Homepage
04/28/2008 01:00PM
Don Chambers
Homepage
05/02/2008 10:19AM
Don Chambers
Homepage
02/11/2009 08:47PM
{if ($entry.author == $comment.author) and ($entry.email == $comment.clear_email)}
As it turns out, that is not going to work. $comment.clear_email will only be available to logged in administrators....
Use this instead:
{if ($entry.author == $comment.author) and ($entry.email == $commentform_entry.email)}