Episode 6 - Part 1

Umbraco 13 Tutorial - Episode 6 Part 1 - Block Grid Content

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

MediaWithCropsExtensions.cs

using Umbraco.Cms.Core.Models;

namespace Freelancer.Extensions
{
    public static class MediaWithCropsExtensions
    {
        public static string GetAltText(this MediaWithCrops mediaItem, string altTextAlias = "altText")
        {
            var altText = mediaItem.Value<string>(altTextAlias);

            if (string.IsNullOrWhiteSpace(altText)) return string.Empty;

            return altText;
        }
    }
}

MediaWithCropsExtensions.cs

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("portfolio")
@await Html.PartialAsync("about")
@await Html.PartialAsync("contact")

HomePage.cshtml

richText.cshtml

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

<div class="container my-5">
    <div class="col-lg-8 mx-auto">
        @Model.Content.Text
    </div>
</div>

richText.cshtml

standardHeader.cshtml

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

<header class="masthead bg-primary text-white text-center">
    <div class="container d-flex align-items-center flex-column">
        @if(Model.Content.Image != null)
        {
            <!-- Masthead Avatar Image-->
            <img class="masthead-avatar mb-5" src="@Model.Content.Image.GetCropUrl(240)" alt="@Model.Content.Image.GetAltText()" />
        }
        <!-- Masthead Heading-->
        <h1 class="masthead-heading text-uppercase mb-0">@Model.Content.Title</h1>

        @if(!string.IsNullOrWhiteSpace(Model.Content.Subtitle))
        {
            <!-- Icon Divider-->
            <div class="divider-custom divider-light">
                <div class="divider-custom-line"></div>
                <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                <div class="divider-custom-line"></div>
            </div>
            <!-- Masthead Subheading-->
            <p class="masthead-subheading font-weight-light mb-0">@Model.Content.Subtitle</p>
        }
    </div>
</header>

standardHeader.cshtml