Avatar Consistancy
By James on Sunday, 22 March 2015
Posted in Technical Issues
Replies 13
Likes 0
Views 660
Votes 0
Avatars within EasySocial are not consistently rounded, squared, etc...

For example, if I use WireFrame Theme and have the User Module enabled as well as the DropDown Menu Enabled. The User Module output of members avatars are square with a 2px border radius but with the DropDown Menu Module the border radius is set to 50% which makes it round.

Would it be possible to have a global setting in the EasySocial Theme to choose the avatar styling so that this is passed to all other areas where the avatar is included? If not, can we find a way to manage these consistently without having to use CSS overrides?

Thanks,
James
Hi James,

Oh, I thought this is the real site. I am sorry for the confusion. May I know, do you do template overriding to the dropdown module? If it so, you need to find this file: /templates/xxxx/html/mod_easysocial_dropdown_menu/default.php and override it with this attached file. If you're not doing template override, you can replace this file here: /modules/mod_easysocial_dropdown_menu/tmpl/default.php .

Hope this helps. I am sorry for the inconvenience caused.
Yasser Ibrahim
·
Thursday, 26 March 2015 11:29
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello James,

I am always against adding more settings for small UI stuffs like this because we often end up with a million different settings and that is what happened with EasyBlog and eventually led to confusing settings / options / not easy at all.

As an extension developer, we should be setting the standards and in this case, we should standardize the avatar used in the module as well as all other areas in EasySocial. If you feel that you dislike the square avatars and want to opt for a rounded avatar instead, you should customize them in the css file (which is not too difficult at all).
Mark
·
Sunday, 22 March 2015 13:15
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for the reply Mark.

If your against adding a setting (which is fine) please standardize the format you choose. As mentioned above the consistency isn't there. Its easy for some of us to make the aesthetic changes we need but to new users unfamiliar with css it maybe difficult.

Also, in the EasySocial Dropdown Menu Module... I am looking in the code to find the typical avatar sizing but am unable to locate it. This is needed because currently if I resize the image say to 150px x 150px the image is distorted because of the css resizing it so much. Is there a way for me to correct this issue?


Avatar Sizes

These are available sizes and it's dimension

SOCIAL_AVATAR_SMALL - Smallest version of avatar. Dimensions: 32 x 32
SOCIAL_AVATAR_MEDIUM - Medium version of avatar. Dimensions: 64 x 64
SOCIAL_AVATAR_SQUARE - Large square version of avatar. Dimensions: 180 x 180
SOCIAL_AVATAR_LARGE - Large version of avatar. Dimensions: 180x (y) (This is a proportionate size)


Thanks,
James
James
·
Monday, 23 March 2015 13:38
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello James,

Depending on which place the avatar is rendered, the sizes could be square or proportionate. It all actually depends on the css that is being used. Is it a square image?
Mark
·
Monday, 23 March 2015 21:13
·
0 Likes
·
0 Votes
·
0 Comments
·
In this case the avatar is round (dropdown menu module).

The avatar size if I remember correct is defaulted to 32px x 32px which isn't bad but as I mentioned when wanting to scale up in size the image is distorted because its using a small version vs a large version.

James
James
·
Monday, 23 March 2015 21:28
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi James,

I am sorry for the delayed reply.
I apologize as if I understand you correctly, you want the dropdown module avatar from rounded to square and the avatar's size is larger isn't? Please go to this file: /modules/mod_easysocial_dropdown_menu/styles/style.css . Update the css code to from this:


body div#fd.es.mod-es-dropdown-menu .es-avatar {

  width: 32px !important;

  height: 32px !important;

  line-height: 32px !important;

  vertical-align: top;

  border-radius: 50%;

  background: #f4f4f4;

  border: 1px solid #d7d7d7;

  display: inline-block;

}

body div#fd.es.mod-es-dropdown-menu .es-avatar img {

  width: 30px !important;

  height: 30px !important;

  line-height: 30px !important;

  border-radius: 50%;

}


to this:


body div#fd.es.mod-es-dropdown-menu .es-avatar {

  width: 62px !important;

  height: 62px !important;

  line-height: 32px !important;

  vertical-align: top;

  background: #f4f4f4;

  display: inline-block;

}

body div#fd.es.mod-es-dropdown-menu .es-avatar img {

  width: 60px !important;

  height: 60px !important;

  line-height: 30px !important;

}


Then please open this file: /modules/mod_easysocial_dropdown_menu/tmpl/default.php and find this line: 149. Please update the code from this:


<img src="<?php echo $my->getAvatar();?>" alt="<?php echo $modules->html( 'string.escape' , $my->getName() );?>" />

to this:


<img src="<?php echo $my->getAvatar(SOCIAL_AVATAR_LARGE);?>" alt="<?php echo $modules->html( 'string.escape' , $my->getName() );?>" />


Hope this helps. If you have anymore question, please ask us here.
Yasser Ibrahim
·
Tuesday, 24 March 2015 18:36
·
0 Likes
·
0 Votes
·
0 Comments
·
Mohd, thanks for the help.

The first part was the easy fix. The second part is what was missing.
Thank you again for the help.

James
James
·
Tuesday, 24 March 2015 20:32
·
0 Likes
·
0 Votes
·
0 Comments
·
Unfortunately this didn't work.

See the results below.

James
James
·
Tuesday, 24 March 2015 20:40
·
0 Likes
·
0 Votes
·
0 Comments
·
User has an avatar, just to clarify.

James
James
·
Tuesday, 24 March 2015 20:41
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi James,

I am sorry for the late reply.
I have apply some fix on your site here:
1. /modules/mod_easysocial_dropdown_menu/styles/style.css
2. /templates/ja_sugite/css/custom.css
3. /templates/ja_sugite/html/mod_easysocial_dropdown_menu/default.php

May I know, is this what you're trying to achieved here: http://screencast.com/t/9oRF7GdsK ?

Looking forward to hear from you again.
Yasser Ibrahim
·
Wednesday, 25 March 2015 13:08
·
0 Likes
·
0 Votes
·
0 Comments
·
Het Mohd, thanks for the information but Im not having any issues with the site in my "Site Details" I am actually working on a project in my localhost related to the same project above. Can you send me the new default.php or whatever change is needed to achieve viewing the avatar? As mentioned above, replacing the line of code in the default.php you suggested earlier didn't work.

Thanks,
James
James
·
Wednesday, 25 March 2015 20:20
·
0 Likes
·
0 Votes
·
0 Comments
·
Mohd, no reason at all to be sorry.

This version worked great, thank you!

James
James
·
Thursday, 26 March 2015 12:30
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi James,

I am glad to hear your issue is now resolved. If you have anymore question, please do ask us here.

Have a nice day ahead.
Yasser Ibrahim
·
Thursday, 26 March 2015 16:03
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post