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

Proof of Concept:

// ==UserScript==
// @name        Photo Roster Toggle
// @namespace   https://citlspscc.wordpress.com/2014/06/23/printing-your-canvas-roster-with-photos/
// @description Provides a button to change the view of the people page (hopefully)
// @include     https://*.instructure.com/courses/*/users
// @require     https://github.com/eligrey/FileSaver.js/raw/master/FileSaver.js
// @version     8
// @grant       none
// ==/UserScript==
(function() {
  'use strict';

  addPhotoRosterButton();

  function addPhotoRosterButton() {
    if ($('#jj_photo_roster').length === 0) {
      $('#people-options > ul').append(
        '<li class="ui-menu-item" role="presentation"><a id="jj_photo_roster" class="ui-corner-all" role="menuitem" tabindex="-1"><i class="user_lg"></i> Photo Roster</a></li>');
      $('#jj_photo_roster').one('click', photoRoster);
    }
    return;
  }

  function photoRoster() {
    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();
  }
})();
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It technically works, but I really have only the vaguest idea of what I'm doing here. Maybe this will give people enough to run with though. Some things that need improvement:

1. There is undoubtedly any number of error checking steps that have been skipped

2. The icon isn't working

3. There's no way to toggle it back off other than reloading the page.

4. Needs commenting

Other than that though, this seems pretty great!

Another issue: It doesn't force the page to load everyone, so in a course with a lot of people, currently you would need to manually scroll down to load them all first, then toggle.

Great start, awilliams

A few notes to go along with your own.

  • You don't need to require the FileSaver script -- that's for saving CSV files and this doesn't need it.
  • For the icon, try class="icon-user"
  • You may not want to start off with version 8 -- but then again you may to show how much work you put into it. I normally reset all my development versions back to 1 when I release them.
  • You mentioned this, but if you're going to call it a toggle, then it should probably switch back to the Canvas display if you click it again. Instead of removing the users as the last line of code, you could hide it. I would also add an identifier to the photo roster div so I could toggle it's visibility based on whichever one is visible.
  • If you upload it without the .zip extension, then people can download and install it directly.

ps - if you're wondering why I didn't do this myself, it's because of licensing. I don't know what the license is on this and everything on my Canvancement website is ISC license, which may be more liberal than what it was released under. Since it's not my code to share and the unknown author hasn't given me permission to include it on the Canvancement site, I didn't feel comfortable releasing it. Maybe if I repeat it's functionality without using its code I would be okay? Anyway, one of the hopes I had when I started the Canvancement site is that other people would be able to contribute and that it wouldn't be a one-person thing.

But I agree that you've done a stellar job and it's something that needs to be out there.

We just need to figure out where to put it so that people can make use of it. Anyone know the legal side of this?

I just put in a call (left a voicemail) with South Puget Sound's eLearning department. I'll let you know what I hear back about the licensing for their code.

Thanks. Hopefully they'll remember who at Seattle University gave it to them if they didn't get a license file with it.

I have a feeling it's like a lot of code that gets shared -- the people are just glad that someone is making use out of it. But it's better to be safe than sorry.

Hi All, - John from Seattle University here. Anyone is welcome to use and extend whatever we have shared with the community Smiley Happy 

At some point I will get better organized and put all of our stuff onto Github with an open source license. 

Hi John, 

Thanks again for the excellent inspect element script. Do you know how I would include some of the other columns in the people tab such as the login ID / email address etc?

kind regards

Joe 

PS. I think your claim of "stellar" work is a bit generous. Here's what it feels like I just created:

Redneck Engineering. .. &quot;If it looks stupid, but it works, it ain't stupid.&quot; words I live by

kona
Community Coach
Community Coach

^ LOL... where do you find this stuff? Too funny!