How to Create and Render Staff Profiles and Featured Staff Profiles In Umbraco 8

Right so lets jump straight into it heres what you want to do to create Staff Profiles

Step 1. Log in to your Umbraco 8 Back Office and Create a new doc type with out template.

Step 2. give your new Doc Type a name i will call mine Staff folder.

Step 3. Create another new doc type without template and Give this a name and some propertys you think you will need your staff profiles to have such as (FirstName, LastName, Email, Phone) 

Step 4. Now You need to allow your home page doc type as a root and allow your Staff Folder as a child. and them allow staff profiles as a child of Staff folder

Step 5. Next you will need to fill out some content on your staff profiles Doc Type to do this head over to the content section of Umbraco 8 Back Office. Then right click Home and click create then choose staff folder. now right click on Staff Folder and create a new Staff Profile and fill out all the property fields you created. Make sure you save and publish your work.

Now you need to render your new doc-type as HTML either as a new view or partial View this is completely your choice.

Step 6. Create a Template for your Staff Profiles doc-type and add all your fields in the style you want them displayed. This is my example code.

@inherits UmbracoViewPage
@using Playground.Core.Models

@{
var staffProfileFolder = Umbraco.Content(1062);
}

@if (staffProfileFolder != null)
{
   <div class="container newsSec">
      <div class="row news">
          @foreach (var staffProfile in staffProfileFolder.Children<StaffProfile>())
          {
            <div class="row">
             @if (!string.IsNullOrEmpty(staffProfile.StaffFirst) && !string.IsNullOrEmpty(staffProfile.StaffLast))
             {
                <div class="col-md-3 AuthorImages">
                    <img class="contentprofileimg rounded-circle" src="@staffProfile.StaffImg.GetCropUrl("staffImg")" />
                </div>
                <div class="col-md-9 contentText">
                   <div class="authorName postedDateTime">
                      <h2><strong>@staffProfile.StaffFirst @staffProfile.StaffLast</strong></h2>
                      <h3>@staffProfile.StaffEmail</h3>
                      <h4>@staffProfile.StaffPhone</h4>
                      <h5>12:19</h5>
                   </div>
                   <div class="postContent">
                      <p>
                         @staffProfile.StaffBio
                      </p>
                   </div>
                 </div>
               }
          </div>
         }
    </div>
 </div>

Step 7. Now you need to render your new view to your page this is very easy using this code snippet below.

 @Html.Partial("~/Views/Partials/staffProfiles.cshtml")​
/*can also be done like this*/
@Html.Partial("staffProfiles.cshtml")

Now you have your staff profiles and know how to display them as html now we can start with the featured staff profiles.

Step 1. Go to your home Doc Type and and add a new property called Featured Staff. choose the multi-node tree picker and your editor and save and publish. (your configuration should look like this)​​

Step 2. Now you want to go over to the content section and populate your new property with content. (this will be choosing the staff profiles you want to display as featured).

Step 3. Next step is to add you new property into your html or create a partial view this is up to you what suits you best. here is my quick code snippet showing how i have rendered my featured profiles

@{ 
   if(Model.FeaturedStaff != null && Model.FeaturedStaff.Count() > 0)
     {
       foreach(var staff in Model.FeaturedStaff.OfType<StaffProfile>())
       {
        <h1>@staff.StaffFirst @staff.StaffLast</h1>
        <h3 class="staffInfo">@staff.StaffEmail @staff.StaffPhone</h3>
       }
     } 
  }

Step 4. Save all your work and reload your site, Now your staff profiles will be on your site where you placed them in your html.

About the author

Nathan Reece

.Net MVC Developer | Umbraco Novice

Hey Guys,

I'm an New Developer with a passion for coding. I absolutely love working with Umbraco CMS and appreciate the Umbraco community even more.

I've got 3 years+ .Net experience and 5 years+ experience working in the Web Develepment industry, both coding and marketing job websites. I wanted to use my skills to help give something back to this awesome community and UmbraJobs.com seems like the right place to do just that.

Follow me on social media

If you're an Umbraco professional, partner, employer, recruiter or a passionate Umbraco community builder then I'm more than happy to hear from you. Follow me on my social media channels and please reach out if you have any needs, want help or consultation with anything Umbraco related or just want a general chat.