Episode 6 - Part 2

Umbraco 13 Tutorial - Episode 6 Part 2 - Block Grid Image 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

ContentPage.cshtml

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

@using Umbraco.Cms.Web.Common.PublishedModels;
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;

@{
    Layout = "Main.cshtml";
}

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

ContentPage.cshtml

imageLink.cshtml

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

@{
    if (Model?.Content?.Image == null || Model?.Content?.Link == null) return;
}

<!-- Portfolio Item 1-->
<div class="col-md-6 col-lg-4 mb-5">
    <div class="portfolio-item mx-auto">
        <a href="@Model.Content.Link.Url" target="@Model.Content.Link.Target" title="@Model.Content.Link.Name">
            <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
            </div>
            <img class="img-fluid" src="@Model.Content.Image.GetCropUrl(400, 290)" alt="@Model.Content.Image.GetAltText()" width="400" height="290" />
        </a>
    </div>
</div>

imageLink.cshtml

imageLinks.cshtml

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

@{
    const int TITLE_AREA = 0;
    const int CONTENT_AREA = 1;
}

<!-- Portfolio Section-->
<section class="page-section portfolio" id="portfolio">
    <div class="container">
        @await Html.GetBlockGridItemAreaHtmlAsync(Model.Areas.ElementAt(TITLE_AREA))
        <!-- Portfolio Grid Items-->
        <div class="row justify-content-center">
            @await Html.GetBlockGridItemAreaHtmlAsync(Model.Areas.ElementAt(CONTENT_AREA))
        </div>
    </div>
</section>

imageLinks.cshtml

title.cshtml

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

@{
    var textColourClass = Model.Content.Colour != null ? "text-" + Model.Content.Colour.Label.ToLower() : "text-secondary";
    var dividerColourClass = Model.Content.Colour != null && Model.Content.Colour.Label == "White" ? "divider-light" : null;
}

<!-- Portfolio Section Heading-->
<h2 class="page-section-heading text-center text-uppercase @(textColourClass) mb-0">@Model.Content.Text</h2>
<!-- Icon Divider-->
<div class="divider-custom @(dividerColourClass)">
    <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>

title.cshtml