We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Avatar in header/console area | Forum

Umair
Umair Feb 24 '15
How can I put user avatar in the top link area with username? like in other social networking websites
Nickolay
Nickolay Mar 18 '15
You can do it like this:


class CMP_ConsoleAvatar extends OW_Component

{

    public function render()

    {

        $userId = OW::getUser()->getId();

        return '<a class="console-avatar" href="'.BOL_UserService::getInstance()->getUserUrl($userId).'"><img src="'.BOL_AvatarService::getInstance()->getAvatarUrl($userId).'"></a>';

    }

}


function console_add_avatar(BASE_CLASS_ConsoleItemCollector $event)

{

    if(OW::getUser()->isAuthenticated())

    {

        $item = new CMP_ConsoleAvatar();

        $event->addItem($item, 2);

    }

}


OW::getEventManager()->bind('console.collect_items', 'console_add_avatar');


Though avatar will be positioned before Username for admins and after it for simple users (unfortunately it cannot be fixed even by changing item order with additional check OW::getUser()->isAdmin() for now).


P.S. You can just install the plugin I attached below:

Attachments:
  cavatar.zip (5Kb)
Umair
Umair Mar 18 '15
great thanks
Umair
Umair Mar 18 '15
I am using following code, provided by a great helpful person like you, to show image instead of notification and message text in console area. It is working fine with http, but not showing in https. That area becomes clickable and working, but the images are invisible. any idea?

.ow_mailbox_items_list a.ow_console_item_link, .ow_notification_list a.ow_console_item_link {font-size: 0px !important;}
.ow_mailbox_items_list {background: url(https://) no-repeat center !important; height: 25px !important; width: 25px !important;}
.ow_notification_list {background: url(https://) no-repeat center !important; height: 25px !important; width: 25px !important;}
The Forum post is edited by Umair Mar 18 '15
Nickolay
Nickolay Mar 18 '15
You mean you need to dynamically use avatar image for css background? From your example it's not really clear how exactly do you form the url for background so I'll need more details to be able to help.
Umair
Umair Mar 19 '15
no. Forget the avatar for now. I am talking about Messages and Notifications area in console. The code I provided above is for Notification and Messages image instead of text. Like in the attached file. URL of the image will copied from the uploaded image in the edit theme area in admin. Hope I explained my point.
Attachments:
  Capture.PNG (3Kb)
  Capture2.PNG (5Kb)
Bryce Foxdon
Bryce Foxdon Jun 3 '15
you should upload the images to your themes image folder then point to them that way.


EXAMPLE -----


.ow_mailbox_items_list a.ow_console_item_link, .ow_notification_list a.ow_console_item_link {font-size: 0px !important;}
.ow_mailbox_items_list {background: url(images/mailbox.png) no-repeat center !important; height: 25px !important; width: 25px !important;}
.ow_notification_list {background: url(images/nofification.png) no-repeat center !important; height: 25px !important; width: 25px !important;}