How to Create a Gallery of Members’ Avatars in BuddyPress

This is a quick tutorial to show you how to create a custom gallery template for your BuddyPress theme that will display members filtered by your choice of parameters. You can create a solid block of avatars of one type of member or you can mix and match, as seen in the screenshot.

gallery

Can you guess who’s crazy about cats?! Fortunately your gallery will look much better than mine, but you’ll thank cat lady for the simplicity of this tutorial. ;) This is a handy way to display larger thumbnails of your members and allow users to quickly navigate to their profiles. You can use this for a featured section or an unfiltered gallery of all of your members. This example was built with BuddyPress 1.2 beta and WordPress 2.9.1. Here’s what you do:

Step 1: Create an Avatar Gallery Custom Page Template

If you’re using the default BuddyPress theme, make a copy of your page.php file and give it a new name, such as gallery.php. Add this to the very top of the template:

1
2
3
4
5
<?php
/*
Template Name: Gallery
*/
?>

That will tell WordPress to recognize this as a new page template.

Step 2: Add a Shortened Version of the Members Loop to Your Custom Template

I’m going to add examples of three different ways to display members: newest, popular, or random. Your can check out the different options at the BuddyPress codex section for custom member loops. I like to show the bigger 125px by125px avatars, but you can adjust the code as you see fit for your own gallery. Add this directly after the content section in your custom template.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- #gallery -->           
            
<h2>Newest Members</h2>         
<?php if ( bp_has_members( 'type=newest&max=6' ) ) : ?>         
                    <?php while ( bp_members() ) : bp_the_member(); ?>                      
                        <a href="<?php bp_member_permalink() ?>"><?php bp_member_avatar('type=full&width=125&height=125') ?></a>
                    <?php endwhile; ?>
<?php endif; ?>
<div class="clear"></div>

<h2>Most Popular Members</h2>
<?php if ( bp_has_members( 'type=popular&max=6' ) ) : ?>            
                    <?php while ( bp_members() ) : bp_the_member(); ?>                      
                        <a href="<?php bp_member_permalink() ?>"><?php bp_member_avatar('type=full&width=125&height=125') ?></a>
                    <?php endwhile; ?>
<?php endif; ?>
<div class="clear"></div>

<h2>Random People You May Want to Meet</h2>
<?php if ( bp_has_members( 'type=random&max=6' ) ) : ?>         
                    <?php while ( bp_members() ) : bp_the_member(); ?>                      
                        <a href="<?php bp_member_permalink() ?>"><?php bp_member_avatar('type=full&width=125&height=125') ?></a>
                    <?php endwhile; ?>
<?php endif; ?>
<div class="clear"></div>
                        
                        <!-- End #gallery -->

To adjust how many members the loop shows, change the max=6 to however many you want.
*Note: This code highlighter doesn’t seem to want to display ampersands correctly so wherever you see ‘& amp ; ‘ change that to an ampersand. ;)

Step 3: Add a New Page with the Custom Template

Go to Pages >> Add New. Give it a title. Make sure to select the gallery template you created from the drop-down box in the sidebar. Click Publish. You’re finished! You can use this same method for creating a gallery page of your groups as well, using a custom group loop. Have fun experimenting and leave a comment linking to your custom gallery if you try it out!

Comments (29)

  1. trying to figure out how to exclude the admin user. we were working on something similar to pull only avatars of members with blogs. accomplished that but just can’t figure out the part of excluding user_id 1 and keep all others. it might be helpful here too if you don’t want admin to appear in these galleries. tx

  2. Could this be implemented on the home.php or index.php? I tried and it broke, I only ask because currently I get avatars, etc from the members widget which I can’t seem to customize, but by adding code like you have I have more freedom to control the info.

    Thanks! good tutorial, some great info on this site!!

  3. I’m trying to get a member list to display across a website. I’m using a member list plugin but it’s putting the members down a row. I want them to fill in across the page and drop down to another row after so many image avatars.

    I’m using WPMU, running the front end on a inove theme, and the backend on buddypress. I tried the suggestion here but to no avail. Any suggestions?

  4. Hi Sarah !
    This is exactly what I’m looking for. Thank you !!!
    By the way…where this new gallery.php file has to be placed so that wp sees it as a new page model ?

    Sincerely,
    Monkey

  5. Thanks, Sarah – this is great. However, I’m using at the top of a page, and the code doesn’t seem to work on BuddyPress 1.5 user profile pages – none of the avatars appear when used on these BP pages. Is there a need to reset the query prior to calling the avatars on these pages?

    Best wishes
    Marcus

  6. I’m setting up my 1st BP site. Test site: sst1.everythingeasternbeaches.com

    I’ve followed the instructions above to create gallery.php

    I can’t find where to put gallery.php file. I have bp default theme enabled but can’t find that in my wp-content – themes

    There is only 2011 & 2010. I looked for page.php but can only find it in those themes. I assume gallery.php goes where page.php is?

    Where do I put the code when bp default is enabled?

    Thanks & sorry for such a newbie question.

  7. hello, thak for your job. I have problem..

    I use default buddypress theme so in cart mysitename.com/wp-content/plugin/buddypress/bp-themes/bp-default/ I make copy of my page.php and named it avatargallery.php, after field content i add your code, save and upload in the same cart where page.php is…. create a new page, in dropbox select avatargallery, save and…. i see the gallery page of my buddypress and not avatargallery. Why?
    PS. i am nerd user.

    thank you

  8. Hi,

    I took me the whole day to figure out how to create a gallery of members who actually uploaded an avatar, so thought it would be worth to share it. I am not a programmer so this solution is not the most efficient, but hey, it works :-) Maybe someone else could optimize the code.

    ‘newest’, ‘per_page’=>500, ‘max’=>500) ) ) : ?>

    <?php if ( bp_get_user_has_avatar ($user) && $count

    <a href="” title=”">

    The extra if statement checks whether the user uploaded an avatar. It only shows the avatar if true. To control he number of avatars an extra counter is needed.

  9. This is great. I used this method with nice results. I am trying to re-use portions of the code to place it in the sidebar / widget area of a Buddypress site. It’s not working quite as I thought it would though.

    It seems that this code works great on the home page, but when I go into Buddypress-related pages (profile, etc), the code will only show users that I am friends with. So obviously, this must have something to do with the queries going on.

    Would anyone kindly have any ideas on how to adapt this code to use it site-wide in the sidebar / widget area of a Buddypress site? I thank anyone who can respond with some good directions to go in.

Participate