×
Blue Eagle 1.5.2 Released (11 Dec 2018)

The Kunena team has announce the arrival of Kunena Blue Eagle 1.5.2 which is now available for download as a native Joomla extension for Kunena 5.1. This version addresses most of the issues that were discovered in K 1.5.1 and issues discovered during the development stages of K 1.5.2.

× Please note: The Kunena project team takes NO responsibility for maintaining nor supporting anything in this category.

Idea Deformed Avatars in Topics List view

More
4 years 6 months ago #1 by TomasFC
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:

#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;}
B)
I hope this helps,
Tomás
The following user(s) said Thank You: sulpher

Please Log in or Create an account to join the conversation.

More
4 years 6 months ago #2 by TomasFC
Here's what it looks like:



Thanks
Tomás
Attachments:
The following user(s) said Thank You: sulpher

Please Log in or Create an account to join the conversation.

  • Not Allowed: to create new topic.
  • Not Allowed: to reply.
  • Not Allowed: to add attachements.
  • Not Allowed: to edit your message.
Time to create page: 0.117 seconds