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:
You can, of course, add extra fields if you like but this example will hopefully show you how to get started.
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; }
}
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; }
}
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>
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:
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.
Now when you view your website, you should see the small logo and text in your footer.