Umbraco 13 Tutorial - Episode 5 Part 2 - Block Grid Footer
Episode Links
Our.Umbraco.TagHelpers
https://marketplace.umbraco.com/package/our.umbraco.taghelpers
Free Font Awesome SVG Icons
https://use.fontawesome.com/releases/v6.6.0/fontawesome-free-6.6.0-web.zip
GitHub Repo
🐙 GitHub
https://github.com/prjseal/Umbraco-13-Series/
📝 Guest Book
https://github.com/prjseal/Umbraco-13-Series/issues/1
Get Help
💬 Discord
🗣️ Facebook Group
https://www.facebook.com/groups/umbracowebdevs
🐘 Mastodon
https://umbracocommunity.social/
🗨️ Umbraco Forum
https://our.umbraco.com/forum/
☕Buy me a coffee
Freelancer.csproj
<PackageReference Include="Our.Umbraco.TagHelpers" Version="1.2.0" />Freelancer.csproj
footerContent.cshtml
@inherits UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<ContentModels.SocialLinks>>
<h4 class="text-uppercase mb-4">@Model.Content.Title</h4>
@if(Model.Content?.Links?.Count > 0)
{
foreach(BlockListItem<ContentModels.SocialLink> item in Model.Content.Links)
{
if (item.Content.Link is null || item.Content.Icon is null
|| item.Content.IconColour is null || item.Content.InvertedIconColour is null) continue;
var iconKey = item.Content.Icon.Key.ToString("N");
<style>
.svg-@iconKey {
fill:@($"#{item.Content.IconColour.Color}");
}
.svg-@iconKey:hover, .svg-@iconKey:focus {
fill:@($"#{item.Content.InvertedIconColour.Color}");
}
</style>
<a class="btn btn-outline-light btn-social mx-1 svg-@iconKey" href="@item.Content.Link.Url" title="@item.Content.Link.Name" target="@item.Content.Link.Target">
<our-svg media-item="item.Content.Icon" class="svg-inline--fa fa-fw"></our-svg>
</a>
}
}footerContent.cshtml
socialLinks.cshtml
@inherits UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<ContentModels.SocialLinks>>
<h4 class="text-uppercase mb-4">@Model.Content.Title</h4>
@if(Model.Content?.Links?.Count > 0)
{
foreach(BlockListItem<ContentModels.SocialLink> item in Model.Content.Links)
{
if (item.Content.Link is null || item.Content.Icon is null
|| item.Content.IconColour is null || item.Content.InvertedIconColour is null) continue;
var iconKey = item.Content.Icon.Key.ToString("N");
<style>
.svg-@iconKey {
fill:@($"#{item.Content.IconColour.Color}");
}
.svg-@iconKey:hover, .svg-@iconKey:focus {
fill:@($"#{item.Content.InvertedIconColour.Color}");
}
</style>
<a class="btn btn-outline-light btn-social mx-1 svg-@iconKey" href="@item.Content.Link.Url" title="@item.Content.Link.Name" target="@item.Content.Link.Target">
<our-svg media-item="item.Content.Icon" class="svg-inline--fa fa-fw"></our-svg>
</a>
}
}socialLinks.cshtml
threeColumn.cshtml
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>
@{
if (Model?.Areas.Any() != true) { return; }
}
@foreach(var area in Model.Areas)
{
<div class="col-lg-4 mb-5 mb-lg-0">
@await Html.GetBlockGridItemAreaHtmlAsync(area)
</div>
}threeColumn.cshtml
footer.cshtml
@inherits UmbracoViewPage
@{
var siteSettings = Model.GetSiteSettings();
if (siteSettings?.FooterContent is null) return;
}
<footer class="footer text-center">
<div class="container">
<div class="row">
@await Html.GetBlockGridItemsHtmlAsync(siteSettings.FooterContent)
@* <!-- Footer Location-->
<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Location</h4>
<p class="lead mb-0">
2215 John Daniel Drive
<br />
Clark, MO 65243
</p>
</div>
<!-- Footer Social Icons-->
<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Around the Web</h4>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-facebook-f"></i></a>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-twitter"></i></a>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-linkedin-in"></i></a>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-dribbble"></i></a>
</div>
<!-- Footer About Text-->
<div class="col-lg-4">
<h4 class="text-uppercase mb-4">About Freelancer</h4>
<p class="lead mb-0">
Freelance is a free to use, MIT licensed Bootstrap theme created by
<a href="http://startbootstrap.com">Start Bootstrap</a>
.
</p>
</div> *@
</div>
</div>
</footer>
<!-- Copyright Section-->
<div class="copyright py-4 text-center text-white">
<div class="container"><small>© @Umbraco.GetDictionaryValue("CopyrightStatement", "Copyright Paul Seal") @DateTime.Now.Year</small></div>
</div>footer.cshtml
_ViewImports.cshtml
@using Umbraco.Extensions
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@using Umbraco.Cms.Web.Common.Views
@using Umbraco.Cms.Core.Models.Blocks
@using Umbraco.Cms.Core.Models.PublishedContent
@using Microsoft.AspNetCore.Html
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Smidge
@addTagHelper *, Our.Umbraco.TagHelpers
@inject Smidge.SmidgeHelper SmidgeHelper_ViewImports.cshtml
appsettings.json
,
"RichTextEditor": {
"CustomConfig": {
"style_formats": "[{\"title\":\"Paragraphs\",\"items\":[{\"title\":\"Normal\",\"block\":\"p\"},{\"title\":\"Lead\",\"block\":\"p\",\"attributes\":{\"class\":\"lead\"}}]},{\"title\":\"Headings\",\"items\":[{\"title\":\"h1\",\"block\":\"h1\"},{\"title\":\"h2\",\"block\":\"h2\"},{\"title\":\"h3\",\"block\":\"h3\"},{\"title\":\"h4\",\"block\":\"h4\"},{\"title\":\"h5\",\"block\":\"h5\"},{\"title\":\"h6\",\"block\":\"h6\"}]},{\"title\":\"Text Colours\",\"items\":[{\"title\":\"Primary\",\"inline\":\"span\",\"styles\":{\"color\":\"#1abc9c\"},\"attributes\":{\"class\":\"text-primary\"}},{\"title\":\"Secondary\",\"inline\":\"span\",\"styles\":{\"color\":\"#03203d\"},\"attributes\":{\"class\":\"text-secondary\"}},{\"title\":\"Success\",\"inline\":\"span\",\"styles\":{\"color\":\"#198754\"},\"attributes\":{\"class\":\"text-success\"}},{\"title\":\"Danger\",\"inline\":\"span\",\"styles\":{\"color\":\"#dc3545\"},\"attributes\":{\"class\":\"text-danger\"}},{\"title\":\"Warning\",\"inline\":\"span\",\"styles\":{\"color\":\"#ffc107\"},\"attributes\":{\"class\":\"text-warning\"}},{\"title\":\"Info\",\"inline\":\"span\",\"styles\":{\"color\":\"#0dcaf0\"},\"attributes\":{\"class\":\"text-info\"}},{\"title\":\"Light\",\"inline\":\"span\",\"styles\":{\"color\":\"#f8f9fa\"},\"attributes\":{\"class\":\"text-light\"}},{\"title\":\"Dark\",\"inline\":\"span\",\"styles\":{\"color\":\"#212529\"},\"attributes\":{\"class\":\"text-dark\"}},{\"title\":\"White\",\"inline\":\"span\",\"styles\":{\"color\":\"#ffffff\"},\"attributes\":{\"class\":\"text-white\"}}]}]"
}
}appsettings.json