Skip to the content

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 class="col-md-9 contentText">
<div class="authorName postedDateTime">
<h2><strong>@staffProfile.StaffFirst @staffProfile.StaffLast</strong></h2>
<div class="postContent">

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

/*can also be done like this*/

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 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.

comments powered by Disqus

Blog Filter

How we can help?

Need help with an Umbraco project?

Need help with a project but not too sure who to approach? Send us your project brief and budget. We will provide a free consultation and can help you gather quotes from the best and most suitable freelancers or agencies.

Looking to hire an Umbraco Professional?

Have you got job vacancy and want to hire an Umbraco professional? Post a job on our website for free. Alternatively let us know your requirements and we will send suitable prospects your way.

Claim your free profile!

Are you an Umbraco Freelance Developer or Umbraco partner that wants to advertise on our site? If you work with Umbraco or registered as an Umbraco partner then you can create a profile for free.

Let's build the Umbraco Community

We're big on building the Umbraco community and we think you guys are awesome! If there's anyway at all we can help then please reach out.