cancel
Showing results for 
Search instead for 
Did you mean: 
isbratch
Community Member

Print a Roster with Pictures

Updated

Original Topic Title: Question

I am a TA and would like to print out a roster of my students with their pictures. How can I do this?

Message was edited by: Chris Hofer

33 Replies
llaplue
Surveyor

Given that the main options discussed here appear to either broken in the current instance of Canvas, or no longer available, this Chrome plug-in offers an easy and currently functional alternative. 

Canvas Class Roster Pics - Chrome Web Store 

Works well in the Canary (chromium) version of MS Edge as well. 

chris_vegter
Learner II

It does not look like this solution is working anymore.  Anyone have a working solution they can share?

I had previously used a solution that involved the developer tools that no longer works for my instructors. The Canvas Chrome extension does not work either. I've noticed some institutions have an option in their course navigation for a photo roster. How is that created? 

MollyCaldera
Surveyor II

My previous actions were to go to People, right-click, then choose "Inspect">console and enter the following :

var newDiv = $('<div>');
$('.collectionViewItems tr').each(function(){
 var avatar = $(this).find('.avatar').css('background-image').replace('url(','').replace(')','');
 var member = $('<div class="member" style="width:120px;height:160px;float: left;margin: 2px;"><div class="memberImg" style="text-align:center; height:120px; width:120px;"><span style="display: inline-block; height: 100%; vertical-align: middle;"></span><img style="max-width: 120px; max-height: 120px; vertical-align: middle;" src=' + avatar + '></div><div class="memberName" style="text-align:center">' + $(this).find('.roster_user_name').html() + '</div></div>');
 newDiv.append(member);
});
newDiv.appendTo('.v-gutter');
$('div[data-view="users"]').remove()