âš¡Voxel Black Friday Sale is now Live
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’
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');
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;}