Staff Directories / List pages

Click a graphic to enlarge it.


The Staff Directory page is a series of embedded lists pulling from separate “List” pages for office staff, classroom teachers, support staff, etc. Those underlying List pages are accessed for editing via the links below each embedded list. 

NOTE: I also use "List" pages for things like the lists of clubs at Madison, as List pages are much easier to edit and maintain than using tables. However, they currently lack graphic images, so they are not useful for photographs. List pages also do not handle text in the form of paragraphs. So see the later STAFF PHOTOS section of this help page for different approaches to the issues of staff photos and biographies.

Editing the entries in the underlying list

Editing an embedded list
To edit one of the lists, you need to click on one of the links at the BOTTOM of its entries.

When the actual LIST page appears, you can:
  • Click on the Add item button to add new entries.
  • Click on an existing entry in the list to edit it.
  • Click on Customize this list to edit the columns and how the list is sorted on THIS page. (See EDITING EMBEDDED LISTS on this help page to see how to re-sort and adjust the columns that are displayed on an embedded list.)
  • To DELETE an entry, click on the entry to edit it, and then click on the words Delete this item at the bottom of the dialog box, to the right of the Cancel box.
Editing a list

Adding new entries in a list

  • Sorting

When you are adding a new entry to a list, you may have to include values for a "Sort" column that is NOT displayed on the embedded lists. I use that to keep the principal at the top of the office staff list, group elementary school classroom teachers by grade level, etc.

If you click on the earlier image of a Principals and Office Staff Directory list, you'll see I put "A" in the Sort column for the Principal, and "B" or "C", etc. for entries I wanted to appear later. But when I embedded that list on the main Staff Directory page, I set up that box to NOT display the Sort column.

Classroom teachers directory

If you click on the above image of an elementary school's classroom teachers, you'll see that I used the following entries in the Sort column to sort by grade level:
    • A PreK
    • B K
    • C 1st
    • D 2nd
    • E 3rd
    • F 4th 
    • G 5th
You'll need to type one of those into the Sort field for an entry to get it to display properly.

  • Entering Email Addresses

When you are adding a list entry, when you get to the Email field, there are two boxes. Be careful to always type
and then the email address when filling out the Web address: entry for Email. If you just put the email address in there, the link will NOT initiate an email.
But for the Email's Display text: entry, you can just type the email address. It is up to you whether or not to include both the username and domain in the Display text: field. I usually just show the username and omit the domain part. 
I also like to capitalize the last name and initials in the usernames. That isn't necessary, since capitalization doesn't affect email addresses, I think capitalizing those parts makes the usernames easier to read.

  • Entering Weblinks

I use these fields to show teacher webpages and the like. Include the complete URL, including the http:// or https:// prefix, when filling out the Web address: field, but you don't need to include those in the Display text: field.

Editing embedded lists

The Staff Directory webpages themselves use a series of embedded lists. That lets us separate out different categories. An embedded list, which summarizes the entries in a separate list, can itself be edited to adjust how many entries it has, how it sorts, what columns of the list are to be displayed, etc.

For example, the embedded lists in the Staff Directory webpage deliberately omit the "Sort" column which is used in several of the list pages to sort office staff, classroom teachers by grade level, etc.

You can edit these embedded lists if you need to:
  1. On the Staff Directory webpage, click the pencil icon at the top right to enter edit mode. Each of the embedded lists changes into a Recent list items box.
  2. Click the Recent list items box you wish to edit.
  3. A properties bar appears; click the Gear icon.
  4. Adjust the entires as needed. Enlarge the graphic below for details.
  5. When you're done, click SAVE.
Recent list items properties


Some sites like to have staff photos, and Madison also had biographies for most of its staff members. These are not possible to do with the List Page function as currently implemented by Google.

Displaying Staff Photos with a Google Drive folder

The easiest way to add staff photos is to upload all of them to a shared folder on Google Drive and simply embed that folder, in image mode, on the Staff Directory webpage. That is what I did for Jane Phillips, Richard Kane, and Woodrow Wilson schools.

Adding, Editing, and Deleting Staff Photos

Once a Google Drive folder is set up (see below), to edit it you need to open Google Drive while logged into your Google Apps account. Find and open the school website folder I have shared with each webmaster. Inside that folder is another folder for the Staff Directory Images or Staff Photos; open it.

RIGHT-click on an existing file to rename or delete it.
To add new photos, click the red NEW button at the top right and select File upload. A dialog box will let you navigate around your computer files to locate and highlight the photos you want to add. Once they are all selected, click the Open box and they will be uploaded into the Google Drive folder. They should now automatically display on the Staff Directory, if that Google Drive folder has already been embedded. See below for instructions on how to do that.

How to Create the Staff Photos and Embed Them

  1. First gather all of the photo files on your computer into one folder and rename each one into the format "Last Name, First Name.jpg" so that they would sort alphabetically by last name when displayed.
  2. Then create a folder for them on Google Drive. I created a folder in the District Webmaster account's Google Drive for each school's website, and then created a Staff Photos folder inside the appropriate school's folder. So please create any new folders inside the school's website folder I have shared with you. That will let future webmasters edit the folder and I can edit it as well when necessary,
  3. Upload all of the files into the Staff Photos folder inside the site's folder on Google Drive.
    1. click the red NEW button at the top right and select File upload
    2. A dialog box will let you navigate around your computer files to locate and highlight the photos you want to add. Once they are all selected, click the Open box and they will be uploaded into the Google Drive folder.
  4. Next, on the site's Staff Directory webpage, put the page into edit mode by clicking on the pencil at the top right.
  5. Click in the right column, open the Insert menu, and in the third GOOGLE column of the pop-up menu, click on Drive and then Folder.
  6. On the Insert... dialog box, double-click on the appropriate school website folder to open it. 
  7. Click on the "Staff Directory" or "Staff Photos" folder you created and uploaded the photos to earlier.
  8. Click the Select button.
  9. Set the Insert Drive Folder properties to:
    1. Include a border
    2. Title the box "Staff Photos"
    3. Set the height (to 1000 pixels) and the width (to 460 pixels)
    4. Set Display as: to Grid so that readers would see the actual photos and not a list of filenames. 
  10. Click the SAVE button.
That should produce two columns of staff photos a reader can scroll through to find the appropriate person.

Staff Biographies with Photos

Madison's former webmaster had created, along with a text staff directory, a set of pages that had biographies and photos of each staff member. Creating easily updated biographies with photos is a tough nut to crack in Google Sites.

My solution at BHS was to use the fancy AwesomeTable gadget to create a Google Sheets spreadsheet with directory information and photo URLs for each staff member. Then I configured the accompanying gadget so that readers can search through the staff listing by name, department, job function, etc. and see entries that include a photograph.

But even that fancy approach cannot easily handle biographies, with their paragraphs of text.

So for Madison Middle School, echoing what Madison's former webmaster had done,  I just created a series of webpages for each set of biographies and set each one up in Table format using the Table command.  This brute force approach certainly works, but it does require messing around with the awkward default formatting of Tables in Google Sites and requires manual editing and updates.

I'm hoping to eventually explore other options, such as some fancy directory gadget someone builds for Google Sites, or seeing if I can figure out how to use File Cabinet or Announcements pages to replicate some of these features in a more easily updated format.