Episode 6 - Part 3

Umbraco 13 Tutorial - Episode 6 Part 3 - Block Grid Icons and Links

Episode Links

🐙 GitHub

https://github.com/prjseal/Umbraco-13-Series/

📝 Guest Book

https://github.com/prjseal/Umbraco-13-Series/issues/1

Get Help

💬 Discord

https://discord.gg/umbraco

🗣️ Facebook Group

https://www.facebook.com/groups/umbracowebdevs

🐘 Mastodon

https://umbracocommunity.social/

🗨️ Umbraco Forum

https://our.umbraco.com/forum/

☕Buy me a coffee

https://codeshare.co.uk/coffee

Code

HomePage.cshtml

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.HomePage>

@{
    Layout = "Main.cshtml";
}

@await Html.GetBlockGridHtmlAsync(Model, "headerContent")
@await Html.GetBlockGridHtmlAsync(Model, "mainContent")

@await Html.PartialAsync("contact")

HomePage.cshtml

callToAction.cshtml

@using Umbraco.Cms.Web.Common.PublishedModels
@inherits UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<ContentModels.CallToAction>>

@{
    const int TITLE_AREA = 0;
    const int CONTENT_AREA = 1;
    const int LINK_AREA = 2;
    ViewData["hasContainer"] = "true";
}

<section class="page-section bg-primary text-white mb-0" id="about">
    <div class="container">
        <div class="text-white">
            <!-- About Section Heading-->
            @await Html.GetBlockGridItemAreaHtmlAsync(Model.Areas.ElementAt(TITLE_AREA))
        </div>
        <!-- About Section Content-->
        <div class="row">
            @{
                var contentArea = Model.Areas.ElementAt(CONTENT_AREA);
                if(contentArea != null && contentArea.Any())
                {
                    var classToApply = "";
                    var itemCount = contentArea.Count;
                    var i = 0;
                    foreach(var item in contentArea)
                    {
                        if(itemCount > 1)
                        {
                            if(itemCount > 1 && i % 2 == 1)
                            {
                                classToApply = "me-auto";
                            }
                            else
                            {
                                classToApply = "ms-auto";
                            }
                        }
                        else
                        {
                            classToApply = "mx-auto";
                        }

                        <div class="[email protected] @(classToApply)">
                            @await Html.PartialAsync("blockgrid/Components/richText", item)
                        </div>
                        i++;
                    }
                }
            }
        </div>

        @{
            var linkArea = Model.Areas.ElementAt(LINK_AREA);
        }

        @if(linkArea != null && linkArea.Any())
        {
            foreach(var item in linkArea)
            {
                var iconLink = item.Content as IconLink;
                if(iconLink != null)
                {
                    <!-- About Section Button-->
                    <div class="text-center mt-4">
                        <a class="btn btn-xl btn-outline-light" href="@iconLink.Link.Url" target="@iconLink.Link.Target">
                            @* <i class="fas fa-download me-2"></i> *@
                            <span class="icon-link">
                                <our-svg media-item="iconLink.Icon" class="svg-inline--fa fa-fw text-white"></our-svg>
                            </span>
                            @iconLink.Link.Name
                        </a>
                    </div>
                }
            }
        }

    </div>
</section>

callToAction.cshtml

imageWithCaption.cshtml

@inherits UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<ContentModels.ImageWithCaption>>

@if (Model?.Content?.Image == null) return;

<section class="page-section bg-white text-white mb-0">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <img class="img-fluid" src="@Model.Content.Image.Url()" alt="@Model.Content.Image.GetAltText()" />
                <p class="text-dark text-center fst-italic">@Model.Content.Caption</p>
            </div>
        </div>
    </div>
</section>

imageWithCaption.cshtml

richText.cshtml

@inherits UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<ContentModels.RichText>>

@{
    var hasContainer = ViewData["hasContainer"] == "true";
}

@if(hasContainer)
{
    @Model.Content.Text
}
else
{
    <div class="container my-5">
        <div class="col-lg-8 mx-auto">
            @Model.Content.Text
        </div>
    </div>
}

richText.cshtml

styles.css

.icon-link {
    fill: #fff;
}

a.btn:hover .icon-link {
    fill: #000;
    transition: fill 0.15s ease-in-out;
}

styles.css