Overview of New Functionality
After installing and activating, you will find the following new admin panels and features:
- New “Teams” menu item with “All Teams” and “Add New Team” sub menu items.
- New “Team Members” menu item with “all Team Members,” “Add New Team Members,” and “Categories” sub menu items.
Teams can be used as stand alone items to display on frontend pages or connect with any VEM event. The overall process to create team members and insert teams into pages is very straightforward:
- Individual team member management: create single pages for artists, administrators, board, members, etc.
- Team Builder: combine any number of single team members into a team.
- Team Shortcode Builder: create hundreds of unique output styles (lists, image grids, headshot cards, etc.).
- Team-Event integration: assign a team to an event and the system automatically creates links to current and past events that can be displayed on the single team member page.
Individual Team Member Management
This is where you’ll create individual team member posts. You’ll be able to assign them to categories you create and each team member receives a unique frontend page. That means it has its own URL making it easier for you to share in emails, newsletters, and social media posts.
Step 1: Create Categories
While this is technically optional, it is strongly recommended.
- Title: required. We recommend using as descriptive of a name as possible.
- Parent: optional but you can create parent/child relationships if needed.
- Description: optional, admin use only.
- Select the Add New Team Member Category button to add the category.
You’ll be able to use categories when creating teams; they serve as a quick way to filter only the groups of team members you want to use:
This makes the task of finding team members to add to a team much easier if you have more than a few dozen team members.
Step 2: Create Individual Team Members
- Title: typically, this is the team member name and/or position.
- Bio: this is a freeform content entry metabox which means you have the full range of layout and design options. Text, images, videos, audio clips, and more can be used.
- Short Description: this optional content is what you can use to create default description that appears on image grid and headshot card team layout options. If nothing is entered, the system will pull the default excerpt content from the main bio content.
- Team Member Categories: these are used for admin purposes and help you filter your team members into manageable groups when creating teams.
- Featured Image: this is where you’ll assign the primary team member image. It can be a traditional headshot or any other image type you want. As a bonus, you’ll be able to use this image at the default aspect ratio or have the system automatically crop it to a square, landscape, or portrait aspect ratio inside the team builder!
- Event Shortcodes: use these when team members are assigned to one or more events.
- Display event history for this team member on the team member’s page using this shortcode: [ventureMemberEvents]
- If you want to show this team member’s events on some other page, include the ID attribute: [ventureMemberEvents id=”2698″]
- To limit which events will display, include the when attribute [ventureMemberEvents when=”future”]
Tip: values for the when attribute are past, current, future, and all. The default is all and that will be used if you do not include the attribute.
Using The Team Builder
Assigning Team Members To A Team
This is where you’ll combine individual team members into any combination to create teams. A user friendly drag and drop interface makes it easy to create teams with as few or as many members as you like.
Display order uses the same drag and drop tools and if you make any edits down the road, those changes are automatically pushed through to any frontend instance of that team.
- Title: for admin purposes only so you can find the team later to edit or delete.
- Filter by Team Category: by default, all team members are shown but you can narrow down the process to a management group by selecting to display team members from a single category.
- Available Members Container: you’ll find all published team members you can drag over to the “Selected” container. You’ll also see the team member’s default or custom short description along with all of the assigned categories (in italic.)
- Selected Team Members Container: drag and drop team members you want to include in the team into this container. Arranging them into your desired display order is as simple as listing them from top to bottom.
- Role Field: optional but very handy to use for listing something like a title or position for admin and board members or something like the role for actors, instrument for musicians, etc.
- Short Description: by default, the system will use the copy from the single team member’s profile but you can customize it on a per-team basis by editing the copy (or removing it if you don’t want to use it!).
- Edit/Reset: the pencil icon will open the that team member’s single post type to edit while the reset icon will restore the role and short descriptions values to default.
Teams Shortcode Builder
Use the shortcode builder to create any combination of outputs for your team. Once a team is saved, you can create any number of different outputs.
Need it displayed as an image grid on one page buy a linked text list on another. No problem.
If you ever need to update the selected members or edit the role and/or short description values, it will get pushed through automatically to any frontend instance of the shortcode that uses that team!
1. STYLING
- Display Style
- Image Grids: displays the featured image assigned to each team member with title and role showing below the image and the short description on hover/tap.
- Headshot card: displays the featured image, title, role, and short description inside a styled content box with contrast background color. Images are right aligned by default but can be customized with CSS.
- One line text: displays the title, role, and short description in a comma separated, text only format. Great for list style displays.
- No styling option for CSS pros who want to create their own custom output style!
- Maximum Columns per row apply to desktop displays and can be anything from 1-12. Columns are 100% responsive and will collapse across tablet and Smartphone display thresholds.
- Maximum Width option allows even more control for those who want images or headshot cards to adopt a specific maximum width regardless of column layout or device display. We kept CSS pros in mind by offering px, em, %, and calc() based values.
- Container Class values make it easier for CSS pros to tweak frontend displays for the same shortcode output used on different pages.
2. COUNTS
- Max To Display value is handy if you only want a certain number of team members from the same team to display on the front end. For example, if you have a cast list with understudies and want to visually separate the main from understudy members. This prevents the need to create a mutually exclusive team while still including all members in another output if desired.
- Offset: this is a super cool function that allows you to skip any number of team members in order to insert free form content between each output display. For example: using a “max to display value of “3” will only show the first six members for the first row then using an offset value of “4” on the subsequent shortcode will pick up the grid using the next team member as the first to display.
3. EVENT STATUS
- When attached to an event, you can opt to display an overlay message for image grid styles. The message is triggered by the respective event’s occurrence dates.
- For example, if a team member is part of a tem assigned to an event and the current date falls within the range of an event’s first and last occurrence, the system would display whatever you enter for the “Current” value.
- This is a great tool to promote engagement with site visitors!
- By default, the overlay appears in the top, right hand corner of the image but it can be repositioned and styled using CSS.
4. CONTENT
- Link targets: you have several options that dictate how/if a team member should link through to the single team member page.
- No link
- Image only
- Name (title) only
- Image and Name values
- Entire output
- Include filter: this simple checkbox is one of the shortcode’s most powerful attributes by allowing you to filter in/out any of the available team member values!
- Headshot
- Name
- Role
- Short description
- Event status
Team-Event Integration
While you can use the Team Manager as a stand-alone solution for featuring groups of team members, you can also link those teams and their respective team members to individual VEM events!
Doing so automatically creates links to current and past events that can be displayed on the single team member page.
On single Event Admin panels, you’ll see a new metabox titled “Associated Teams.” This is where you can assign any number of teams to a single event:
- Available Teams: select desired team from dropdown.
- Select “Add Team” button to assign to event. This will add the team to the “Selected Teams” section.
- Selecting the “X” next to the Team Name to remove.
You can now begin using any of the existing Team Member Event shortcodes to display event meta inside single Team Member pages or any other page or post type:
- Display event history for this team member on the team member’s page using this shortcode: [ventureMemberEvents]
- If you want to show this team member’s events on some other page, include the ID attribute: [ventureMemberEvents id=”4064″]
- To limit which events will display, include the when attribute: [ventureMemberEvents when=”future”]
- Available attributes: past, current, future, and all. The default is all and that will be used if you do not include the attribute.
You can find the above shortcodes and their description material on the Team Member admin panels.
The default frontend display includes the event title linked to the respective single event post and the event year:
You can edit which event meta to include in the frontend display by creating custom functions using VEMs hooks.
You can filter out the year by using the following CSS:
.event-year { display: none; }