solved member avatars in group discussions fuzzy

Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
This has only been going on recently... maybe since last slew of updates. It's the same way now on both my sites, and I don't recall having done anything related to it to cause it.

I'm going to attach two screenshots and two links to examples showing the difference.

In /forum discussion threads, the member avatars are nice and clear and crisp. Here's a link to
a forum discussion showing it, and here's an attached screenshot showing how the user avatars look in Forums.
https://fotmd.com/forums/forum/site-questions-how-do-i/14489/how-do-i-add-my-new-photo-or-event-etc
forum avatars.png
forum avatars.png  •  122KB




--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

updated by @strumelia: 04/12/19 03:41:15AM
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
Now here's what's been showing recently in GROUP DISCUSSIONS....
A link to one example, and a screenshot of about the same size as the above screenshot. User avatars are now poor fuzzy quality, and are irregular sizes/shapes. I think the fuzziness is something new, maybe the shapes thing was there before.
In any case I'd like group discussion avatars to look as nice as the ones in Forum discussions.

A group discussion:
https://fotmd.com/strumelia/group_discuss/2045/no-longer-a-beginner
group avatars.png
group avatars.png  •  110KB




--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
douglas
@douglas
5 years ago
2,790 posts
I'm not seeing fuzzy images at either of those links, you might try clearing your browser cache?

Hope this helps!


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
Douglas, you are only looking at the top big avatar, the one of the person who started the discussion... that one is always fine looking.
Sorry, I mean the avatars showing from the REPLIES to the Group discussion, see here again:
https://fotmd.com/strumelia/group_discuss/2045/no-longer-a-beginner
I guess you need to LOG IN to see the replies in Group discussions in the link I gave, though. Should I send my logins to you?
You can see it especially on my own avatar there... compare to the forum discussion.
No this is not a browser cache thing... happens Chrome and FF, for weeks now.
Thanks...


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
SoftDesigns
SoftDesigns
@softdesigns
5 years ago
242 posts
@strumelia - We were having similar issues before with some avatar images, and more specifically on the background for audio and video. Did you have any similar fuzzy image bugs with audio or video poster cover backgrounds?

For example, when your users upload video, do you have any issues with the video cover / background image?
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
Softdesigns, no I am not having any fuzziness of any kind, of any images or avatars on my audio, soundcloud, youtube, or uploaded video pages. My issue seems limited to only the avatars in USER REPLIES to GROUP Discussions. And it didn't used to be that way. The user avatars in replies to my site's Forum Discussions are all nice and sharp looking, just like the avatars in this Jamroom discussion.


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
douglas
@douglas
5 years ago
2,790 posts
Strumelia:
Douglas, you are only looking at the top big avatar, the one of the person who started the discussion... that one is always fine looking.
Sorry, I mean the avatars showing from the REPLIES to the Group discussion, see here again:
https://fotmd.com/strumelia/group_discuss/2045/no-longer-a-beginner
I guess you need to LOG IN to see the replies in Group discussions in the link I gave, though. Should I send my logins to you?
You can see it especially on my own avatar there... compare to the forum discussion.
No this is not a browser cache thing... happens Chrome and FF, for weeks now.
Thanks...


Yes, send us your login info so we can check it out.

Thanks!


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
Thanks Douglas! - I gave a MasterAdmin login in a new support ticket., with a link to this thread.


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
douglas
@douglas
5 years ago
2,790 posts
@strumelia can you take a look at it now and let me know if the images look any better?

Thanks!


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
Yes it is perfectly clear now, not fuzzy. :)
I want to make those images sized like they are in my Forum however. When I get back home in a couple of hours I'll post the code here and ask how I can adjust it. I have to go out the door right now, but YES they are no longer fuzzy. Genius! ;)


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
Ok, there's still an issue going on in the avatars in Group Discussions.
(as before, all is fine in Forum discussions).
If you go look at any Group Discussion, you'll see that the avatar for yourself that's NEXT TO THE REPLY TEXTBOX for typing a reply is still blurry/fuzzy. (That avatar is sized slightly smaller than the ones showing next to replies... but that only shows that it's pulled in from a different code than the post avatars.)
You might not be able to see the fuzziness in this screenshot, but it's quite noticeable if you log in:


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
In contrast, the FORUM discussions avatars are all nicely sized and crisp and sharp- even the ones next to the 'reply' textboxes. See here:


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
I should add that once I get these group avatars looking good, I'll need to duplicate the fixes in this thread onto my other jr site, which has the same issues. Thanks!


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
douglas
@douglas
5 years ago
2,790 posts
Let me know if that looks better.

I modified the comment_form.tpl and the item_list,tpl in the comment module.

ACP > Item Features > Comments > Templates.

You can use the compare tool to see what I did, which basically all I did was change the image size from small to medium and then added a style parameter to add a max-width and max-height.

Hope this helps!


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
Douglas, it all looks much, much better now. I carried the changes you made to three jrComment templates onto my other jr site, and it worked fine.
I had been looking all over in the templates of the jrGroup and jrGroupdiscuss modules for these user image settings.... I forgot that Group discussion replies are actually just COMMENTS (the first post of the discussion itself being the 'item' being commented on), they're not true forum posts. If I had remembered that, I might have looked in the jrComment module templates.
But I think you fixed it better than I could have anyway.
Thank you very much! I'll mark this solved now. :D


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

updated by @strumelia: 01/08/19 06:41:07PM
douglas
@douglas
5 years ago
2,790 posts
Your welcome!

To be honest, since I don't use the group discussions module very often, it took me a minute to figure out it uses comments as well. ;)


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
Ugh, my apologies! I hate to reopen this one more time, but....

There's one more place in Groups where I see the member profile images are still blurry/toosmall/fuzzy.
On the Group's main page, there's a block on the right column with a grid of small member profile images.
They used to be nice a clear... now seem smaller and fuzzier.
See my screenshot below.

I've figured out that these images may be controlled in the jrGroup item_detail.tpl. It 'seems to be' where it calls for user images to be "xsmall" in two lines. Yet when I change the code to "small" instead of "xsmall", it simply makes the images TOO big, and still blurry. Can you help me? Note also that I have two custom SKIN override templates called jrGroup_item_detail.tpl and jrGroups_item_detail.tpl ...I suspect the one called "jrGroups"-with an s, is a 'mistake template' from way long ago, but I've always been afraid to just delete it.
Here's the code in question in my jrGroup item_detail.tpl , and below is the screenshot of where the problem shows up.
                <div class="title">
                    <h3>{jrCore_lang module="jrGroup" id=13 default="Members"}</h3> &nbsp; <strong><small><a href="{$jamroom_url}/{$item.profile_url}/{$murl}/members/{$item._item_id}/{$item.group_title_url}">{jrCore_lang module="jrGroup" id=70 default="View All"}</a></small></strong>
                </div>
                <div class="item">
                {foreach $item.group_member as $id => $member}
                	{if $member@index < $_conf.jrGroup_max_images}
                        {if $member.member_status == 0}{jrCore_lang module="jrGroup" id=71 default="pending" assign="status"}{elseif $member.member_status == 1}{jrCore_lang module="jrGroup" id=63 default="active" assign="status"}{else}{jrCore_lang module="jrGroup" id=72 default="pending deletion" assign="status"}{/if}
                        	{if jrProfile_is_profile_owner($item._profile_id)}
                            	<a href="{$jamroom_url}/{$murl}/user_config/group_id={$item._item_id}/user_id={$member.member_user_id}">{jrCore_module_function function="jrImage_display" module="jrUser" type="user_image" item_id=$member.member_user_id size="xsmall" crop="auto" title="@{$member.profile_name} ({$status})" alt="@{$member.profile_name} ({$status})" class="img-{$member.member_status}" style="float:left"}</a>
                        {else}
                            {if $member.member_status != 0}
                                <a href="{$jamroom_url}/{$member.profile_url}">{jrCore_module_function function="jrImage_display" module="jrUser" type="user_image" item_id=$member.member_user_id size="xsmall" crop="auto" title="@{$member.profile_name}" alt="@{$member.profile_name}" class="img-1" style="float:left"}</a>
                            {/if}
                        {/if}
                    {/if}
                {/foreach}
                <div style="clear:both"></div>
                </div>
group-members-widget.jpg




--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
michael
@michael
5 years ago
7,714 posts
There are a couple of locations in that code that call the image display function. It looks like this:
{jrCore_module_function function="jrImage_display" module="jrUser" type="user_image" item_id=$member.member_user_id size="xsmall"......

Change that
size="xsmall"
to something else.

Any of these are valid:
 xxsmall,xsmall,56,small,icon96,icon,medium,large,larger,xlarge,xxlarge,xxxlarge,1280,original
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
Ok, it's interesting: when I previously tried changing those two instances simply from "xsmall" to "small", the images there became way too big and were still all fuzzy.
However when i changed the "size=" part from simply "size=xsmall" to "size="small" width="48" height="48", the images were a little too large but were now crisp and clear. So then I tried making the 48's into 40's, ...and now it's perfect size and nice and sharp looking. Kept the "auto crop" parts in as well.

Weird that "xsmall" by itself was fuzzy, but "small" with including the specified dimensions which were nearly the same size as xsmall produced a clear image.
Is there a known reason why 'some' of these user images in Groups suddenly became blurry at a point in time a few weeks ago? Just curious.

Thanks again- and I'll mark this 'solved' again. Unless I find yet another instance somewhere in the Groups that I can't figure out myself now where/how to fix the code. =8-p


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
michael
@michael
5 years ago
7,714 posts
size="1280"
by itself would give you a huge 1280px image.
width="48"
would set the box that contains the image to 48px
height="48"
would set the height that contains the image to 48px

normally you wouldnt put a 1280 image inside a 48px box because its a waste of bandwidth. You can, it just slows the page load down.

The reverse is also true, if you put an image which is actually 24 and set the box to 48px what you get is an image that is blury but loads fast.
Strumelia
Strumelia
@strumelia
5 years ago
3,603 posts
Yes, I understand better now. Thank you Michael! :)


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015