How to make a staff list with photos
The question of how to create a staff list with photos (that lines up correctly) has been asked many times. Here is one way to make a staff list.
Using the Filelist module, upload photos of the staff to be included in the list
Tip: The list will look best if the images all have the same shape, for example all squares or all 16:9 rectangles, etc.
- Using the Page module, create a new Text with image content element
- Enter the person's name in the Header field on the General tab
- Enter the personal data into the Text tab using the RTE
- In the Images tab, add the image using the
button
- Set the Position as Beside text, left
- If the image you uploaded is not the appropriate size for the staff list, set the Width (pixels) to automatically resize the image.
The example below uses images with width 100 - Save and close the content element
- Repeat from step 2 for each person in the staff list
Why a separate content element for each person?
Not only does this method make it easy to remove/reorder persons from the list, but the layout is simple and consistent as well.
Example staff list
(another example is available at the University Relations Staff Directory)
John Schmidt

Head honcho of weaving
(701) 555-1234
john.schmidt@domain
Jane Doe

Weaving specialist
(701) 555-1234
jane.doe@domain
Dan Strawberry

Weaving specialist
(701) 555-5678
dan.strawberry@domain
Mary Silver

Weaving specialist
(701) 555-1234
mary.silver@domain
How to make a staff list in a table
If you just want to include a simply-formed table of staff information,
- Create a new Regular Text content element
- Use the RTE in the Text tab
- Click the
button to insert a table
- In the dialog window that opens, provide a Summary, for example "Department of Weaving staff list" or a Caption of the same
- Optionally select a Table class. The example below uses the border1 class
- Optionally set Cell padding to add space between the text and cell borders. The example below uses 2 pixels
- Click OK
Enter data in the table
Tip: Pressing the Tab key in the last cell of the table will automatically add another row
- Save and close the content element
Example staff list
Name | Title | Phone # | |
---|---|---|---|
John Schmidt | Head honcho of weaving | (701) 555-1234 | john.schmidt@domain |
Jane Doe | Weaving specialist | (701) 555-1234 | jane.doe@domain |
Dan Strawberry | Weaving specialist | (701) 555-5678 | dan.strawberry@domain |
Mary Silver | Weaving specialist | (701) 555-1234 | mary.silver@domain |