Episode 6 - Part 4

Umbraco 13 Tutorial - Episode 6 Part 4 - Block Grid Previews

Episode Links

https://marketplace.umbraco.com/package/umbraco.community.blockpreview

GitHub Repo

🐙 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

iconlink.html

<style>

    .outer-button {
        position: relative;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        cursor: pointer;
        color: black;
        background-color: transparent;
        text-align: left;
        padding: 0;
        user-select: none;
        border: none;
        transition: border-color 120ms, background-color 120ms;
        max-height: 80vh;
        overflow: hidden;
        justify-content: center;
    }

    .btn {
        display: flex;
        flex-direction: row;
        padding: 1em;
        border: 1px solid black;
        background-color: transparent;
        pointer-events: none;
    }

    img {
        height: 1em;
        width: auto;
        margin-right: 0.5em;
    }
</style>

<button class="outer-button" type="button" ng-click="block.edit()" ng-focus="block.focus" ng-class="{'is-trashed': mediaItem.trashed}">
    {{mediaItem = (block.data.icon[0].mediaKey | mediaItemResolver); ""}}

    <div class="text-center mt-4">
        <a class="btn btn-xl btn-outline-light text-dark" href="#">
            <span class="">
                <img ng-if="mediaItem !== null && (mediaItem.mediaLink.indexOf('jpeg') !== -1 || mediaItem.mediaLink.indexOf('jpg') !== -1 || mediaItem.mediaLink.indexOf('png') !== -1 || mediaItem.mediaLink.indexOf('webp') !== -1 || mediaItem.mediaLink.indexOf('gif') !== -1 || mediaItem.mediaLink.indexOf('svg') !== -1) && !mediaItem.trashed" ng-src="{{mediaItem.mediaLink}}" alt="{{mediaItem.name}}" />
            </span>
            {{block.data.link[0].name}}
        </a>
    </div>
</button>

iconlink.html

image.html

<style>

    :host {
        min-height: 160px;
    }

    button > * {
        vertical-align: middle;
    }

    button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
        color: black;
        background-color: transparent;
        text-align: left;
        padding: 0;
        user-select: none;
        border: none;
        transition: border-color 120ms, background-color 120ms;
        max-height: 80vh;
        overflow: hidden;
    }

        button:hover {
            color: #2152A3;
        }

    img {
        object-fit: cover;
        height: 100%;
        width: 100%;
        flex-grow: 0;
    }

    .icon {
        font-size: 60px;
        display: block;
    }

    .link-name {
        background-color: rgba(255, 255, 255, 0.8);
        color: black;
        padding: 3px 6px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: var(--umb-block-grid--block-ui-opacity, 0);
        transition: opacity 120ms;
    }

    .file-name {
        background-color: rgba(255, 255, 255, 0.8);
        color: black;
        padding: 3px 6px;
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: var(--umb-block-grid--block-ui-opacity, 0);
        transition: opacity 120ms;
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .is-trashed {
        background-color: #d42054 !important;
        color: white !important;
    }

        .is-trashed .file-name {
            opacity: 1;
        }

    .image_container {
        width: 80%;
        margin: 0 auto;
    }

    .caption_container {
        width: 100%;
    }
</style>

<button type="button" ng-click="block.edit()" ng-focus="block.focus" ng-class="{'is-trashed': mediaItem.trashed}">
    {{mediaItem = (block.data.image[0].mediaKey | mediaItemResolver); ""}}
    <div class="image_container">
        <img ng-if="mediaItem !== null && (mediaItem.mediaLink.indexOf('jpeg') !== -1 || mediaItem.mediaLink.indexOf('jpg') !== -1 || mediaItem.mediaLink.indexOf('png') !== -1 || mediaItem.mediaLink.indexOf('webp') !== -1 || mediaItem.mediaLink.indexOf('gif') !== -1 || mediaItem.mediaLink.indexOf('svg') !== -1) && !mediaItem.trashed" ng-src="{{mediaItem.mediaLink}}" alt="{{mediaItem.name}}" />
        <span ng-if="mediaItem !== null && mediaItem.name" class="file-name">
            <span ng-if="mediaItem.trashed"><localize key="mediaPicker_trashed">Trashed</localize>:</span>
            {{block.data.caption !== null && block.data.caption !== '' ? block.data.caption : mediaItem.name}}
        </span>
    </div>
</button>

image.html

imagelink.html

<style>

    button {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        width: 100%;
        height: 100%;
        cursor: pointer;
        color: black;
        background-color: transparent;
        text-align: left;
        padding: 0;
        user-select: none;
        border: none;
        transition: border-color 120ms, background-color 120ms;
        max-height: 80vh;
        overflow: hidden;
    }

    img {
        object-fit: cover;
        height: 80%;
        width: 100%;
        flex-grow: 0;
    }

    a {
        pointer-events: none;
    }
</style>

<button type="button" ng-click="block.edit()" ng-focus="block.focus" ng-class="{'is-trashed': mediaItem.trashed}">
    {{mediaItem = (block.data.image[0].mediaKey | mediaItemResolver); ""}}
    <div class="portfolio mx-2">
        <div class="portfolio-item">
            <a href="#">
                <img ng-if="mediaItem !== null && (mediaItem.mediaLink.indexOf('jpeg') !== -1 || mediaItem.mediaLink.indexOf('jpg') !== -1 || mediaItem.mediaLink.indexOf('png') !== -1 || mediaItem.mediaLink.indexOf('webp') !== -1 || mediaItem.mediaLink.indexOf('gif') !== -1 || mediaItem.mediaLink.indexOf('svg') !== -1) && !mediaItem.trashed" ng-src="{{mediaItem.mediaLink}}?width=400&height=290&mode=crop" alt="{{mediaItem.name}}" />
            </a>
            <span>Link: {{block.data.link[0].url}}</span>
        </div>
    </div>
</button>

imagelink.html

title.html

<style>

    .text {
        position: relative;
        display: block;
        cursor: pointer;
        background-color: transparent;
        text-align: left;
        user-select: none;
        border: none;
        padding: 0;
        height: 100%;
        padding-top: 1px;
        margin: -1px 20px 0 20px;
        transition: border-color 120ms, background-color 120ms;
        font-family: 'Lato';
        line-height: 1.5;
    }

    .divider-custom-icon svg {
        width: 1.2em;
        height: 1.2em;
    }
</style>

<div class="text" ng-click="block.edit()" ng-focus="block.focus">
    <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">{{block.data.text}}</h2>
    <!-- Icon Divider-->
    <div class="divider-custom">
        <div class="divider-custom-line"></div>
        <div class="divider-custom-icon"><svg class="svg-inline--fa fa-star" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg><!-- <i class="fas fa-star"></i> Font Awesome fontawesome.com --></div>
        <div class="divider-custom-line"></div>
    </div>
</div>

title.html

Freelancer.csproj

<PackageReference Include="Umbraco.Community.BlockPreview" Version="1.8.4" />

Freelancer.csproj