Index: lams_gradebook/src/java/org/lamsfoundation/lams/gradebook/dto/GBUserGridRowDTO.java
===================================================================
diff -u -ra949c337adc53b2df9207aa1de6e500281de7c20 -r2ed09b40081fc4dd0ebd267ac45a57d9db3dabd3
--- lams_gradebook/src/java/org/lamsfoundation/lams/gradebook/dto/GBUserGridRowDTO.java	(.../GBUserGridRowDTO.java)	(revision a949c337adc53b2df9207aa1de6e500281de7c20)
+++ lams_gradebook/src/java/org/lamsfoundation/lams/gradebook/dto/GBUserGridRowDTO.java	(.../GBUserGridRowDTO.java)	(revision 2ed09b40081fc4dd0ebd267ac45a57d9db3dabd3)
@@ -42,6 +42,7 @@
     private String lastName;
     private String login;
     private String currentActivity;
+    private Long portraitId;
 
     public GBUserGridRowDTO() {
     }
@@ -52,6 +53,7 @@
 	this.firstName = user.getFirstName();
 	this.lastName = user.getLastName();
 	this.login = user.getLogin();
+	this.setPortraitId(user.getPortraitUuid());
     }
 
     @Override
@@ -69,22 +71,22 @@
 	    ret.add(finishDate != null ? convertDateToString(finishDate, null) : CELL_EMPTY);
 	    ret.add(feedback);
 	    ret.add((mark != null) ? GradebookUtil.niceFormatting(mark, displayMarkAsPercent) : CELL_EMPTY);
+	    ret.add(portraitId != null ? portraitId.toString() : "");
 
 	} else if (view == GBGridView.MON_ACTIVITY) {
 
 	    ret.add(marksAvailable != null ? marksAvailable.toString() : "");
-	    if (activityUrl != null && activityUrl.length() != 0) {
-		ret.add("<a href='javascript:launchPopup(\"" + activityUrl + "\",\"" + rowName + "\",796,570)'>"
-			+ rowName + "</a>");
-	    } else {
-		ret.add(rowName);
-	    }
+	    ret.add(rowName);
 	    ret.add(status);
 	    ret.add((timeTaken != null) ? convertTimeToString(timeTaken) : CELL_EMPTY);
 	    ret.add(startDate != null ? convertDateToString(startDate, null) : CELL_EMPTY);
 	    ret.add(finishDate != null ? convertDateToString(finishDate, null) : CELL_EMPTY);
 	    ret.add(feedback);
 	    ret.add((mark != null) ? GradebookUtil.niceFormatting(mark) : CELL_EMPTY);
+	    ret.add(portraitId != null ? portraitId.toString() : "");
+	    if (activityUrl != null && activityUrl.length() != 0) {
+		ret.add("javascript:launchPopup(\"" + activityUrl + "\",\"" + rowName + "\",796,570)'>");
+	    } 
 
 	} else if (view == GBGridView.MON_COURSE) {
 	    ret.add(rowName);
@@ -94,9 +96,12 @@
 	    ret.add(finishDate != null ? convertDateToString(finishDate, null) : CELL_EMPTY);
 	    ret.add(feedback);
 	    ret.add((mark != null) ? GradebookUtil.niceFormatting(mark, displayMarkAsPercent) : CELL_EMPTY);
+	    ret.add(portraitId != null ? portraitId.toString() : "");
 
 	} else if (view == GBGridView.LIST) {
 	    ret.add(rowName);
+	    ret.add(portraitId != null ? portraitId.toString() : "");
+
 	}
 
 	return ret;
@@ -142,4 +147,12 @@
 	this.currentActivity = currentActivity;
     }
 
+    public Long getPortraitId() {
+	return portraitId;
+    }
+
+    public void setPortraitId(Long portraitId) {
+	this.portraitId = portraitId;
+    }
+
 }
Index: lams_gradebook/web/gradebookCourseMonitor.jsp
===================================================================
diff -u -r8a6afcdd450adc0cd87ea7dbc69cac9fb14a3fb9 -r2ed09b40081fc4dd0ebd267ac45a57d9db3dabd3
--- lams_gradebook/web/gradebookCourseMonitor.jsp	(.../gradebookCourseMonitor.jsp)	(revision 8a6afcdd450adc0cd87ea7dbc69cac9fb14a3fb9)
+++ lams_gradebook/web/gradebookCourseMonitor.jsp	(.../gradebookCourseMonitor.jsp)	(revision 2ed09b40081fc4dd0ebd267ac45a57d9db3dabd3)
@@ -16,6 +16,8 @@
 	<jsp:include page="includes/jsp/jqGridIncludes.jsp"></jsp:include>
 	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.blockUI.js"></script>	
 	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.cookie.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/bootstrap.min.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/portrait.js"></script>
 	<script type="text/javascript" src="includes/javascript/blockexportbutton.js"></script>
 
 	<script type="text/javascript">
@@ -118,17 +120,19 @@
 					    	"<fmt:message key="gradebook.columntitle.startDate"/>", 
 					    	"<fmt:message key="gradebook.columntitle.completeDate"/>", 
 					     	"<fmt:message key="gradebook.columntitle.lessonFeedback"/>", 
-			    			"<fmt:message key="gradebook.columntitle.mark"/>"
+			    			"<fmt:message key="gradebook.columntitle.mark"/>",
+			    			'portraitId'
 					     ],
 					     colModel:[
 					     	{name:'id', index:'id', sortable:false, editable:false, hidden:true, search:false, hidedlg:true},
-					     	{name:'rowName',index:'rowName', sortable:true, editable:false},
+					     	{name:'rowName',index:'rowName', sortable:true, editable:false, formatter:userNameFormatter},
 					      	{name:'status', index:'status', sortable:false, editable:false, search:false, title:false, width:50, align:"center"},
 					      	{name:'timeTaken', index:'timeTaken', sortable:true, editable:false, search:false, width:80, align:"center"},
 						    {name:'startDate',index:'startDate', sortable:true, editable:false, search:false, width:85, align:"left"},
 						    {name:'finishDate',index:'finishDate', sortable:false, editable:false, search:false, width:85, align:"left"},
 					     	{name:'feedback',index:'feedback', sortable:false, editable:true, edittype:'textarea', editoptions:{rows:'4',cols:'20'} , search:false},
-					     	{name:'mark',index:'mark', sortable:true, editable:true, editrules:{number:true}, search:false, width:50, align:"center"}
+					     	{name:'mark',index:'mark', sortable:true, editable:true, editrules:{number:true}, search:false, width:50, align:"center"},
+					     	{name:'portraitId', index:'portraitId', width:0, hidden: true}
 					     ],
 					     loadError: function(xhr,st,err) {
 				    		jQuery("#"+subgrid_table_id).clearGridData();
@@ -164,6 +168,7 @@
 						 gridComplete: function(){
 							processLessonDateFields( lessonDatesHidden, jQuery("#"+subgrid_table_id) );
 						 	toolTip($(".jqgrow"));	// enable tooltips for grid
+							initializePortraitPopover('<lams:LAMSURL/>');
 						 }	
 					 }).navGrid("#"+subgrid_table_id+"_pager", {edit:false,add:false,del:false,search:false})
 					 
@@ -212,11 +217,13 @@
 			    rowNum:10,
 			    colNames:[
 					'',
-					"<fmt:message key="gradebook.columntitle.learnerName"/>"
+					"<fmt:message key="gradebook.columntitle.learnerName"/>",
+					'portraitId'
 			    ],
 			    colModel:[
 					{name:'id', index:'id', sortable:false, editable:false, hidden:true, search:false, hidedlg:true},
-					{name:'rowName',index:'rowName', sortable:true, editable:false}
+					{name:'rowName',index:'rowName', sortable:true, editable:false, formatter:userNameFormatter},
+					{name:'portraitId', index:'portraitId', width:0, hidden: true}
 			    ],
 			    loadError: function(xhr,st,err) {
 			    	jQuery("#userView").clearGridData();
@@ -343,6 +350,7 @@
 					},
 					gridComplete: function(){
 						toolTip($(".jqgrow"));  // allowing tooltips for this grid	
+						initializePortraitPopover('<lams:LAMSURL/>');
 					}
 			}).navGrid("#userViewPager", {edit:false,add:false,del:false,search:false}); // applying refresh button
 				
@@ -428,6 +436,11 @@
 			return false;
 		}
 		
+	  	function userNameFormatter (cellvalue, options, rowObject) {
+	  		var index = rowObject.children.length - 1;
+			return definePortraitPopover(rowObject.children[index].innerHTML, rowObject.id, cellvalue);
+		}
+		
 	</script>
 
 </lams:head>
Index: lams_gradebook/web/gradebookMonitor.jsp
===================================================================
diff -u -ra949c337adc53b2df9207aa1de6e500281de7c20 -r2ed09b40081fc4dd0ebd267ac45a57d9db3dabd3
--- lams_gradebook/web/gradebookMonitor.jsp	(.../gradebookMonitor.jsp)	(revision a949c337adc53b2df9207aa1de6e500281de7c20)
+++ lams_gradebook/web/gradebookMonitor.jsp	(.../gradebookMonitor.jsp)	(revision 2ed09b40081fc4dd0ebd267ac45a57d9db3dabd3)
@@ -175,18 +175,20 @@
 			    	"<fmt:message key="gradebook.columntitle.startDate"/>", 
 			    	"<fmt:message key="gradebook.columntitle.completeDate"/>", 
 			    	"<fmt:message key="gradebook.columntitle.lessonFeedback"/>", 
-			    	"<fmt:message key="gradebook.columntitle.mark"/>"
+			    	"<fmt:message key="gradebook.columntitle.mark"/>",
+			    	'portraitId'
 			    ],
 			    colModel:[
 			      {name:'id', index:'id', sortable:false, editable:false, hidden:true, search:false, hidedlg:true},
-			      {name:'rowNamer',index:'rowName', sortable:true, editable:false, autoencode:true},
+			      {name:'rowNamer',index:'rowName', sortable:true, editable:false, autoencode:true, formatter:userNameFormatter},
 			      {name:'status',index:'status', sortable:false, editable:false, search:false, width:50, align:"center"},
 			      {name:'timeTaken',index:'timeTaken', sortable:true, editable:false, search:false, width:80, align:"center"},
 			      {name:'startDate',index:'startDate', sortable:true, editable:false, hidden:false, search:false, width:85, align:"left"},
 			      {name:'finishDate',index:'finishDate', sortable:false, editable:false, hidden:false, search:false, width:85, align:"left"},
 			      {name:'feedback',index:'feedback', sortable:true, editable:true, edittype:'textarea', editoptions:{rows:'4',cols:'20'}, search:false },
-			      {name:'mark',index:'mark', sortable:true, editable:true, editrules:{number:true}, search:false, width:50, align:"center"}
-			    ],
+			      {name:'mark',index:'mark', sortable:true, editable:true, editrules:{number:true}, search:false, width:50, align:"center"},
+			      {name:'portraitId', index:'portraitId', width:0, hidden: true}
+			      ],
 			    loadError: function(xhr,st,err) {
 			    	jQuery("#userView").clearGridData();
 			    	$.jgrid.info_dialog("<fmt:message key="label.error"/>", "<fmt:message key="gradebook.error.loaderror"/>", "<fmt:message key="label.ok"/>");
@@ -309,6 +311,7 @@
 					},
 					gridComplete: function(){
 						toolTip($(".jqgrow"), "jqgridTooltip");  // Allow tooltips for this grid	
+				   	 	initializePortraitPopover('<lams:LAMSURL/>');
 						// Load dates shown but hide straight away as all columns needed initially so that subgrid is displayed properly LDEV-4289
 						processLessonDateFields( lessonDatesHidden );
 					}
@@ -391,18 +394,22 @@
 						    	"<fmt:message key="gradebook.columntitle.startDate"/>", 
 						    	"<fmt:message key="gradebook.columntitle.completeDate"/>", 
 						     	"<fmt:message key="gradebook.columntitle.activityFeedback"/>", 
-						     	"<fmt:message key="gradebook.columntitle.mark"/>"
+						     	"<fmt:message key="gradebook.columntitle.mark"/>",
+							    	'portraitId',
+						     	'activityURL'
 						     ],
 						     colModel:[
 						     	{name:'id', index:'id', sortable:false, editable:false, hidden:true, search:false, hidedlg:true},
 						     	{name:'marksAvailable',index:'marksAvailable', sortable:false, editable:false, hidden:true, search:false, hidedlg:true},
-						     	{name:'rowName',index:'rowName', sortable:true, editable:false},
+						     	{name:'rowName',index:'rowName', sortable:true, editable:false, formatter:userNameFormatterActivity},
 						      	{name:'status', index:'status', sortable:false, editable:false, search:false, width:30, align:"center"},
 						      	{name:'timeTaken', index:'timeTaken', sortable:true, editable: false, width:80, align:"center"},
 							    {name:'startDate',index:'startDate', sortable:true, editable:false, search:false, width:85, align:"left"},
 							    {name:'finishDate',index:'finishDate', sortable:false, editable:false, search:false, width:85, align:"left"},
 						     	{name:'feedback',index:'feedback', sortable:false, editable:true, edittype:'textarea', editoptions:{rows:'4',cols:'20'} , search:false, width:200, hidden:true},
-						     	{name:'mark',index:'mark', sortable:true, editable:true, editrules:{number:true}, search:false, width:50, align:"center"}
+						     	{name:'mark',index:'mark', sortable:true, editable:true, editrules:{number:true}, search:false, width:50, align:"center"},
+						     	{name:'portraitId', index:'portraitId', width:0, hidden: true},
+						     	{name:'activityURL', index:'activityURL', width:0, hidden: true}
 						     ],
 						     loadError: function(xhr,st,err) {
 					    		jQuery("#"+subgrid_table_id).clearGridData();
@@ -473,6 +480,7 @@
 						     },
 							 gridComplete: function(){
 							 	toolTip($(".jqgrow"), "jqgridTooltip");	// applying tooltips for this grid
+						   	 	initializePortraitPopover('<lams:LAMSURL/>');
 							 }
 						 }).navGrid("#"+subgrid_table_id+"_pager", {edit:false,add:false,del:false,search:false}) // applying refresh button
 						 
@@ -515,6 +523,24 @@
 		            resizeJqgrid(jQuery(".ui-jqgrid-btable:visible", this));
 		        })
 
+		        	function userNameFormatter (cellvalue, options, rowObject) {
+					return definePortraitPopover(rowObject.children[8].innerHTML, rowObject.id, cellvalue);
+				}
+
+		        // Combine portraits with activityURL. Both are optional so it is mix and match.
+	       	 	function userNameFormatterActivity (cellvalue, options, rowObject) {
+	       	 		var portProcessed = definePortraitPopover(rowObject.children[9].innerHTML, rowObject.id, cellvalue);
+	       	 		if ( rowObject.children.length > 10 &&  rowObject.children[10] && rowObject.children[10].innerHTML.length > 0 ) {
+	       	 			var activityURL = rowObject.children[10].innerHTML;
+	       	 			if ( portProcessed.indexOf('<a') != -1 ) {
+	       	 				return portProcessed.replace("<a ", "<a href='"+activityURL+"' ");
+	       	 			} else {
+	       	 				return "<a href='"+activityURL+"'>"+cellvalue+"</a>";
+	       	 			}
+	       	 		} 
+	       	 		return portProcessed;
+				}
+
 		        setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
 
 		});
Index: lams_gradebook/web/includes/jsp/jqGridIncludes.jsp
===================================================================
diff -u -r8a6afcdd450adc0cd87ea7dbc69cac9fb14a3fb9 -r2ed09b40081fc4dd0ebd267ac45a57d9db3dabd3
--- lams_gradebook/web/includes/jsp/jqGridIncludes.jsp	(.../jqGridIncludes.jsp)	(revision 8a6afcdd450adc0cd87ea7dbc69cac9fb14a3fb9)
+++ lams_gradebook/web/includes/jsp/jqGridIncludes.jsp	(.../jqGridIncludes.jsp)	(revision 2ed09b40081fc4dd0ebd267ac45a57d9db3dabd3)
@@ -15,6 +15,8 @@
 <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.jqGrid.locale-en.js"></script>
 <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.jqGrid.js"></script>
+<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/portrait.js"></script>
 </c:if>
 
 <script type="text/javascript">
@@ -97,8 +99,9 @@
 	// Check a cell before opening tooltip to make sure empty or invalid cells do not display
 	function checkCell(kmouse) {
 		var cell = $(kmouse.target).html();
-		if (cell != null && cell !="" && cell !="&nbsp;" && cell != "-" && cell.charAt(0) != '<') {
-			return true;
+		if (cell != null && cell !="" && cell !="&nbsp;" && cell != "-" && cell.charAt(0) != '<' && cell.indexOf('popover')==-1 ) {
+			var parent = $(kmouse.target).parent().html();
+			return ( ! ( parent.indexOf("<a") == 0 && parent.indexOf('popover')>-1 ) );
 		}
 		return false;
 	}