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.
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:
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.
Most Popular Members
Random People You May Want to Meet
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!Tags: