Blackboard Photo Roster Bookmarklet<\/title>\n<style>\nbody { .bookmarklet { display:inline-block; margin:18px 0; padding:14px 20px; border:2px solid #222; border-radius:10px; background:#f7f7f7; color:#111; text-decoration:none; font-weight:700; cursor:grab; }\n.note { background:#f4f4f4; padding:14px 16px; border-radius:10px; }\nol { padding-left: 24px; }\n<\/style><\/head>\n<body>\n<p>This bookmarklet creates a temporary large-photo roster from a Blackboard Ultra roster page. It does not modify Blackboard data; refreshing the page restores the normal view. You may also print a copy of your photo roster to help with attendance or learning student names<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/blogs.uscupstate.edu\/tip\/wp-content\/uploads\/Blackboard-Photo-Roster.png\" alt=\"Screenshot of Blackboard Photo Roster View with print and close options, student photos, student names, and pronunciations.\" class=\"wp-image-2336\"\/><figcaption class=\"wp-element-caption\">AI-Enhanced Solution: Blackboard Photo Roster<\/figcaption><\/figure>\n\n<h1>How to Use the Blackboard Photo Roster Bookmarklet<\/h1>\n<p><strong>Drag this button to your bookmarks bar:<\/strong><\/p>\n<p><a class=\"bookmarklet\" href=\"javascript:(()=>{const old=document.getElementById('bb-photo-roster-overlay');if(old)old.remove();const selector=['img.MuiAvatar-img','img[src*="\/avatar\/user\/"]','user-avatar-view img','[class*="Avatar"] img'].join(',');const imgs=[...document.querySelectorAll(selector)].filter(img=>(img.currentSrc||img.src||'').length>0);const unique=[];const seen=new Set();for(const img of imgs){const src=img.currentSrc||img.src||img.getAttribute('src')||'';if(!seen.has(src)){seen.add(src);unique.push(img);}}const studentImgs=unique.slice(1);const overlay=document.createElement('div');overlay.id='bb-photo-roster-overlay';const printStyle=document.createElement('style');printStyle.textContent='@media print{body>*{display:none!important;}#bb-photo-roster-overlay{display:block!important;position:static!important;overflow:visible!important;padding:0!important;margin:0!important;}#bb-photo-roster-overlay button{display:none!important;}}';document.head.appendChild(printStyle);Object.assign(overlay.style,{position:'fixed',inset:'0',background:'#fff',zIndex:'2147483647',overflow:'auto',padding:'16px',boxSizing:'border-box'});const top=document.createElement('div');top.style.cssText='display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;';const title=document.createElement('div');title.textContent=`Photo roster: ${studentImgs.length} students`;title.style.cssText='font:600 20px system-ui,sans-serif;';const close=document.createElement('button');close.textContent='Close';close.style.cssText='padding:8px 12px;border:1px solid #ccc;border-radius:8px;background:#f7f7f7;cursor:pointer;';close.onclick=()=>overlay.remove();const print=document.createElement('button');print.textContent='Print';print.style.cssText='padding:8px 12px;border:1px solid #ccc;border-radius:8px;background:#f7f7f7;cursor:pointer;';print.onclick=()=>window.print();const grid=document.createElement('div');grid.style.cssText='display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;';function extractNameAndPronunciation(rowText,fallbackIndex){const lines=rowText.split('\\n').map(s=>s.trim()).filter(Boolean).filter(s=>s!=='…'&&s!=='\u2026');const name=(lines.find(t=>t.length>1&&t.length<60&&!\/^Instructor$\/i.test(t)&&!\/^Instructor.*$\/i.test(t)&&!\/^Photo roster\/i.test(t)&&!\/^Close$\/i.test(t))||`Student ${fallbackIndex+1}`).replace(\/([a-z])([A-Z])\/g,'$1 $2');const pronunciation=lines.find(t=>\/rhymes with\/i.test(t)||\/\$.*\$\/.test(t)||\/pronunciation\/i.test(t))||'';return {name,pronunciation};}studentImgs.forEach((img,index)=>{const row=img.closest('li,[role="listitem"],.MuiListItem-root,.MuiAccordionDetails-root')||img.parentElement;const rowText=row?.innerText||'';if(\/instructor\/i.test(rowText))return;const nameElement=row.querySelector('bdi');const pronunciationElement=row.querySelector('bdi[class*="pronunciation"]');const name=nameElement?nameElement.textContent.trim():`Student ${index+1}`;const pronunciation=pronunciationElement?pronunciationElement.textContent.trim():'';const card=document.createElement('div');card.style.cssText='border:1px solid #ddd;border-radius:14px;padding:16px;text-align:center;box-sizing:border-box;';const clone=document.createElement('img');clone.src=img.currentSrc||img.src||img.getAttribute('src')||'';clone.alt=name;clone.loading='eager';clone.style.cssText='width:200px;height:200px;object-fit:cover;border-radius:50%;display:block;margin:0 auto 12px auto;';const label=document.createElement('div');label.style.cssText='display:block;font:600 16px system-ui,sans-serif;line-height:1.25;margin-bottom:12px;';label.textContent=name;card.append(clone,label);if(pronunciation){const pron=document.createElement('div');pron.textContent=pronunciation;pron.style.cssText='display:block;font:400 13px system-ui,sans-serif;color:#666;';card.append(pron);}grid.append(card);});top.append(title,print,close);overlay.append(top,grid);document.body.appendChild(overlay);})()\">Blackboard Photo Roster<\/a><\/p>\n\n<h2>Install<\/h2>\n<ol>\n<li>Show your browser’s bookmarks bar if it is hidden.<\/li>\n<li>Drag the <strong>Blackboard Photo Roster<\/strong> button above onto the bookmarks bar. If you use a keyboard or screen reader, right-click the link to the Blackboard Photo Roster button, choose Copy Link Address, then create a new bookmark in the way best suited to your browser and paste the copied javascript: URL into the bookmark’s address field.<\/li>\n<\/ol>\n\n<h2>Use<\/h2>\n<ol>\n<li>Go to a Blackboard Ultra course. <\/li>\n<li>Open your Blackboard Ultra course roster.<\/li>\n<li>Make sure the roster has loaded. Scroll through it first to ensure that all students have loaded.<\/li>\n<li>Click <strong>Blackboard Photo Roster<\/strong> on your bookmarks bar.<\/li>\n<li>Click <strong>Close<\/strong> in the photo roster to return to Blackboard, or refresh the page.<\/li>\n<\/ol>\n\n<div class=\"note\"><strong>Note:<\/strong> Instructors are omitted from the student photo roster.<\/div>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Blackboard Photo Roster Bookmarklet This bookmarklet creates a temporary large-photo roster from a Blackboard Ultra roster page. It does not modify Blackboard data; refreshing the page restores the normal view. You may also print a copy of your photo roster to help with attendance or learning student names How to Use the Blackboard Photo Roster … <a href=\"https:\/\/blogs.uscupstate.edu\/tip\/blackboard-photo-roster-bookmarklet\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Blackboard Photo Roster Bookmarklet<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2458","page","type-page","status-publish","hentry","no-featured-image"],"_links":{"self":[{"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/pages\/2458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/comments?post=2458"}],"version-history":[{"count":7,"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/pages\/2458\/revisions"}],"predecessor-version":[{"id":2465,"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/pages\/2458\/revisions\/2465"}],"wp:attachment":[{"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/media?parent=2458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2458,"date":"2026-08-28T14:57:39","date_gmt":"2026-08-28T18:57:39","guid":{"rendered":"https:\/\/blogs.uscupstate.edu\/tip\/?page_id=2458"},"modified":"2026-08-28T14:57:39","modified_gmt":"2026-08-28T18:57:39","slug":"blackboard-photo-roster-bookmarklet","status":"publish","type":"page","link":"https:\/\/blogs.uscupstate.edu\/tip\/blackboard-photo-roster-bookmarklet\/","title":{"rendered":"Blackboard Photo Roster Bookmarklet"},"content":{"rendered":"\n\n\n\n\nBlackboard Photo Roster Bookmarklet<\/title>\n<style>\nbody { .bookmarklet { display:inline-block; margin:18px 0; padding:14px 20px; border:2px solid #222; border-radius:10px; background:#f7f7f7; color:#111; text-decoration:none; font-weight:700; cursor:grab; }\n.note { background:#f4f4f4; padding:14px 16px; border-radius:10px; }\nol { padding-left: 24px; }\n<\/style><\/head>\n<body>\n<p>This bookmarklet creates a temporary large-photo roster from a Blackboard Ultra roster page. It does not modify Blackboard data; refreshing the page restores the normal view. You may also print a copy of your photo roster to help with attendance or learning student names<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/blogs.uscupstate.edu\/tip\/wp-content\/uploads\/Blackboard-Photo-Roster.png\" alt=\"Screenshot of Blackboard Photo Roster View with print and close options, student photos, student names, and pronunciations.\" class=\"wp-image-2336\"\/><figcaption class=\"wp-element-caption\">AI-Enhanced Solution: Blackboard Photo Roster<\/figcaption><\/figure>\n\n<h1>How to Use the Blackboard Photo Roster Bookmarklet<\/h1>\n<p><strong>Drag this button to your bookmarks bar:<\/strong><\/p>\n<p><a class=\"bookmarklet\" href=\"javascript:(()=>{const old=document.getElementById('bb-photo-roster-overlay');if(old)old.remove();const selector=['img.MuiAvatar-img','img[src*="\/avatar\/user\/"]','user-avatar-view img','[class*="Avatar"] img'].join(',');const imgs=[...document.querySelectorAll(selector)].filter(img=>(img.currentSrc||img.src||'').length>0);const unique=[];const seen=new Set();for(const img of imgs){const src=img.currentSrc||img.src||img.getAttribute('src')||'';if(!seen.has(src)){seen.add(src);unique.push(img);}}const studentImgs=unique.slice(1);const overlay=document.createElement('div');overlay.id='bb-photo-roster-overlay';const printStyle=document.createElement('style');printStyle.textContent='@media print{body>*{display:none!important;}#bb-photo-roster-overlay{display:block!important;position:static!important;overflow:visible!important;padding:0!important;margin:0!important;}#bb-photo-roster-overlay button{display:none!important;}}';document.head.appendChild(printStyle);Object.assign(overlay.style,{position:'fixed',inset:'0',background:'#fff',zIndex:'2147483647',overflow:'auto',padding:'16px',boxSizing:'border-box'});const top=document.createElement('div');top.style.cssText='display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;';const title=document.createElement('div');title.textContent=`Photo roster: ${studentImgs.length} students`;title.style.cssText='font:600 20px system-ui,sans-serif;';const close=document.createElement('button');close.textContent='Close';close.style.cssText='padding:8px 12px;border:1px solid #ccc;border-radius:8px;background:#f7f7f7;cursor:pointer;';close.onclick=()=>overlay.remove();const print=document.createElement('button');print.textContent='Print';print.style.cssText='padding:8px 12px;border:1px solid #ccc;border-radius:8px;background:#f7f7f7;cursor:pointer;';print.onclick=()=>window.print();const grid=document.createElement('div');grid.style.cssText='display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;';function extractNameAndPronunciation(rowText,fallbackIndex){const lines=rowText.split('\\n').map(s=>s.trim()).filter(Boolean).filter(s=>s!=='…'&&s!=='\u2026');const name=(lines.find(t=>t.length>1&&t.length<60&&!\/^Instructor$\/i.test(t)&&!\/^Instructor.*$\/i.test(t)&&!\/^Photo roster\/i.test(t)&&!\/^Close$\/i.test(t))||`Student ${fallbackIndex+1}`).replace(\/([a-z])([A-Z])\/g,'$1 $2');const pronunciation=lines.find(t=>\/rhymes with\/i.test(t)||\/\$.*\$\/.test(t)||\/pronunciation\/i.test(t))||'';return {name,pronunciation};}studentImgs.forEach((img,index)=>{const row=img.closest('li,[role="listitem"],.MuiListItem-root,.MuiAccordionDetails-root')||img.parentElement;const rowText=row?.innerText||'';if(\/instructor\/i.test(rowText))return;const nameElement=row.querySelector('bdi');const pronunciationElement=row.querySelector('bdi[class*="pronunciation"]');const name=nameElement?nameElement.textContent.trim():`Student ${index+1}`;const pronunciation=pronunciationElement?pronunciationElement.textContent.trim():'';const card=document.createElement('div');card.style.cssText='border:1px solid #ddd;border-radius:14px;padding:16px;text-align:center;box-sizing:border-box;';const clone=document.createElement('img');clone.src=img.currentSrc||img.src||img.getAttribute('src')||'';clone.alt=name;clone.loading='eager';clone.style.cssText='width:200px;height:200px;object-fit:cover;border-radius:50%;display:block;margin:0 auto 12px auto;';const label=document.createElement('div');label.style.cssText='display:block;font:600 16px system-ui,sans-serif;line-height:1.25;margin-bottom:12px;';label.textContent=name;card.append(clone,label);if(pronunciation){const pron=document.createElement('div');pron.textContent=pronunciation;pron.style.cssText='display:block;font:400 13px system-ui,sans-serif;color:#666;';card.append(pron);}grid.append(card);});top.append(title,print,close);overlay.append(top,grid);document.body.appendChild(overlay);})()\">Blackboard Photo Roster<\/a><\/p>\n\n<h2>Install<\/h2>\n<ol>\n<li>Show your browser’s bookmarks bar if it is hidden.<\/li>\n<li>Drag the <strong>Blackboard Photo Roster<\/strong> button above onto the bookmarks bar. If you use a keyboard or screen reader, right-click the link to the Blackboard Photo Roster button, choose Copy Link Address, then create a new bookmark in the way best suited to your browser and paste the copied javascript: URL into the bookmark’s address field.<\/li>\n<\/ol>\n\n<h2>Use<\/h2>\n<ol>\n<li>Go to a Blackboard Ultra course. <\/li>\n<li>Open your Blackboard Ultra course roster.<\/li>\n<li>Make sure the roster has loaded. Scroll through it first to ensure that all students have loaded.<\/li>\n<li>Click <strong>Blackboard Photo Roster<\/strong> on your bookmarks bar.<\/li>\n<li>Click <strong>Close<\/strong> in the photo roster to return to Blackboard, or refresh the page.<\/li>\n<\/ol>\n\n<div class=\"note\"><strong>Note:<\/strong> Instructors are omitted from the student photo roster.<\/div>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Blackboard Photo Roster Bookmarklet This bookmarklet creates a temporary large-photo roster from a Blackboard Ultra roster page. It does not modify Blackboard data; refreshing the page restores the normal view. You may also print a copy of your photo roster to help with attendance or learning student names How to Use the Blackboard Photo Roster … <a href=\"https:\/\/blogs.uscupstate.edu\/tip\/blackboard-photo-roster-bookmarklet\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Blackboard Photo Roster Bookmarklet<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2458","page","type-page","status-publish","hentry","no-featured-image"],"_links":{"self":[{"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/pages\/2458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/comments?post=2458"}],"version-history":[{"count":7,"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/pages\/2458\/revisions"}],"predecessor-version":[{"id":2465,"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/pages\/2458\/revisions\/2465"}],"wp:attachment":[{"href":"https:\/\/blogs.uscupstate.edu\/tip\/wp-json\/wp\/v2\/media?parent=2458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}