Team Profiles: Members List

Before getting started learn the basics:

  • Create a Team

    You can create multiple Teams with multiple Team Members within each.

    1. Click the Content navigation menu item and then select Team Profiles

      Screenshot of Team profiles in the content menu
    2. Click the green Create a team button
    3. Type a title and click the green Publish button
      Screenshot of Team profiles title field

    After you have created a team, you can now create team members.

  • Create and edit Team Members

    1. Within a Team, click the green Create a member button
    2. Add a title. The title must be the member's last name with a dash and their UTMB username as it appears on their email address. eg. "Johnson - jbjohnso". This title will not be displayed on the live web page.
      Screenshot of Team member title field
    3. Add the First and last name.
    4. Add additional details as desired:
      • Academic Suffix
      • Bio
      • Position / Title:
        • Position / Title
        • Entity
        • Department
        • Division
      • Contacts:
        • Email
        • Phone
        • Mobile
        • Fax
        • CV Link
        • Find a Doctor Profile Link
          • Option for the button to display "Clinical Profile" or Schedule an Appointment"
        • Physical Address
        • Mailing Address
      • Education / Research:
        • Education
        • Research
        • Research Profile link
        • Research Experts RSS Feed URL
        • Publications Link
        • Publications RSS Feed URL
        • Lab Website Link
      • Related Media:
        • Photo
          OR
        • Photo Image URL Path
          • The link to an external photo. Note: This overrides the uploaded photo option.
      • Related Data:
        • Custom Links
      • Classification:
        • Categories
        • Tags
      • More Options:
        • Option to disable profile page
        • Redirect URL
          • If there is a URL in this field, it will override the "disable profile page" function
        • CSS for List Items
        • CSS for List Detail Page
    5. Click the Publish button when finished

Layout Views

The widget component template

Learn how to do it:

  • Select the Team members template (layout view)

    Within the edit view of a page, you can customize how team members display..

    1. After you have added the team members widget to a page, click the Edit button on the widget
      Screenshot of the edit button on the Teams Widget
    2. Under the List settings tab, select the list template.
      Screenshot of Team Profile List settings

Member

Member name only

Member name position

Customizations

Customize with CSS Classes.

Learn how to do it:

  • Add CSS classes to a Team members widget

    1. After you have added the team members widget to a page, click the Edit button on the widget
      Screenshot of the edit button on the Teams Widget
    2. Under the List Settings tab, add CSS classes in the More options section.
      • Insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space. View pre-written classes.
        Screenshot of Team Profiles - widget css field

Columns

2 Columns: list-col-md-6

4 Columns + Masonry: list-col-md-3 + list-masonry

Title Styles

Examples below also use img-top

Small: item-title-small

Medium: item-title-medium

Large: item-title-large

Make Heading Tag: title-tag-h5 

Left align title: title-left

Right align title: title-right

Image Options

Image Top: img-top

Float Image Right: img-right

Circle Image: img-circle

Hide Image: img-hide

large Image: img-large (default)

Medium Image: img-medium

Small Image: img-small

Extra Small Image: img-xsmall

Content Dividers

These classes should only be used with the MemberMember name only, and Member name position layouts.

Divider: item-divider

Card: item-card

Content Options

Some examples below also use img-hide

Position / title fields

Align Position Left: position-left (default)
Align Position Center: position-center
Align Position Right: position-right
Show Position / Title fields : add-info-show
Everett Hane, MD
Division Chief
The University of Texas Medical Branch
Internal Medicine
General Medicine
Phone: (409) 555-5555
Mobile: (409) 555-1234
Hide Entity : add-info-show add-info-entity-hide
Hide Department: add-info-show add-info-dept-hide
Everett Hane, MD
Division Chief
The University of Texas Medical Branch
General Medicine
Phone: (409) 555-5555
Mobile: (409) 555-1234
Hide Division: add-info-show add-info-div-hide
Everett Hane, MD
Division Chief
The University of Texas Medical Branch
Internal Medicine
Phone: (409) 555-5555
Mobile: (409) 555-1234

Contacts fields

Hide Contacts: contacts-hide
Contacts Inline: contacts-inline
Align Contacts Left: contacts-left (default)
Align Contacts Center: contacts-center
Align Contacts Right: contacts-right

Categories and Tags

Display Categories: cats-show
Display Tags: tags-show
Display Categories on Top: cats-show cats-top
Display Categories on Bottom: cats-show cats-bottom

Hide Profile Page

Hide Profile Page Link: no-profile To apply this only to individual team members, add the class to the CSS for List Items field of each team member

Training

Create and Edit Team Members

  • Create a Team

    You can create multiple Teams with multiple Team Members within each.

    1. Click the Content navigation menu item and then select Team Profiles

      Screenshot of Team profiles in the content menu
    2. Click the green Create a team button
    3. Type a title and click the green Publish button
      Screenshot of Team profiles title field

    After you have created a team, you can now create team members.

  • Create and edit Team Members

    1. Within a Team, click the green Create a member button
    2. Add a title. The title must be the member's last name with a dash and their UTMB username as it appears on their email address. eg. "Johnson - jbjohnso". This title will not be displayed on the live web page.
      Screenshot of Team member title field
    3. Add the First and last name.
    4. Add additional details as desired:
      • Academic Suffix
      • Bio
      • Position / Title:
        • Position / Title
        • Entity
        • Department
        • Division
      • Contacts:
        • Email
        • Phone
        • Mobile
        • Fax
        • CV Link
        • Find a Doctor Profile Link
          • Option for the button to display "Clinical Profile" or Schedule an Appointment"
        • Physical Address
        • Mailing Address
      • Education / Research:
        • Education
        • Research
        • Research Profile link
        • Research Experts RSS Feed URL
        • Publications Link
        • Publications RSS Feed URL
        • Lab Website Link
      • Related Media:
        • Photo
          OR
        • Photo Image URL Path
          • The link to an external photo. Note: This overrides the uploaded photo option.
      • Related Data:
        • Custom Links
      • Classification:
        • Categories
        • Tags
      • More Options:
        • Option to disable profile page
        • Redirect URL
          • If there is a URL in this field, it will override the "disable profile page" function
        • CSS for List Items
        • CSS for List Detail Page
    5. Click the Publish button when finished

Add Team Members to a Page

Team Members page (list view)

  • Add Team members to a page

    Within the edit view of a page, you can add the team members widget to display team members posts.

    1. On the right side menu, click the Content tab, click the Team Profiles drop down menu and find the Members widget. Click, hold and drag the Members widget onto the desired part of the page, and then release the widget
      Screenshot of the Members widget on the page
  • Select which Team to display

    Within the edit view of a page, you can select which team(s) display.

    1. After you have added the team members widget to a page, click the Edit button on the widget
      Screenshot of the edit button on the Teams Widget
    2. Under the Content tab, select which team to display
      • From all teams: This is the default setting. This will display all members from all teams on the website.
      • From selected teams only: you can specify which teams to display
      • From currently open team: do not use this setting
      • Selected members: you can select one or more individual members to display

      Screenshot of which members to display choices
    3. Narrow selection further
      • All published members: This is the default setting. This will display all published members.
      • Selection of members: you can add filters for categories, tags, and/or published dates. You must add categories and/or tags to the members before you can add the filter to the Team Profiles widget.
        Screenshot of Team profiles widget filter options
    4. Click the Save button when finished.
  • Set the Team members paging & limit the number of items to display
    1. After you have added the team members widget to a page, click the Edit button on the widget
      Screenshot of the edit button on the Teams Widget
    2. Under the List Settings tab, select the paging and limit settings.
      • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed.
      • Use Limit: You can limit the number of items displayed.
      • No limit and paging: Shows all published items at once. This setting is not recommended.
        Screenshot of Team Profiles - widget paging options
  • Sort Team members on a page
    1. After you have added the team members widget to a page, click the Edit button on the widget
      Screenshot of the edit button on the Teams Widget
    2. Under the List Settings tab, select sort members settings.
      • Last published on top: This is the default setting. Sorts the latest members that have been published in descending order by date.
      • Last modified on top: Sorts the latest members that have been edited and saved in descending order by date.
      • By Title (A-Z): Sorts by the title field of the member.
      • By Title (Z-A): Sorts by the title field of the member.
      • As set manually: Sorts by the the order of the members in the Team. You can manually reorder members.
      • As set in advanced mode: Do not use this setting
        Screenshot of Team Profiles - widget sorting options
  • Select the Team members template (layout view)

    Within the edit view of a page, you can customize how team members display..

    1. After you have added the team members widget to a page, click the Edit button on the widget
      Screenshot of the edit button on the Teams Widget
    2. Under the List settings tab, select the list template.
      Screenshot of Team Profile List settings
  • Add CSS classes to a Team members widget
    1. After you have added the team members widget to a page, click the Edit button on the widget
      Screenshot of the edit button on the Teams Widget
    2. Under the List Settings tab, add CSS classes in the More options section.
      • Insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space. View pre-written classes.
        Screenshot of Team Profiles - widget css field
  • Customize how the team member profile displays

    Within the edit view of a page, you can customize how team member profiles display and select the page that it opens in. You must create a separate page, called a profile page which is used to display the full member profile, with the team member widget added to it first.

    1. After you have added the team members widget to a profile page, click the Edit button on the widget
      Screenshot of the edit button on the Teams Widget
    2. Under the Single item settings tab, select the page that the profile opens in.
      • Auto-generated page: This is the default setting and will open the profile within the same page. DO NOT use this setting.
      • Selected existing page: Select the profile page with the team members widget on it.
        Screenshot of Team Profiles - widget profile page settings

Profile Page (detail view)

  • Create a profile page (Required)

    You must create a separate page to display the profile details. You will only need to create one page for all members.

    1. Create a new page. Name it "Profile" and uncheck the Show in Navigation option. Put the page under the page where your team members are listed.
    2. Within the edit view of the profile page, on the right side menu, click the Content tab, click the Team Profiles drop down menu and find the Members widget. Click, hold and drag the Members widget onto the desired part of the page, and then release the widget.
      Screenshot of the Members widget on the page
    3. Publish the page.  You can now use this page to display team member profiles.
  • Add CSS classes to a Team member profile page

    Within the edit view of the profile page, which is used to display the full member profile, you can customize how team member profiles display using CSS.

    1. After you have added the team members widget to the profile page, click the Edit button on the widget
      Screenshot of the edit button on the Teams Widget
    2. Under the Single item settings tab, in the More options section add CSS classes separated by a space:
      Screenshot of the CSS classes field

Explore Other Team Profile Options:

On this page: