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(); ?> <li> <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(); ?>" /> </a> </li> <?php endwhile; ?> </ul> <?php endif; ?> </div>
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:
- owner_id - This is the numeric ID of the user whose photos you wish to display.
- id - This is the numeric ID of the photo you wish to display. Only used if you wish to display a single photo.
- privacy - Retrieve photos based on privacy settings. Can be one of the following:
- public - photos visible to everyone
- members - photos visible to members
- friends- photos visible to friends of the current user
- private- photos visible to the current user
- admin- photos visible to the site administrator
- adjacent- Used to select a photo immediately preceding or succeeding the photo specified by id. Use one of either:
- next - select the next photo
- prev - select the previous photo
- orderkey- Specify which field to use to sort the photos. This is one of the following:
- id - sort by the numeric ID of the photos
- user_id- sort by the numeric ID of the users who uploaded the photos
- status- sort based on the status of the photos
- ordersort- Specify the order in which to sort the photos. One of either:
- ASC - sort in ascending order
- DESC - sort in descending order
- per_page - The number of photos you would like to display per page. If you want 24 photos, this is where you would specify that.
- offset- Start selecting photos after a certain offset.
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:
- bp_album_picture_title - Prints the title of the image.
- bp_album_picture_desc - Prints the image description.
- bp_album_picture_id - Prints the numeric ID of the image.
- bp_album_picture_url - Prints the URL to the page where the image is located.
- bp_album_picture_original_url - Prints the URL to the original image.
- bp_album_picture_middle_url - Prints the URL to the scaled image.
- bp_album_picture_thumb_url- Prints the URL to the image thumbnail.
- bp_album_adjacent_links - Prints links to the preceding and succeeding albums or images.
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.