Write to Us
@Html.Partial("ContactForm", contact)- @parent.Name @menuItems[@parent.Name] @foreach(var page in parent.Children.Where(x => x.IsVisible())) { string strClassName = ""; if(@Model.Name == @page.Name) { strClassName = "selected_menu_item"; }
- @page.Name @try { @menuItems[@page.Name] } catch { } }
Hello, world!
This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Heading
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
@RenderSection("jumbotron")
@RenderSection("content")
```
Listing 4: [PageBase] template
In the above listing I have defined a HTML5 based responsive template using Bootstrap classes where necessary. If you compare the code from Listing 3 below with the source from Listing 1 you will find that I have kept the HTML which will repeat on all pages in the**[PageBase]** template and the home page specific HTML has been replaced by RenderSection razor commands which will be rendered from the child templates. I have also changed the path for all local CSS and JavaScript files so that they point to the right local folder. The appropriate Bootstrap style sheets and JavaScripts have also been included into the template file. You will also find that I am using the Umbraco Field method to define the SEO Title and SEO Description properties that we defined on the **[PageBase]** document type on the page.
Now we need to define the Home Page document type, expand the **Document Types** node under **Settings**. Right click on the **[PageBase]** node and select **Create** from the menu. Provide the document name as **Home** and *uncheck* the **Create Matching template** checkbox and click **Create** button to create the **Home** document type under the **[PageBase]** document. We create it under the **[PageBase]** document so that it can inherit properties defined in the base document. Switch to the **Structure** tab and select **Yes** for **Allow at root**so that Home page can be the root of the site. **Save** the setting and switch to the **Tabs** tab so that we can define the tabs required for the Homepage. Add 2 new tabs named **Primary Message** and **Secondary Message** by entering the tab name and clicking**New Tab** button. Switch to the **Generic Properties** tab and add the following properties. These properties have been defined looking at the Jumbotron example and every bit of information that we want to be editable on the Home page needs to be defined as a property in the document type definition.
Name: homePrimaryMessageTitle
Alias: homePrimaryMessageTitle
Type: Textstring
Tab: Primary Message
Name: homePrimaryMessageContent
Alias: homePrimaryMessageContent
Type: Richtext editor
Tab: Primary Message
Name: homePrimaryLink
Alias: homePrimaryLink
Type: Content Picker
Tab: Primary Message
Name: homeSecondaryMessageTitle1
Alias: homeSecondaryMessageTitle1
Type: Textstring
Tab: Secondary Message
Name: homeSecondaryMessageContent1
Alias: homeSecondaryMessageContent1
Type: Richtext editor
Tab: Secondary Message
Name: homeSecondaryMessageLink1
Alias: homeSecondaryMessageLink1
Type: Content Picker
Tab: Secondary Message
Name: homeSecondaryMessageTitle2
Alias: homeSecondaryMessageTitle2
Type: Textstring
Tab: Secondary Message
Name: homeSecondaryMessageContent2
Alias: homeSecondaryMessageContent2
Type: Richtext editor
Tab: Secondary Message
Name: homeSecondaryMessageLink2
Alias: homeSecondaryMessageLink2
Type: Content Picker
Tab: Secondary Message
Name: homeSecondaryMessageTitle3
Alias: homeSecondaryMessageTitle3
Type: Textstring
Tab: Secondary Message
Name: homeSecondaryMessageContent3
Alias: homeSecondaryMessageContent3
Type: Richtext editor
Tab: Secondary Message
Name: homeSecondaryMessageLink3
Alias: homeSecondaryMessageLink3
Type: Content Picker
Tab: Secondary Message
Once you have saved all the properties your properties definition for the **Home** document type should look like figure 9 below.
Figure 9: Home document type properties
Now let’s define the matching **Home** template so that we have appropriate containers defined to display the properties that have been added by us. Expand the **Templates** node under **Settings** and right click on the existing **[PageBase]** template and select **Create** from the menu to create a new template using**[PageBase]** as the master template. Enter the template name as **Home** and click **Create** button to create it. You will see that the new template uses the**[PageBase]** template as the master page template. Copy paste the code from Listing 5 below into the editor for **Home** template and click the**Save** button to save the template.
```
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "PageBase.cshtml";
}
@section jumbotron{
}
@section content{
@Umbraco.Field("homeSecondaryMessageTitle1")
@Umbraco.Field("homeSecondaryMessageContent1")
@Umbraco.Field("homeSecondaryMessageTitle2")
@Umbraco.Field("homeSecondaryMessageContent2")
@Umbraco.Field("homeSecondaryMessageTitle3")
@Umbraco.Field("homeSecondaryMessageContent3")
@RenderSection("Content")
@Umbraco.Field("homePrimaryMessageTitle")
@Umbraco.Field("homePrimaryMessageContent")@Umbraco.Field("homeSecondaryMessageTitle1")
@Umbraco.Field("homeSecondaryMessageContent1")@Umbraco.Field("homeSecondaryMessageTitle2")
@Umbraco.Field("homeSecondaryMessageContent2")@Umbraco.Field("homeSecondaryMessageTitle3")
@Umbraco.Field("homeSecondaryMessageContent3")| @sortLink("ID", 1) | @sortLink("Country Name", 2) | @sortLink("Region", 3) |
|---|---|---|
| @item.CountryID | @item.Name | @item.Region |
-
for (int i = 0; i < imagesCollection.Count
int count = 0;
string activeclass = "";
foreach (var imageItem in imagesCollection)
{
if (count == 0)
{
activeclass = "item active";
count++;
}
else
{
activeclass = "item";
}
}
@:
@:
@:
@:@Umbraco.Field("homeSecondaryMessageTitle1")
@Umbraco.Field("homeSecondaryMessageContent1")
@Umbraco.Field("homeSecondaryMessageTitle2")
@Umbraco.Field("homeSecondaryMessageContent2")
@Umbraco.Field("homeSecondaryMessageTitle3")
@Umbraco.Field("homeSecondaryMessageContent3")
@if(slide.GetPropertyValue("memberPhoto")!=null)
{
}
}
}
}
```
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;
}
@Html.Raw(slide.GetPropertyValue("memberName"))
@Html.Raw(slide.GetPropertyValue("memberDesignation"))
@Html.Partial("GenerateTeamMemberList",@Model.Content)
```
## 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).
---