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
![](/fileadmin/_processed_/9/c/csm_2_1df4322d40.jpg)
Head honcho of weaving
(701) 555-1234
john.schmidt@domain
Jane Doe
![](/fileadmin/_processed_/9/4/csm_1_01_ba174c5e78.jpg)
Weaving specialist
(701) 555-1234
jane.doe@domain
Dan Strawberry
![](/fileadmin/_processed_/f/3/csm_4_6843f10107.jpg)
Weaving specialist
(701) 555-5678
dan.strawberry@domain
Mary Silver
![](/fileadmin/_processed_/f/1/csm_3_a6edab13ed.jpg)
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 |