Modifying Followers/Following section of Profile Summary?

[Former Member]

I've been having this problem with the Following/Followers section of the Summary tab of a user's profile. If the user is followed by/following a fellow user with a long display name, that user's name shows up like this: link

As you can see, the "v" in Rodya Raskolnikov's name shows up by itself on the next line, which just looks ugly.

I'm wondering if there's a modification that will put only whole words on the next line if the username is too lengthy (rather than just a letter--so the whole word "Raskolnikov" would be sent to the next line).

OR, what would be even nicer, or maybe easier (I wouldn't know), is a modification that removes the usernames from the Following/Followers section altogether and just make the avatars act as the links to that user's profile.

So are either of the above modifications possible? 

[Brian]

Hi, pauthperu.

It's possible to prevent whole words from breaking, but they'll cut off when they reach the end of the followers/following boxes.


To show just avatars, go to Structure > Layout Templates > User Profile > Summary. Find these sections.

<div class="mini-avatar">
    $[following.avatar_medium]
</div>

<div class="mini-avatar">
    $[follower.avatar_medium]
</div>

And change them to this.

<div class="mini-avatar" style="cursor: pointer;" onclick="location.href = '$[following.href]';">
    $[following.avatar_medium]
</div>

<div class="mini-avatar" style="cursor: pointer;" onclick="location.href = '$[follower.href]';">
    $[follower.avatar_medium]
</div>

Then add this to the very bottom. This will hide the profile links below their avatars, and show their names when hovering over their avatar.

<script type="text/javascript">
    $('.mini-user > .name').hide();
    $('.mini-user > .mini-avatar').each(function(){
        $(this).attr('title',$(this).next('.name').children('.user-link').html());
    });
</script>

[Former Member]

Thanks! It works great