Add a New Contact

Tags Drupal web CMS

When you are on the main contacts page, you will see a new option for Create Contact when you hover over the + Create button

create contact button

Click Create Contact to add a new person.

Contact Information fields

You will see the Contact Information fields first. Currently, of the 12 fields on this form; only 8 will show up on the contact info as explained below:
contact form fields

Display Name is a required field.  It is important to use the FN LN format and use the same names as you entered in the First Name and Last Name fields.
Note: If you use a different name or format in the display name field, the program will over-ride the First and Last names you enter in the Contact Information section and all you will see is the Display Name.

Fill out the desired fields in the Contact Information section, as determined by your department administrators;  keeping in mind the following information:

Sub Page layout

If you chose to use this layout. only the Name and Job Title fields will show up on the  main page contact squares for each person (along with a photo if added) 

The following fields (if information is added to the field)  will show up on the sub page for each contact:

  • phone
  • email
  • local
  • Personal Bio Section and Quote
  • Social section (icons for Twitter, Linkdin, Facebook and personal web page link)
  • Professional Profile section

The examples below shows the main page and associated sub page layout with all 8 basic fields filled out, as well as Bio, Quote, Social and Professional Profile

This is how the contact will look on the main Contact Page:   
                            main page with sub page

This is how the viewer will see the sub page when they click on the contact person's name.  I have entered descriptions for which fields contains the shown data.

                 sub page

Non Sub Page layout

If you chose a non-sub page layout, the 8 fields  that will show up in the contact grid square (if filled out) are as follows:

  • Name
  • Job Title
  • Phone
  • Cell Phone
  • Local
  • Email
  • Building/Room
  • Preferred Contact Method

The examples below will show you the same contact person as shown above, but using the different layout options.  The same fields were filled out for both sets of examples:

The first example shows the non sub page grid with the More Info button not clicked.  The second example show how it looks with the More Info button clicked.

                   non sub page not clicked                             non sub page  clicked                         


As mentioned in Contact Pages, It is best practice to have similar fields filled out for each staff member  as it maintains the alignment of the entries.

You can fill in other fields than the ones described here,but they will not appear on the contact grid at this time.  In the future, if changes are made to the page template by the web team, more fields might become visible.

Other Section on the New Contact Form

Some departments may decide to use the Personal Bio with Quote, Social or Professional Profile sections. Click on the arrow next to the section title to expand the form for each section:

other sections 

Note:  If you fill out any of these sections, and are using a non- sub page layout; only the Personal Bio  information will show up.
More Info button will appear for that user Viewers can click that button to expand the additional information contained in the Personal Bio. 

With the sub page layout, the Personal Bio, Quote, Social and Professional Profile fields will be shown on the staff member’s full contact page.
The examples above for John Doe have had ALL fields filled out in all sections so you can see where the information from these sections shows up on the completed contact.

It is recommenced that you fill out the info then Save the page as a draft and preview the results before you publish the contact. This way you can make changes as needed before the information goes live.

Add a Profile Photo for your contact

If your department chooses to use pictures for their staff members, please add a placeholder image for any individuals who do not wish to have their photo online. This will help keep the field data layout consistent for all staff members so the entries are similar in size and look. Examples for different photo layouts will be shown at the end of the instructions.

 On the top right of the Contact form, you will see the option to add a Profile Picture

add photo button

The parameters for the image files are given on the page, please ensure your image file is the correct size and format.
Note: Any image modification should be done by a photo editing application prior to uploading to the site.

  1. Click Choose File and then navigate to the photo you want to use.
    media browser
  2. Click open once the correct image has been chosen, and  the photo will show up in the Image Preview box:
    choose photo
  3. Click on the Crop button to open a preview of the image file
  4. There will be a lighted square, drag this square around until you center it on your person.
    This “cropped” area will be what is shown on the main contact page, while the full image will show up on that person’s contact page.
    save crop
  5. Click on the Save button on the lower right border of the frame to save your crop

    The crop button will change to look like the example below, and you should be able to save the add photo page now.


    Note: If you try to Save the page without cropping the image you will get an error about “cropping”:
    crop error

  6. Save and Publish your new Contact once you have the desired information entered.
  7. Finished page examples:
    When you save the page and see the preview, the photo will be shown beside the person’s details on that person’s contact page.  Remember that if you are NOT using a Sub Page layout, you (the editor) will only see the personal contact page when you edit the contacts, it will not be visible for everyone.
    You will notice that the image does not get “cropped” to the size of the lighted square for this page.
                                           sub page photo

You will have to go back to your Main Contact Grid page to see the new person in the grid layout. The photo will show at the cropped size on the main page grid.
For both sub page and non sub page layouts the photo will be positioned above the person's name. 

main grid photo


Article ID: 2935
Mon 2/14/22 8:03 AM
Tue 9/20/22 10:16 AM