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.

  1. 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.

  2. Using the Page module, create a new Text with image content element
  3. Enter the person's name in the Header field on the General tab
  4. Enter the personal data into the Text tab using the RTE
  5. In the Images tab, add the image using the Browse for files button
  6. Set the Position as Beside text, left
  7. 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
  8. Save and close the content element
  9. 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,

  1. Create a new Regular Text content element
  2. Use the RTE in the Text tab
  3. Click the Insert Tablebutton to insert a table
  4. In the dialog window that opens, provide a Summary, for example "Department of Weaving staff list" or a Caption of the same
  5. Optionally select a Table class.  The example below uses the border1 class
  6. Optionally set Cell padding to add space between the text and cell borders.  The example below uses 2 pixels
  7. Click OK
  8. Enter data in the table

    Tip: Pressing the Tab key in the last cell of the table will automatically add another row

  9. Save and close the content element

Example staff list

NameTitlePhone #Email
John SchmidtHead honcho of weaving(701) 555-1234john.schmidt@domain
Jane DoeWeaving specialist(701) 555-1234jane.doe@domain
Dan StrawberryWeaving specialist(701) 555-5678dan.strawberry@domain
Mary SilverWeaving specialist(701) 555-1234mary.silver@domain
Top of page