Contribute to Docs Contribute to Docs

Create a footer

A common feature of websites is to have a footer which appears on the bottom of every webpage across the website.

In this example, we are going to create a simple footer with two elements:

A small image which for example could be something like a company logo
Some text such as copyright information or a contact address

You can, of course, add extra fields if you like but this example will hopefully show you how to get started.

Create a site type

We are going to create a new site type which will contain our footer fields.

Create a folder called Models and inside of that folder, create another folder called SiteTypes. Inside SiteTypes, add a class called DemoSite and use the code below:

using Piranha.AttributeBuilder;
using Piranha.Extend;
using Piranha.Models;
using Piranha.Extend.Fields;

[SiteType(Title = "Demo site")]
public class DemoSite : SiteContent<DemoSite>
{
    [Region(Title = "Footer", Display =RegionDisplayMode.Setting)]
    public Footer FooterContents { get; set; }
}

Creating fields for the footer

Now we have a site type created with a property called FooterContents we can now add fields into it which can be edited in Piranha.

To keep things simple, add this class in DemoSite.cs:

public class Footer
{
    [Field(Title = "Footer logo")]
    public ImageField Logo { get; set; }

    [Field(Title ="Footer text")]
    public HtmlField Text { get; set; }
}

Add the footer to your Layout

Now we have created our site type and footer class, we now need to display the footer on every page. To do this, add this HTML snippet to your _Layout.csthml page:

<footer class="border-top footer text-muted">
    <div class="container">
        @{
            var currentSite = await WebApp.Site.GetContentAsync<DemoSite>();
        }
        @if (currentSite != null)
        {
            <div class="row">
                <div class="col-4">
                    <img src="@Url.Content(currentSite.FooterContents.Logo)" style="width:100px; height: 100px;" />
                </div>
                <div class="col-4">
                    @Html.Raw(currentSite.FooterContents.Logo)
                </div>
                <div class="col-4">
                    @Html.Raw(currentSite.FooterContents.Text)
                </div>
            </div>
        }
    </div>
</footer>

Update the site type

We have now created our site type along with it's footer fields. Now, we want to login to the Piranha manager and add some content. To do this, we need to change the Content Type of the Default Site.

Follow these steps:

Login to the Piranha manager
Click on Default Site and a popup will appear
In the Edit site popup, there is a drop down list underneath "Content Type". Change this to "Demo site"
Click Save
Reload the manager page to update the manager view

If you click on Detault Site now, you will see a new tab called "Footer content" and you can now enter content for the footer.

View in the browser!