example of conditional display content razor - Using Umbraco and getting started

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Nick 97 posts 514 karma points

Jun 22, 2023 @ 10:07

Example of Conditional display content (Razor)

Hi All,

Have a bit of a newbie question, I'm using this excellent package from Maria Lopez https://marketplace.umbraco.com/package/our.umbraco.conditionaldisplayers which can show a conditional datatype within the backoffice, I'm using it to show either a YouLink input field or a Mediapicker for an MP4 file. I just need some guidance on how to display the conditonal dsiplay within the code so depending on the backoffice option the frontend shows the correct content, my initial code is below, but any help as always much appreciated :-)

enter image description here

@inherits UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListItem>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@{
    var content = (ContentModels.HeroVideo)Model.Content;
    var image = content.FallbackImage;
    var video = content.HeroMP4VideoLink;
    var homePage = (HomePage)Umbraco.AssignedContentItem.Root();
}
<!-- Hero Start -->
<div id="heroVideo" class="section tech-hero-section-5 d-flex align-items-center">

    @if (Umbraco.AssignedContentItem.Id == homePage.Id)
    {
        <div class="header-logo-homepage">
            <a href="/">
                <img src="@(image!=null?image.Url():"websiteLogo")" alt="" />
            </a>
        </div>
    }
    <div class="video-player">
        <div class="video-background">

            <iframe class="js-video-iframe"
                    src="@Html.Raw(content.HeroVideoLink)?autoplay=1&loop=1&modestbranding=1&playsinline=1&color=white"
                    frameborder="0"
                    allowfullscreen="1" 
                    title="Saietta Electric Drive">
            </iframe>

            <video style="width:100%; max-height:100%" autoplay loop>
                <source src="@(video!=null?video.Url():"heroMP4VideoLink")" type="video/mp4">
                Your browser does not support the video tag.
            </video>

        </div>
        <div class="video-overlay">
            <div class="hero-content text-center">
                <h1 class="title" data-aos="fade-up" data-aos-delay="800">
                    @Html.Raw(content.HeroText)
                </h1>
            </div>
        </div>
    </div>
</div>

Copy Link

Roy Berris 89 posts 577 karma points c-trib

Jun 22, 2023 @ 13:06
0
Hi, you can use the "MP4 video" field, this will be a bool and you can check against it in your Razor code.
```
@if (!content.MP4Video)
{
    <iframe class="js-video-iframe" //...
}
else {
    <video // ...
}
```
From the screenshot I can't see the MP4Video alias, you should replace it with the right one.

Goodluck!
Copy Link
is working on a reply...

Please Sign in or register to post replies