# Add Images along with Text using Document Types and Partial View in Umbraco 7
**by:** Juilie Bhoir  **in:** [Programming](https://www.systenics.com/blogs/category/programming/)  **tags:**[*Umbraco*](https://www.systenics.com/blogs/tag/umbraco/)
While creating an Umbraco site, I came across the need for displaying images along with additional text information which can be setup and managed using Umbraco CMS administration tool. In this blog post, I will explain how to create Document Types and Partial View for a Umbraco 7 website using MVC to display the details.

This article assumes that you already have knowledge about [installation of Umbraco 7](https://www.systenics.com/blogs/setting-up-umbraco-7-in-visual-studio-2013-for-mvc-4-development/) and have configured its rendering engine to use ASP.NET MVC for the pages.

## Create Document Type

In Umbraco CMS administration tool, click on **Settings** section and right-click on **Document Types** to create a new document named as **TeamMemberPage**. Let **Master Document Type** be set to **None** and **Create matching template** be checked (refer figure 1).

## Settings > Document Types > TeamMembersPage

Figure 1: Create new Document Type 'TeamMemberPage'

## Structure For TeamMemberPage

Now click on **TeamMemberPage** document type and switch to **Structure** tab and set the checkbox for **Allow at root** option (refer figure 2).

Figure 2: Create root element

## Creating 'MemberListing' Document Type under TeamMembersPage

Next step is to create document type for listing team members which will have the properties such as member photo, member name and member designation.

Right-click on **TeamMembersPage document type** to create a new document named as **MemberListing** (refer figure 3).

Figure 3: Create new Document Type 'MemberListing'

Switch to the Tabs section and add a new tab 'Content' then switch to the Generic properties and click on the **Click here to add a new property** link to add the 3 properties as listed below and **save** them (refer figure 4 – 7).

Figure 4: Create new Tab 'Content'

Name: MemberPhoto
Alias: memberPhoto
Type: Media Picker
Tab: Content

Figure 5: MemberPhoto property

Name: MemberName
Alias: memberName
Type: Textstring
Tab: Content

Figure 6: MemberName property

Name: MemberDesignation
Alias: memberDesignation
Type: Textstring
Tab: Content

Figure 7: MemberDesignation property

## Add another document type 'MemberList'

Next step is to create document type MemberList which will enable to add multiple member details for the page. Right-click on **TeamMembersPage document type** to create a new document named as **MemberList** (refer figure 8).

Figure 8: Create new document type 'MemberList'

## Structure for MemberList

Now click on **MemberList** document type and switch to **Structure** tab and set the checkbox for **Enable List View** option and also select 'MemberListing' document type as Allowed child nodetypes (refer figure 9).

Figure 9: Structure for 'MemberList'

## Make member list as child node for TeamMemberPage

Next step is to add MemberList as child nodetype for TeamMembersPage. For this step, click on Settings > TeamMembersPage

Switch to Structure tab and select MemberList as Allowed child nodetypes (refer figure 10).

Figure 10: Structure for 'TeamMembersPage'

After creating all necessary document types, the next step is to add content to the site.

## Add Content

Click on Content and select TeamMembersPage which is the root element of the site. Insert proper name for the content and click on Save and publish (refer figure 11 and 12).

Figure 11: Add content 'TeamMembersPage'

Figure 12: Save 'Team Member Page'

Next step is to create content under TeamMembersPage for inserting team member details.

Click on Content > Team Member Page then select MemberList, give a proper name to MemberList and click on Save and Publish (refer figure 13 and 14).

Figure 13: Add content 'MemberList'

Figure 14: Save content 'Team Members'

Next step is to insert details for the MemberList. Click on Content > Team Members, under Child Items tab click on Create and select MemberListing (refer figure 15).

Figure 15: Create 'MemberListing' elements

## Enter your Team details

After selecting MemberListing the following screen will be displayed with the properties like Member Photo, Member Name and Member Designation. Add required details in the appropriate fields and then click on Save and publish (refer figure 16).

Figure 16: Save Member Details

After the first record is created, the following screen is displayed which will list down all the records (refer figure 17).

Figure 17: List of records

Above steps are required to add the required content from Umbraco CMS administration tool and below is the code which will loop through the contents and display it on the site.

Right click **Partial Views** under **Settings** and select **Create** from the menu. In the **Create** dialog give the **Name** as **GenerateTeamMemberList** and set choose a snippet as Empty and click **Create** to create the Partial view and open its editor. Copy-paste the following code into the editor and click the **Save** button to save the partial view.

```
@inherits Umbraco.Web.Mvc.UmbracoViewPage

@using System.Collections;
@{
Layout = null;
var parent = Model.AncestorOrSelf(1);
List<int> nodeIds = new List<int>();
foreach (var page in parent.Children)
{
if (page.DocumentTypeAlias == "MemberList")
{
foreach (var child in page.Children)
{
nodeIds.Add(child.Id);
}
}
}
List<IPublishedContent> slides = new List<IPublishedContent>();
foreach (var nodeId in nodeIds)
{
if (nodeId != null)
{
var publishedContent = Umbraco.NiceUrl(Convert.ToInt32(nodeId));
if (!String.IsNullOrEmpty(publishedContent) && publishedContent != "#")
{
slides.Add(Umbraco.TypedContent(nodeId));
}
}
}
foreach (var slide in slides)
{
if (slide != null)
{
<div style="float: left; padding: 10px;">
@if(slide.GetPropertyValue("memberPhoto")!=null)
{
<img src="@Umbraco.TypedMedia(slide.GetPropertyValue("memberPhoto")).Url" alt="" width="80" height="70" />
}
<h6>@Html.Raw(slide.GetPropertyValue("memberName"))</h6>
<p>@Html.Raw(slide.GetPropertyValue("memberDesignation"))</p>
</div>
}
}
}

```

To use this partial view, include it in your TeamMembersPage using the following code.

```
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using ClientDependency.Core.Mvc;
@{
Layout = null;
}
<div>
@Html.Partial("GenerateTeamMemberList",@Model.Content)
</div>

```

## Published Team Members Page

Figure 18: Image displayed along with Text

You can use this approach to create a jQuery image carousel or a photo album.

## Related pages on Systenics

- [AI-powered listing description generation](https://www.systenics.com/auctionworx/ai-enhanced-listings-description-generation/)

## Need help implementing this for your business?

Our team helps plan, build, and scale marketplace and auction workflows. Explore [industry solutions](https://www.systenics.com/solutions/), [platform products](https://www.systenics.com/products/), and [custom development services](https://www.systenics.com/auctionworx/development-and-customization/) tailored to your goals.

[Book a quick consultation](https://outlook.office.com/bookwithme/user/231015685f21467da5ef6e3eb8b50240@systenics.com/meetingtype/hbYq2z1Hj0C2e7DuwBqdnw2?anonymous&ep=mcard).