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.
var staffProfileFolder = Umbraco.Content(1062);
@if (staffProfileFolder != null)
<div class="container newsSec">
<div class="row news">
@foreach (var staffProfile in staffProfileFolder.Children<StaffProfile>())
@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">
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>())
<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.