Zikula Network
Subscribe!
Thoughts about Avatars
Modularity is the major strength of Zikula - years of preaching and teaching succeeded in a lot of really modular solutions: No content module contains its own WYSIWYG-editor or comment function anymore. And that is good. While working on foerdefluesterer.de I realized the disadvantage of this approach - or fact that it's not fully implemented yet: Avatars are being handled differently in each and every module...
A Brief History of Avatars in Zikula
Do you remember the times before there was the Avatars-modules? There was a directory called /images/avatar (who forgot the s here?) and you uploaded a set of avatars to it for your users to choose. Then some clever guy implemented Envo-Avatar for the Envolution fork which was backported to Postnuke and enabled you to upload your very own avatar.
The Problem
Yet the value for the avatar's name is still stored in the user data and can be called with pnUserGetVar. That function only returns the name of the avatar. What they do with it is completely up to the module programmer.
The Avatar module take and image and resizes it to a size the webmaster can set. So the problem is: You have a horizontal or vertical rectangle with unknown dimensions. And you only have it in one size - Wether you use it in the profile as profile image or in a list of people online.
If you only have one of these rectangles, you don't have much of a problem, but if you need to display several of them in a list of buddies, in a memberslist or even in a forum thread: The once horizontal and once vertical images make the layout look clumsy.
If you additionally offer Gravatars in you commments for example you add another source of problems. Mateo put a nice solution into the templates of zikula.org: He fetches the default avatar, and overwrites it with the real avatar if set and then fetched the Gravatar if available. But those are several lines of Smarty logic that you have to repeat in every templates that displays avatars...
And still you don't have the problems of the varying dimensions solved. ContactList simply forces all avatars into one format: A vertical rectangle. That in turn makes the avatars sometimes appear distorted.
And ContactList also brings up another problem: How to handle users without an avatar? Sometimes the userdata says the avatar is "" and sometimes it's "blank.gif". So find this piece of code in each any every well-coded module: if avatar is empty or equals blank.gif do this and that. ContactList fetches an icon from the icon set to display at least something. I often replaced blank.gif with that icon... There are as many solutions as there are modules.
My Workaround
For foerdefluesterer.de I had to find a workaround. I hacked the Avatar module so that it resizes the avatar to the maximum size and then cuts out the square in the center. Of course parts of the avatar get lost, but the result looks quite good in the cases I tested. I set the size of the avatar to a relatively big size (120x120px). So I have a high quality image to work with and to display in profiles.
Then I wrote a plugin that generates resized versions of the avatar. I can call it with any number of pixels I need. So I can use a 30 pixel version in the list of people online and a 80px version in forums, contact lists, and so on. The plugin simply generates a resized version if no image in the required size is available or regenerates it, if the original avatar is newer than the resized version.
The module also fetches automatically a default avatar if none or blank.gif is set.
Now I build this plugin into every template that calls avatars - at least as many as I have been able to convert until now
- The result looks quite nice.
The only things missing: Optional gravatar support and a function that cleans up the avatars once in a while...
Conclusion?
I would like to have a discussion on this topic: Are square avatars really the best solution for clean layouts? A central avatar solution still doesn't need to be a core function but maybe it should be supported like the messanger- and the profile module in 1.1.x - what should the Avatar module do?
Share This | Print
Trackbacks
(The URL to TrackBack this entry is: http://blog.zikula.org/index.php?module=TrackBack&id=26,1-45). If your blog does not support Trackbacks you can manually add your trackback by using this form.Comments
I like what you have done with avatars on the foerdefluesterer.de site. I wish I could see the forums in action, but I get the idea.
Avatars have always been a mostly ignored thing for me. I don't build a lot of community site and so I have never had to learn much about them.
I actually am working on a project right now that will require me to build avatars built into pages and would like to see what you did with the plugin, if you feel like sharing.
I think square avatars are here to stay and I don't mind. The web changes so frequently, maybe boxy is coming back soon? :)
Concerning this, if you don't want to bother with GD and smarty modifier you can use the css property "overflow:hidden" and fix a hard coded width and height which will perhaps easier to do :)
@mumuri: That is not really the same - that way you can always only display the upper left corner of an image. I made good experience in cutting out the center of it.
@kaffeeringe : no you can play with background position in order to center it;
For instance
background : url(pic.gif) no-repeat 50% 50% ;
If you wan 'na try
here is a small and uggly sample
<style>
img{
overflow:hidden;
background :red url(http://www.gravatar.com/avatar.php?gravatar_id=f74d41f8653c22203131e6669b6c8746&size=80&default=http%3A%2F%2Fblog.zikula.org%2Fthemes%2Fblog%2Fimages%2Fgravatar_80.jpg) no-repeat 50% 50% ;
width:30px;
display:block;
height:30px;
}
</style>
<img src="http://www.pezet.de/images/1-pixel-transparent.gif" />
Css can be quite good in this situation too
Calling the avatar is first, then displaying it can be at the discretion of the designer.
If there is a method to call the avatar of a user that can be made a simple standard, would that be in the API? If it is there, what modules are using it and which are not?
There might be subtle variations that use the API in a unique way, complying to the API, but are other than a "standard." We are dealing with abstracted layers, in the end the "thing" in common, is simple and easily conveyed. That simplicity could be the standard.
Working with the templates that come with the modules I have run into a few things you might recognize as standard. But heck many modules even on the admin side don't even have the most common of links in their menu, and that is the one that returns you to the main administration page/tab. As far as standards go, it seems that when the admin menu system came into being many developers dropped this common web standard of providing a link back to the prior index.
In an abstracted system such as we have, those basic standards are as important as ever. Those basic standards are a common courtesy. If they were a necessity, or mandatory some folks would even complain that the system was too rigid. So to be egalitarian and open, some of the simple basic parts of a web page have been considered optional.
Yea, I remember the various avatar implementations. I also see currently the method wickula, dizkus, crpVideo, myprofile, (to name a few popular modules directly,) all call the avatar differently. It is like they have all had to reinvent the wheel.
It shows there is a flexible and dynamic system, sure. It could also be interpreted as Raw Creativity. Wow!
But it is our lovable Rube Goldberg Machine, our kluge! At worst it could also be viewed as unguided, lacking direction, a failure to share a common purpose.
For a long time good template designers have masked the psychotic, or to be a bit nicer, the sociopath underpinnings with a spit polish. My sympathies go out to all who have found excellent workarounds and made do.
The Avatar module is not part of the core, but the avatar is a value/attribute of a very core module! The consideration this attribute is given is indicative of the system as a whole, neglect.
There is a proverb "The shoemaker's children go barefoot." Answers.com had a great summation of the meaning of this, "A skilled or knowledgeable person commonly neglects to give his own family the benefit of his expertise."
Neglect in our case is a failure to deliver the basic standards the API was created for in the first place. Reusable code snippets like calling the avatar. Unless it is pure obstinacy on the part of module creators to be terminally unique, there has to be a reason it gets implemented differently so often, this to the rest of the world is called awkwardness. It could just be the age of the API, (i would like to give it an excuse, the benefit of the doubt,) but I have to wonder if it is allowed to move forward in this awkwardness without any training/limits/standards are we doing it more harm than good?
Harm in the sense of trading the good will of the user base who have been holding out hope that there will be a coalescence from abstraction, that the pair of shoes you are making will fit them as though it was made for them, because it was made for them. Harm in the sense that the claims that end users don't understand all the cool stuff inside are just not the people who the system is suited for and they should find something more appropriate.
I am not a coder, I enjoy graphic design and layout, but I see the code calls. I see where one layers abstraction/job meets my own abstraction/job. I read posts I don't fully understand or are beyond my own personal needs as part of understanding the varieties of abstraction.
I recently spent a month and a half, maybe two months, working on a basic theme that tries to eliminate the variances from all available modules' user templates. I created a standard for myself across 79 modules, and I can admit it is no where near pretty or elegant or complete in and of itself, but it allowed me to develop a variation in just 2.5 days that is not too hard on the eyes.
Instead of having to tweek 79 sets of templates that I cannot trust to conform to a page, that I have to reach into at every turn of the road, I have 5 basic page layouts, and 3-5 style sheets depending on the layout. And I want to streamline it more! (yes I have seen blank theme and I like it too, but even with it you have to go touch all the module templates.) Some modules have a header, others don't. Some, the menu returns you to the modules index, others don't. Some let the category list push your content half way down the page, others implement breadcrumbs.
Yea, I have seen the changes in Avatar(s) - but I still don't get how it is easily called in the News module. Maybe, in the next version... :)
I love this thing...
Maybe I have been working on my own too long...
well, some good stuff..





Latest Comments