Systenics Solutions Logo
  • Home start here
  • Solutions services we provide
  • Products products we build
  • About Us who we are
  • Contact Us request a quote
  • Jobs work for us
  • Blog our views

Blog

Home / Blog

Add Images along with Text using Document Types and Parital View in Umbraco 7

  • by:
  • in:
  • tags: Umbraco 7
  • 0 Comments

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

Create new Document Type 'TeamMemberPage'

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

Create root element

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

Create new Document Type 'MemberListing'

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

Create new Tab 'Content'

Figure 4: Create new Tab 'Content'

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

MemberPhoto property

Figure 5: MemberPhoto property

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

MemberName property

Figure 6: MemberName property

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

MemberDesignation property

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

Create new document type 'MemberList'

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

Structure for 'MemberList'

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

Structure for 'TeamMembersPage'

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

Add content 'TeamMembersPage'

Figure 11: Add content 'TeamMembersPage'

Save 'Team Member Page'

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

Add content 'MemberList'

Figure 13: Add content 'MemberList'

Save content 'Team Members'

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

Create 'MemberListing' elements

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

Save Member Details

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

List of records

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 nodeIds = new List();
    foreach (var page in parent.Children)
    {
        if (page.DocumentTypeAlias == "MemberList")
        {
            foreach (var child in page.Children)
            {
                nodeIds.Add(child.Id);
            }
        }
    }
    List slides = new List();
    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(" 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

Image displayed along with Text

Figure 18: Image displayed along with Text

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

Share This Post:

About the Author

This post was written by on Monday March 31, 2014.

Related Posts
  • Setting up Umbraco 7 in Visual Studio 2013 for MVC 4 development - 30 November 2013
  • Create a Responsive, Fluid HTML5/CSS3 based website on Umbraco 7 using Bootstrap 3.0 Framework - 3 January 2014
  • Adding Bootstrap based Responsive Carousel to Umbraco 7 - 15 January 2014
comments powered by Disqus
< Older Newer >
All Categories
  • Programming
  • General
  • DevOps
Tags
  • .NET (9)
  • Ajax (1)
  • Android (3)
  • ASP.NET (1)
  • ASP.NET 4.5 (1)
  • ASP.NET 5 (1)
  • ASP.NET 6 (1)
  • asp.net core (1)
  • ASP.NET MVC (12)
  • AuctionWorx (2)
  • Bootstrap (4)
  • Build and Release (1)
  • CI (1)
  • ClickOnce (1)
  • ClientDependency (1)
  • Code Signing (1)
  • Continuous Integration (1)
  • C-Sharp (9)
  • devops (1)
  • ExpressJS (1)
  • Interview Process (1)
  • iOS (1)
  • Linux (1)
  • Lucene (1)
  • MVC (2)
  • NodeJS (1)
  • Phonegap (3)
  • Razor (4)
  • Salesforce (2)
  • Socket.IO (1)
  • SQL CE 3.5 SP2 (1)
  • SQL Server (1)
  • Sync (1)
  • Sync Framework v2.1 (1)
  • Umbraco 6 (6)
  • Umbraco 7 (4)
  • Visual Studio 2015 (1)
  • Visual Studio Online (1)
  • VMWare ESXI 6.0 (1)
  • WCF (1)
  • Windows (2)
  • WPF (2)

About Us

Systenics Solutions is a customized software development company. We specialize in building Cloud, Web, and Mobile based applications using the latest Cloud Technologies. Our fine-tuned agile processes help you smoothly progress from conceptualizing your ideas, building proto-types/wireframes to bringing your product to market, giving our clients complete visibility and control at all times. We strive to provide our global clients of various sizes with cost effective benefits of offshore development while providing expert technical services.


Microsoft Partner - Gold Cloud Platform

Contact Us

Systenics Solutions

The Affaires, Unit #F-1, 1st Floor, Plot #9, Sector - 17, Opp. Bhumiraj Costarica, Sanpada, Navi Mumbai - 400705, India

 

Telephone: +91-22-2781 0808

Email: info@systenics.com

Skype: saurabhn

Testimonials

"Coming from a non-technical background, Saurabh and his team at Systenics took my business idea and turned it into a fully functional application which surpassed my expectations! You can be sure with them that all your IT related concerns will be covered."

Shobhan, CEO - IITJobs Inc

"The ability Systenics showed in code signing and deploying my click once code in Microsoft visual was truly awesome. I interviewed and tested 6 different development companies and only one was actually able to get the job done - that was Systenics Solutions! Professional, courteous and reliable - I highly recommend them and am very happy and eager to continue growing our business relationship now and in the near future. Thank you Saurabh"

Andre Pierre

I contracted with Systenics about 6 months ago, in an effort to customize auction software for a new company I am launching in the US. The entire process was as smooth as could be. Their estimate for the project was reasonable, and very close to the final number. I would absolutely use this company again, and I have so much confidence in their ability to work with me, I even agreed to a support agreement with them long term. Their ability to communicate with me in the US was always very timely. They listened to my thoughts and ideas, and then suggested some changes, that made my software have even greater value. I cannot thank them enough, and would highly suggest their quality services to anyone. A completely satisfied customer!

Joe Lefebvre - Pharmabid, LLC

Systenics did a great job on our customization , they clearly understood the requirements and completed the task in a timely manner. They were very thorough in project discussions and made sure that we understood how the customization works and suggested improvements when required

Mike Singh - Dr. Liquidator

Copyright © 2012-2018 Systenics Solutions. All rights reserved.

BACK TO TOP