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