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:
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!
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.
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
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
You have to change the code.
“& a m p ;” is not correct. (I put spaces to you can see)
only “&” is correct.
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
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
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.
To fix the ‘max’ bug replace the ‘&’ to ‘&’. For example:
‘type=popular&max=6′ instead of ‘type=popular&max=6′. Fixed it on my server.
And to tweak it more have a look at the Buddypress Codex page at http://codex.buddypress.org/developer-docs/custom-buddypress-loops/the-members-loop/
The comment should have shown that if you replace & a m p ; (without the spaces) with & the ‘max’ problem is fixed.
This was just what I was looking for. I have followed the instructions but no avatars are showing up on my page-just the titles.
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
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.
see https://gist.github.com/anonymous/5109216