/
UCDC Meet Our Team

UCDC Meet Our Team

Meet Our Team

This is a new format that we haven’t looked at yet. This page is built completely within Drupal. This is a basic page.

Components used:

  • Container

    • Heading

    • General Card (one “General Card” for each team member)

image-20250109-161756.png

This has a main menu link under “About Us”.

image-20250109-160012.png

Metatags are set with the title auto generated and custom description.

The URL is set by the title of the page:

To make updates to the content on this page, log into Drupal. Look for the Admin Menu at the bottom and choose the “Edit” button.

You can update the “Heading” by clicking on the edit button to the right.

Then click on the “edit” button to the right of “Heading”.

To update an existing meet the team “General Card”, scroll down in Drupal and locate the person you wish to update. For our example, we are going to look at updating Andrea Gropman. Once you find her “General Card”, click the “Edit” button to the right.

Once you open up this card, you will see various parts of the card.

  1. Columns – don’t change this – it should be set to 33%

  2. Card Type – don’t change this – it should be set to “Team Member Card”

  3. Body – edit the text as needed but be sure to keep the formatting within this body the same. You might want to open the html file to make your edits by clicking “Source” in the upper left-hand corner of the “Body”. Make any edits and then click “Source” again to review the text as it will display on the site.

  4. Image – update the image following steps provided above. Only high-resolution headshots should be added to the site. If you add an image and then see on the live site that the image is pixelated or blurry, go back to the image and delete it. You can put a placeholder instead of a headshot by searching for “thumbnail team.png” and adding this image.

  5. Button – update the URL as needed – link text “Learn More” should not be changed unless you are changing this for everyone listed on this page.

  6. Heading – this isn’t currently being used.

To add a new team member, scroll to the bottom of the page and click on the “Add Accordion” immediately below the last “General Card” look for “General Card” from the dropdown box and select this.

  1. Columns – choose 33%

  2. Card Type – choose “Team Member Card”

  1. Body – Add information here following the formatting of the “General Cards” already added. You might want to open up a card above and click “Source” in the top right of the “Body” to see how this if formatted. Here is an example:

  1. Image – upload an image if one has been provided. Naming convention can be whatever you’d like – suggestion would be “lastname_firstname_headshot.jpg”. Only high-resolution headshots should be added to the site. If you add an image and then see on the live site that the image is pixelated or blurry, go back to the image and delete it. You can put a placeholder instead of a headshot by searching for “thumbnail team.png” and adding this image. Add the placeholder if no image has been provided.

  2. Button – if the team member has an external bio link add this to the URL field. The link text should be “Learn More”. If no bio is provided, leave these fields blank and they will not populate on the live site.

  3. Heading – this isn’t currently being used. 

The current order for the team page lists co-principal investigators first followed by the balance of the team members in alpha order grouped by role.

If you would like to move a new team member you add, first add their information, click “Save” at the bottom of the page and then reopen the “Edit” button at the bottom of the page.

Open up the “Container” by clicking “Edit” to the right of this component.

Scroll down to find the person who’s bio needs to be moved. Click on what looks like a division side on the left side of the “General Card” component who want to move. It will highlight the card to yellow. Once it’s yellow, you can click and drag the card to where you’d like it placed.

When finished, scroll to the bottom of the page and click “Save”. Any changes will show on the live site immediately.