Join the Voxel Guide Community!

Get Involved

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

Chat Toggle
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Ask me anything about Voxel!
Send
Powered by AI24