Show avatars of authors followers

Description/Instructions

This shortcode will display the avatars of the authors last 6 followers.

PLEASE NOTE: I have not tested this extensively, it appears to be working for me but you need to ensure that the  follow button is set to ‘Follow post author’

Instructions

Use shortcode [voxel_author_followers] or [voxel_author_followers post_id="123"] where you can define the profile ID that you wish to display.

function voxel_display_author_followers($atts) {
global$wpdb;

$atts=shortcode_atts(
array(
'post_id'=>get_the_ID(),
),
$atts
);

$post_id=intval($atts['post_id']);
$table_name=$wpdb->prefix.'voxel_followers';
$author_id=$wpdb->get_var($wpdb->prepare(
"SELECT post_author FROM {$wpdb->prefix}posts WHERE ID = %d",
$post_id
));

if (!$author_id) {
return'No such post found.';
}

$follower_ids=$wpdb->get_col($wpdb->prepare(
"SELECT follower_id FROM$table_nameWHERE object_type = 'user' AND object_id = %d AND follower_type = 'user' ANDstatus=1ORDER BY follower_id DESCLIMIT6",
$author_id
));

if (empty($follower_ids)) {
return'';
}

$avatars=array_map(function ($user_id) {
returnget_avatar($user_id);
}, $follower_ids);

return'<div class="voxel-author-followers">'.implode('', $avatars) .'</div>';
}
add_shortcode('voxel_author_followers', 'voxel_display_author_followers');
  • PHP
Copy Code

Instructions

This CSS will display the avatars in circles slightly overlapping as per the screenshot.

.voxel-author-followers img {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 30px;
position: relative; /* Needed to apply z-index */
}

.voxel-author-followers img:nth-child(1) {
z-index: 6;
}
.voxel-author-followers img:nth-child(2) {
z-index: 5;
margin-left: -12px;
}
.voxel-author-followers img:nth-child(3) {
z-index: 4;
margin-left: -12px;
}
.voxel-author-followers img:nth-child(4) {
z-index: 3;
margin-left: -12px;
}
.voxel-author-followers img:nth-child(5) {
z-index: 2;
margin-left: -12px;
}
.voxel-author-followers img:nth-child(6) {
z-index: 1;
margin-left: -12px;
}
  • CSS
Copy Code

Let's Chat About this Snippet