How To Display BuddyPress Album Images Anywhere

Recently, I created a new landing page for Ultralight Backpacking Network. It features a grid of images posted by the site’s users. Ultralight Backpacking Network is using BuddyPress Album+ to manage users’ photo albums, so I needed to figure out a way to display BuddyPress Album+ images anywhere on the site. It turns out that BuddyPress Album+ makes this a relatively easy task. You retrieve the images using a loop, a process familiar to anyone who has modified or created a WordPress theme. Here’s an example of a BuddyPress Album+ loop:

<div id="photos">
<?php bp_album_query_pictures('per_page=5'); ?>
<?php if ( bp_album_has_pictures() ) : ?>
        <ul class="thumb">
        <?php while ( bp_album_has_pictures() ) : bp_album_the_picture(); ?>
                        <a href="<?php bp_album_picture_middle_url(); ?>" title="<?php bp_album_picture_title(); ?>">
                                <img src='<?php bp_album_picture_thumb_url() ?>' alt="<?php bp_album_picture_desc(); ?>" />
        <?php endwhile; ?>
<?php endif; ?>

Notice how similar it is to the WordPress loop. An important thing to remember is that you must first call the function bp_album_query_pictures() before you can start the BuddyPress Album+ Loop. This function initializes the Query object used for the loop. The bp_album_query_pictures() function supports a few different parameters:

Once you’ve started the loop, you have a few different options depending on how you want to display the data. Here are some of the template tags you can use:

There are several other template tags you can use – too many to list here, in fact. For more information, check out includes/bp-album-templatetags.php in the bp-album folder. If you want to display information about the album author, you are going to need a few additional template tags that don’t come with BuddyPress Album+ by default. See this post for more details. That’s enough information to get you up and running with custom BuddyPress Album+ themes.