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:

https://mypowerschool.com/guardian/stpthumb/5712ph_thumb.jpeg?version=1417586219587

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:

https://mypowerschool/guardian/stp/5712ph.jpeg?version=1417586219587

    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>
    </li>