Search

Information


Snippets

Adding an Employee Profile Snippet

Home  >  OU Campus Self-Help  >  Snippets  >  Adding an Employee Profile Snippet

Adding an Employee Profile Snippet

The ‘Employee Profile’ snippet is a simple employee profile layout that includes an area for a headshot photo and an area for the employee name, position, and email address. If you want to add additional employee information to your employee profiles, use the ‘Employee Profile with ‘More Info’ Toggle’ snippet. Use either of these snippets for your employee listing (faculty, staff) pages.

Inserting a Snippet

To insert a snippet, click the "Insert Snippet" icon on the toolbar (Figure 1). 

add an image description
Figure 1. Editor toolbar

 

A "Choose Snippet" pop-up box will appear (Figure 2).

add an image description

Figure 2. "Choose Snippet" window

 

Employee Profile Table

The ‘Employee Profile’ snippet is a simple employee profile layout that includes an area for a headshot photo and an area for the employee name, position, and email address.

In the categories drop down (Figure 3), choose “Employee Profiles”, then choose “Employee Profile” and click Insert.

add an image description

Figure 3. "Choose Snippet" window with category selection.

 

You should now see a two-column table in the page (Figure 4). Use the left column for an employee photo (no more than 130 pixels wide), and the right column for the employee name, position and email address.

add an image description

Figure 4. Employee Profile table.

 

 

Adding more profiles

If you want to add another employee profile, copy the table source row, and paste it either above or below the source row. To do this, place your mouse cursor anywhere inside the source row, then right-click (PC) or ctrl-click (Mac) to bring up the table shortcut menu (Figure 5).

add an image description

Figure 5. Table shortcut menu.

 

 

Select Row > Copy row to copy the source row (Figure 6).

add an image description

Figure 6. Copy row

 

 

Then, paste the row either above or below the source row (Figure 7).

add an image description

Figure 7. Paste row

 

You now have a new table row with a profile available to add information (Figure 8). Use this process to add as many profiles as needed for your employee listing page.

add an image description

Figure 8. New profile

 

Employee Profile Table with ‘More Info’ Toggle

If you want your employee listing pages to have additional employee information beyond what is used in the Employee Profile table shown above, use the “Employee Profile with ‘More Info’ Toggle” snippet instead. In addition to having an area for the employee name, position, and email address, you will notice a nested ‘Toggle’ table to add more information for your employee profile (Figure 9). While you will add information as a table, the finished product will have the additional employee information initially hidden (Figure 10), until clicked/tapped to view (Figure 11).

add an image description

Figure 9. Employee Profile with ‘More Info’ toggle table.

 

add an image description

Figure 10. Employee Profile, with 'More Info' toggle closed

 

add an image description

Figure 11. Employee Profile, with 'More Info' toggle opened.