Member Photo Gallery in ExpressionEngine

Here’s a a quick ExpressionEngine howto on creating a page showing all the photos members have uploaded to their profiles.

 

Situation:
My church - Manna - wanted to have an “online directory” of member photos on the website.

One way to do this is to just use the Photo Gallery module and create a “members” category, upload some pics and title them with the member name.  While this would give you a nice online directory, what it doesn’t do is integrate with the existing profiles which get linked to blog posts and comments, etc.

However,  the built in profiles don’t let you browse pictures - you can only navigate via the memberlist and click each name to view the full profile.  The profile may or may not include a photo.

For the situation where you met someone but can’t remember their name this isn’t a great arrangement.

What you really want is the best of both options - photos stored in the profiles where members can upload and maintain them on their own, where they get linked to blog posts and comments, but also have a “gallery” page where you can browse photos to find a name.

That’s where this little howto comes in.  Using the Query Module we can pull this data together in pretty short order.  Here’s the code I used (note that I’ve removed all formatting and specific paths, so you’ll need to edit those to work on your site):

{exp:query limit="5" sql="SELECT screen_name, bio,photo_filename, photo_width, photo_height
FROM exp_members 
WHERE photo_filename <>'' ORDER BY screen_name "
}

<img src="yourpathhere/{photo_filename}" height="{photo_height}" width="{photo_width}" />
{screen_name}
{bio}
<a href="your_path_here/index.php/member/{member_id}/">Full Profile >></a>

{paginate}
    
<div class="paginate">
        <
span class="pagecount">
            
Page {current_page} of {total_pages} pages
        
</span>  
        
{pagination_links}
    
</div>
{/paginate}

{
/exp:query} 

This code:

  • Only loads those members who have images
  • Sorts the results by screen name
  • Loads 4 images to a page
  • Adds pagination links if there are more than 4
  • Loads the member name and bio
  • Links to the standard EE profile for each member

Voila!

Here’s the “straight-talk” around what happened with my church and this page. This approach was my response to being asked to put together an online directory on the site - with the expectation that I would bring my camera, take pictures of people, and post them to the site.  I’ve consistently avoided putting myself in such roles as I don’t want to be the “website update boy” for the church.  I’d much rather spend my time putting together ways to enable self-service for church members at large - so rather than taking on the creation and maintenance of a member photo gallery this approach put the responsibility for uploading photos in the hands of each member.

However in the end this member photo directory was one of those times when the technology was the easy part, but getting people to take action was the harder part.  Not enough people uploaded their own picture to make this page worthwhile - so it only lasted a few months on the site.

What this tells me is that that a photo directory just wasn’t that important to enough people - otherwise they would have taken the 10 minutes to upload a photo.

Category Navigation

 

Previous Comments

Picture of doctorlogos

by doctorlogos

Date: Tuesday, September 8th, 2009
Comment: #1

Thanks Mike, very handy!

Picture of doctorlogos

by doctorlogos

Date: Tuesday, September 8th, 2009
Comment: #2

Mike, something is wrong.

All the links of “Full Profile >>” are getting the ID of the current loggedin member. For example, if I am the member #1 and I am logged in, then all the links point to /member/1.
If there is nobody logged in, then the ID is /member/0.

What do you think?

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, September 8th, 2009
Comment: #3

Hmm..I know that code worked when I used it, but try a sql statement of”

SELECT screen_namebio,photo_filenamephoto_widthphoto_heightmember_id AS my_member_id
FROM exp_members 
WHERE photo_filename 
<>'' ORDER BY screen_name 

then a link of:

<a href="your_path_here/index.php/member/{my_member_id}/">Full Profile >></a
Picture of doctorlogos

by doctorlogos

Date: Tuesday, September 8th, 2009
Comment: #4

Bingo!

Thanks Mike, in a future I want to use this code.

See you.

Picture of Joe Rotger

by Joe Rotger

Date: Friday, November 20th, 2009
Comment: #5

Thanks Mike. You saved the day.

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>