Creating Uniform Staff Pages

We are streamlining our staff pages for a more uniform responsive design that is easy for our clients to update. Using the feature portlet and a custom page layout with predefined classes, we can ensure that all staff pages (on any site) are set up the same. This means spending more time on the initial staff page setup for each site to avoid manual HTML that may not be uniform across sites and would be harder for clients to edit.

Staff Render Templates:

• Feature - Staff: Divides the image and text into separate containers; contains no default links.
• Feature - Staff - Wrap: Image floats within the text to enable wrapping; contains no default links.

Page Layout Options

A custom page layout will need to be set on all staff pages (instructions to follow). The following four predefined classes will be applied within the page layout (these classes are separate from the render template options).

staffLeft: the default, image sits to the left of the text

staffRight = image sits to the right of the text

staffAlt = image alternates between left and right of the text

staffCol = features display inline, four across

Instructions

1. Navigate to the parent page (typically "office") and create a new Content Space Page with the appropriate page title listed in the blueprint.
2. On the newly created page, under Page Options, open the Page Layout settings.
3. Select the last Layout Style option "Custom" and paste the following code into the Custom Layout box, replacing the existing <template> tags.

   <template>
   <div id="content">
   <div class="clearfix">
   <div id="staffIntro">
   <div class="clearfix">
   <column order="1" />
   </div>
   </div>
   <div id="staffDirectory" class="staffLeft">
   <div class="clearfix">
   <column order="2" />
   </div>
   </div>
   </div>
   </div>
   </template>

4. Set the staffDirectory class according to desired layout. Options are staffLeft, staffRight, StaffAlt, and StaffCol. Check validation and update page.

   

5. In design mode, you will find two red Defined Portlet Areas. Add a Content Portlet to the first one for intro text and a Feature Portlet to the second one for staff bios.
   • Select the Feature render template according to desired photo position. Options are Feature - Staff and Feature - Staff - Wrap.
   • If using the staffCol class in the page layout with a large amount of staff members to list, it is acceptable to add multiple Feature Portlets to the second Portlet Area, each one preceded by its own Content Portlet used for labeling the type of roles listed.

     

Feature Content Layout Suggestions

Feature - Staff

Feature title: Staff Member Name
Feature description:

<h3>Job title</h3>
<p>Brief bio</p>
<ul>
<li>Direct line/extension: <a href="tel:555-555-5555">555-555-5555</a> </li>
<li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
</ul>

Feature - Staff - wrap

Feature title: Staff Member Name - Job Title
Feature description:

<p>Brief bio</p>
<ul>
<li>Direct line/extension: <a href=”tel:555-555-5555”>555-555-5555</a></li>
<li>Email: <a href=”mailto:[email protected]”>[email protected]</a></li>
</ul>

Note: when using "staffCol" class in page layout, limit feature content to staff member name and job description.