Copied to clipboard

Flag this post as spam?

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


  • Darren Wilson 238 posts 646 karma points
    May 22, 2023 @ 13:43
    Darren Wilson
    0

    Add class to block list output div.

    I would like to append a class to the div that's output by the new Umbraco 11 block list editor.

    to become

    Any idea on how this might be done?

    Thanks in advance. Darren

  • James Shelley 9 posts 103 karma points
    May 22, 2023 @ 13:47
    James Shelley
    0

    The default Umbraco Blocklist editor is outputted at /Views/Partials/blocklist/default.cshtml

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListModel>
    @{
        if (Model?.Any() != true) { return; }
    }
    <div class="umb-block-list">
        @foreach (var block in Model)
        {
            if (block?.ContentUdi == null) { continue; }
            var data = block.Content;
    
            @await Html.PartialAsync("blocklist/Components/" + data.ContentType.Alias, block)
        }
    </div>
    

    You can add your own class by appending a new value to class="umb-block-list"

  • Darren Wilson 238 posts 646 karma points
    May 22, 2023 @ 13:49
    Darren Wilson
    100

    Brilliant, thanks James for the prompt response.

  • Darren Wilson 238 posts 646 karma points
    May 22, 2023 @ 14:01
    Darren Wilson
    0

    Quick follow up - how would I target a custom view so I can use different structure for different blocklists - so I've got the default.cshtml for one and user custom.cshtml for another?

  • Darren Wilson 238 posts 646 karma points
    May 22, 2023 @ 14:48
    Darren Wilson
    0

    Figured this out - use this instead of the html helper! Sorted.

    @foreach(var blockItem in Model.MyProperty) {
    var blockItemContent = (ContentModels.MyElementTypeAlias)blockItem.Content;
    <h2>@blockItemContent.MyBlockProperty</h2>}
    

    This is also useful for nesting Blocklists within blocklists. Cheers

Please Sign in or register to post replies

Write your reply to:

Draft