Hi,
My users upload their avatar pictures and they are all different sizes and aspect ratios, some are tall, some are wide. So their thumbnails in the category view or places like "recent topics" their pictures (for the "latest post") get squished to fit the square, resulting in some long faces, or fat faces, or whatever the picture is, but very few, if any, upload square avatars that show properly.
So my solution was to do show the thumb as a circle where the image fills the circle and any excess is cropped out.
To do this, I found that I could only do it via CSS to the background, not to the image tag, by giving the attributes "center center" and "cover". I added the avatar the background of the span tag containing the image, and gave the image tag a "visibility:hidden" attribute so the background is visible, and the link is still active.
I'm sure there might be cleaner ways to do this, but it's what I managed. Here's the code of the changes I made:
Code:
#In /components/com_kunena/template/blue_eagle/html/topics/default_row.php
(Line 93) Change to:
<span class="ktopic-latest-post-avatar hidden-phone" STYLE="background-image: url(<?php echo KunenaFactory::getUser($this->topic->getLastPostAuthor())->getAvatarURL() ?>)"> <?php echo $this->topic->getLastPostAuthor()->getLink( $this->topic->avatar ) ?></span>
#In /components/com_kunena/template/blue_eagle/html/topics/user_row.php
(Line 92) Change to:
<span class="ktopic-latest-post-avatar" STYLE="background-image: url(<?php echo KunenaFactory::getUser($this->topic->getLastPostAuthor())->getAvatarURL() ?>)"> <?php echo $this->topic->getLastPostAuthor()->getLink( $this->topic->avatar ) ?></span>
#In /components/com_kunena/template/blue_eagle/html/category/default_row.php
(Line 96) Change to:
<span class="ktopic-latest-post-avatar hidden-phone" STYLE="background-image: url(<?php echo KunenaFactory::getUser($this->topic->getLastPostAuthor())->getAvatarURL() ?>)"> <?php echo $this->topic->getLastPostAuthor()->getLink( $this->topic->avatar ) ?></span>
#In /components/com_kunena/template/blue_eagle/html/category/list_embed.php
(Line 121) Change to:
<span class="klatest-avatar hidden-phone" STYLE="background-image: url(<?php echo KunenaFactory::getUser((int)$last->last_post_userid)->getAvatarURL() ?>)"> <?php echo $last->getLastPostAuthor()->getLink( $useravatar ); ?></span>
#In /components/com_kunena/template/blue_eagle/css/kunena.forum-min.css
Update the following 2 styles:
#Kunena .klatest-avatar,#Kunena .ktopic-latest-post-avatar{display:block;background-position:center center;background-size:cover;height:36px;width:36px;padding:1px;margin:4px 6px 2px 0;border:1px solid;float:left;border-radius:100px;-moz-border-radius:100px;-o-border-radius:100px;-webkit-border-radius:100px;}
#Kunena img.klist-avatar,#Kunena .klist-avatar{height:36px;width:36px;border:0;visibility:hidden;}
I hope this helps,
Tomás