GK JomSocial Members small problem

Hi!
I have a little problem with this module... everything is well, except the fact that the avatar images are shown in their own aspect ratio, distorting the module. Is there any option to center crop the images that are not square, so that they would all be square on the front page, showing correctly the usernames and without distortions?

I attached a snapshot to understand it better.

Hi,

I think you should contact JomSocial team to get better help, if you can give me the link to see that problem I might find some css trick to fix that.

Cheers,

Hi,

I think you should contact JomSocial team to get better help, if you can give me the link to see that problem I might find some css trick to fix that.

Cheers,

But it's the GK module... I don't think it is JomSocial's fault. I guess.
The website is this one.

Thanks for giving me the link, however I can't connect to the site now, there is some problem with connecting to your server at the moment, I will get back to check it again later.

Cheers,

Thanks for giving me the link, however I can't connect to the site now, there is some problem with connecting to your server at the moment, I will get back to check it again later.

Cheers,

Any luck?

I can make it like this http://easycaptures.com/fs/uploaded/511/3366523217.jpg

I know it's not perfect but we could solve the problem with just a small change in css.

In order to do that, add this code to CSS Override:

Code: Select all

.gk_js_members_main .gk_js_avatar img, .gk_js_member_wrap .gkIsHeaderRight, .gk_js_member_wrap, .gk_js_member_wrap .gkIsHeaderBottom, .gk_js_member_wrap .gkIsHeaderTop, .gk_js_member_wrap .gkIsHeaderLeft, .gk_js_members_main .gk_js_avatar{
width: 100%!important;
}
.gk_js_members_main .gk_js_avatar > span{
text-align: center!important;
}


Cheers,

I can make it like this http://easycaptures.com/fs/uploaded/511/3366523217.jpg

I know it's not perfect but we could solve the problem with just a small change in css.

In order to do that, add this code to CSS Override:

Code: Select all

.gk_js_members_main .gk_js_avatar img, .gk_js_member_wrap .gkIsHeaderRight, .gk_js_member_wrap, .gk_js_member_wrap .gkIsHeaderBottom, .gk_js_member_wrap .gkIsHeaderTop, .gk_js_member_wrap .gkIsHeaderLeft, .gk_js_members_main .gk_js_avatar{
width: 100%!important;
}
.gk_js_members_main .gk_js_avatar > span{
text-align: center!important;
}


Cheers,

Thanks, I will use this until I'll find something that center crop it.

I will work with developers and will let you know if we have any better solution.

Cheers,

I will work with developers and will let you know if we have any better solution.

Cheers,

Thank you!

To maintain separation between users and centering images I've applied this override:

Code: Select all

a.gk_js_avatar { overflow:hidden; }
a.gk_js_avatar img { display:block; margin-left:auto; margin-right:auto; }

This will also crop any image larger than username div to avoid overlap with others.