- Posts: 23
- Thank you received: 2
Kunena 6.2.6 released
The Kunena team has announce the arrival of Kunena 6.2.6 [K 6.2.6] which is now available for download as a native Joomla extension for J! 4.4.x/5.0.x. This version addresses most of the issues that were discovered in K 6.1 / K 6.2 and issues discovered during the last development stages of K 6.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
9 years 10 months ago #1
by TomasFC
Deformed Avatars in Topics List view was created 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:
I hope this helps,
Tomás
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
Please Log in or Create an account to join the conversation.
9 years 10 months ago #2
by TomasFC
Replied by TomasFC on topic Deformed Avatars in Topics List view
Here's what it looks like:
Thanks
Tomás
Thanks
Tomás
Please Log in or Create an account to join the conversation.
Time to create page: 0.338 seconds