PowerSchool - How to display student photos on the Parent's Portal

To display student's photo on the PowerSchool Parent's Portal:

1. In PS Administrator, create a custom page under the guardian folder, student_photo.html, with the following content:

The  ~[studenttitlephoto] will output the student photo's thumbnail which is too small. For example:


I figured out where the source of the real photo is. All I have to do to get the bigger image source is to remove all the 'thumb' part in the source link of the image:


var src = photo.attr('src');
src = src.replace('thumb', ''); // replace the src link with the bigger photo's
src = src.replace('_thumb', ''); // replace the src link with the bigger photo's
photo.attr('src', src);

Plus, I also have to remove the "height" and "width" attribute of the image to make it displayed in real size:

photo.attr('height', ''); // remove the height attribute to display the real size of the photo
photo.attr('width', '');

2. Add the custom page to the navigation menu: under wildcards folder, modify the guardian_header.txt file, add:

    <li id="btn-photo">
               <a href="student_photo.html">Student Photo</a>