Skip to:

Add an image as overlay to Avatar in nouveau templates

  • knaveenchand



    I am developing a social network site for parents of handicapped children. Using BuddyPress xProfile Plugin, I am collecting the child’s photo and displaying it alongside the parent’s photo. I am using the following snippets to achieve this:

    Step 1: Get the image in nouveau templates

    <div class="item-avatar">
    <a href="<?php bp_member_permalink(); ?>">
    <?php bp_member_avatar( bp_nouveau_avatar_args() ); ?>
    <?php  echo xprofile_get_field_data( 'Child Profile Photo' , bp_get_member_user_id() ); ?>
    <?php buddyx_user_status( bp_get_member_user_id() ); ?></a>

    And then using CSS, I am overlaying it on the member’s avatar as follows:

    div.item-avatar .bpxcftr-image {
        width: 50px;
        position: absolute;
        bottom: 1px;
        right: 9px;
        border-radius: 50%;

    Although I am able to get the desired output on Member directory and also on the individual’s own activity page, I am not able to get the desired output on site wide Activity Stream.

    When I looked at the template of Activity Stream, I came across the form template and it looks like it is using Javascript template to display the avatar. something like this:

    file: buddypress/bp-templates/bp-nouveau/buddypress/common/js-templates/activity/form.php

    <script type="text/html" id="tmpl-activity-post-form-avatar">
    	<# if ( data.display_avatar ) { #>
    		<a href="{{data.user_domain}}">
    			<img src="{{data.avatar_url}}" class="avatar user-{{data.user_id}}-avatar avatar-{{data.avatar_width}} photo" width="{{data.avatar_width}}" height="{{data.avatar_width}}" alt="{{data.avatar_alt}}" />
    	<# } #>

    My questions are:
    1. How do I add xprofile field in the above javascript?
    2. How do I add xprofile field in the main activity-stream (not inside the individual profile activity tab)?

    Would be grateful for any support on this.


  • You must be logged in to reply to this topic.
Skip to toolbar