February 2, 2010 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.
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:
<?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.
<!-- #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!
Sarah–
Thanks for sharing this, and nice write-up (as always).
For those of us who are still old-fashioned, is there an easy change to make this work with 1.1?
Sarah, this is very helpful. Thanks! I will be incorporating this into one of my current projects.
Pingback: Buddypress Widgets Pack plugin | Damon Cook
cant seem to change the size when i try this on my site it doesnt work when i change the width and height in the code..heelppp???
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
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!!
Hi Sarah
Thanks for the great tip, would you know the code to display the members of one group ?
thanks
Gibby
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?
Hi
I am using this code
[code]Newest Members
<a href="">
[/code]
but it displays 20 users
Can you help me display only 10
Thanks
Gibby
Sorry no code
It displays 20 users whatever the size I choose and despite the max set to 6
any help
Thanks
Gibby
Never mind I was able to use the code that Sarah G posted.
Thank you very much! Was looking for just this! Implemented right away with minor modifications…
Hi,
Thank you very much for this nice code!
Any idea how to just show members who’ve uploaded custom avatars? Thanks for the code!
Thanks for this, I am also interested in a mod to only show members with custom uploaded avatars! anyone?
Hi Sarah,
Thanks for the code. Do you know how to change the call? Instead of newest, popular, and random, I’d like to show users with specific roles.
Thanks,
Greg Woods
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