Matt Radford

Messing with links since <blink>

Display a custom photo based on username

Published on 

For this particular WordPress project, I needed to create a custom meta data field for users with Advanced Custom Fields, to allow them to upload their profile photo. I then created a team page, and wanted an easy way for them to add their photo to their team listing.

So, I had to:

  1. Get the user’s login – stored in a custom field, which they input on the Team edit page
  2. Use that to get the user’s ID
  3. Query the array containing the user’s metadata and find the custom photo
  4. Get the attachment URL of that photo
  5. Use that to display the photo, not forgetting to deference the array parameter [0]

Phew!

<?php
$username = get_sub_field('team_member_username');
$the_user = get_user_by('login', $username);
$the_user_id = $the_user->ID;
$user_photo = get_user_meta($the_user_id, 'your_photo', true);
$image_src = wp_get_attachment_image_src($user_photo);
echo '<img class="author-picture" src="'. $image_src[0] .'" />';
?>
view raw custom_user_photo.php hosted with ❤ by GitHub

It was also useful in displaying their custom photo on their Author page, which was a bit easier as I already had the user ID, so could user get_the_author_meta.

<?php
$curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
?>
<h1><?php echo $curauth->display_name; ?>'s blog</h1>
<?php
$publisher_photo = get_the_author_meta('your_photo');
$image_src = wp_get_attachment_image_src($publisher_photo);
if($image_src[0] != NULL) { ?>
<div class="row author">
<div class="two columns mobile-twelve">
<?php echo '<img class="author-picture" src="'. $image_src[0] .'" />'; ?>
</div>
<div class="ten columns mobile-twelve">
<p class="author-bio"><?php echo $curauth->description; ?></p>
<a href="<?php echo site_url(); ?>/about/" class="author-link">Read More</a>
</div>
</div>
<?php } ; ?>
view raw wp_custom_author_header.php hosted with ❤ by GitHub