Copied to clipboard

Flag this post as spam?

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


  • Donovan Izilein 7 posts 97 karma points
    Jul 20, 2023 @ 13:11
    Donovan Izilein
    0

    Creating a BlockList Counter Loop

    Hi, I hope you can help a nubby in bot Umbraco and C#.

    I need to know how to create a counter for each iteration of a rendered BlockList Item. Once I know which iteration version of the BlockList item I am working with I can then use an if statement to action something on a specific iteration.

    Any help would be really helpful.

    This is the current code I have.

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListItem>;
    

    @using ContentModels = Umbraco.Cms.Web.Common.PublishedModels; @using Umbraco.Cms.Web.Common.PublishedModels; @using Umbraco.Cms.Core.Models @{ var content = (ContentModels.CarouselItems)Model.Content; //var contents = Model.Value<>

    var contents = content;
    
    var image = contents.Value<IPublishedContent>("carouselImage").GetCropUrl(600,400, furtherOptions: "&format=webp");
    var imgAltText = contents.Value("imageAltText");
    var headline = contents.Value("carouselHeadline");
    var paragraphText = contents.Value("paragraph");
    
    //using a manual counter
    var counter = contents.Value<string>("carouselOrder");
    
    
    if(counter == "1") {
    
    <div class="carousel-item @counter active my-sm-3 my-md-5" data-bs-ride="carousel" data-bs-interval="100">
        <div class="carousel-caption d-none d-md-block">
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-12 px-md-5 order-2 order-md-1">
                <h1 class="display-4 mb-4 fw-bold">@headline</h1>
                <p class="text-black-50">@paragraphText</p>
                <div class="d-flex">
                    @{
                        var link = contents.Value<Link>("buttonLink");
                        if (link != null)
                        {
                            <a href="@link.Url" target="@link.Target">
                                <button type="button" class="mt-2 btn btn-orange btn-lg rounded-pill ">@contents.Value("buttonText")</button>
                            </a>
                        }
                    }
                </div>
            </div>
            <div class="col-md-6 col-sm-12 order-1 order-md-2">
                <img src="@image" class="d-block w-100 img-fluid mb-4" alt="@imgAltText" />
            </div>
        </div>
    </div>
    
    } else if (counter != "1") {
    
    <div class="carousel-item @counter" data-bs-ride="carousel">
        <div class="carousel-caption d-none d-md-block">
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <h1 class="display-4 mb-4 fw-bold">@headline</h1>
                <p class="text-black-50">@paragraphText</p>
                @{
                    var link = contents.Value<Link>("buttonLink");
                    if (link != null)
                    {
                        <a href="@link.Url" target="@link.Target">
                            <button type="button" class="btn btn-primary btn-lg rounded-pill">@contents.Value("buttonText")</button>
                        </a>
                    }
                }
            </div>
            <div class="col-md-6 col-sm-12">
                <img src="@image" class="d-block w-100 img-fluid" alt="@imgAltText" />
            </div>
        </div>
    </div>
    
    }
    

    }

Please Sign in or register to post replies

Write your reply to:

Draft