Episode 5 - Part 2

Umbraco 13 Tutorial - Episode 5 Part 2 - Block Grid Footer

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>&copy; @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