Create a Photo Roster

Written By Sean Nufer

https://youtube.com/shorts/2UkXwRXMMdc

The default People page in Canvas displays important roster data, such as each person’s name, login and SIS ID, section, role, activity information, etc. However, the extensive amount of information can be overwhelming when you are starting a course and trying to get a sense of names and faces. With that in mind, use the following Canvas hack to create a temporary roster for your class that will help you associates the names and faces of your students.

Step 1

Go to your course People page from the course navigation, right click on the page, and select Inspect. Note that Canvas will load the first 30 names, so for large classes you may need to scroll to the bottom of the page to load all the students in your course.

 

Step 2

In the Inspect popup box, Click on the Console tab, copy and paste the script below and press Enter on your keyboard.

var newDiv = $('<div>');
$('.collectionViewItems tr').each(function(){
var avatar = $(this).find('.fOyUs_bGBk').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()

You should now have a photo roster of your course. Note that students who have not yet uploaded a picture in Canvas will have a generic avatar. I ask all my students in our first class meeting to upload a picture into Canvas. When you want to print the roster, I recommend highlighting the student portraits and names, and then in the print settings I print the selection. This way I don’t print the unnecessary course and Canvas navigation or the page headers and browser bars.

The roster changes are temporary and the page will revert to the original format when you refresh the browser or navigate away.

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas

Sean Nufer