Sign in Register
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

    Copy Link
  • 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"

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

    Brilliant, thanks James for the prompt response.

    Copy Link
  • 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?

    Copy Link
  • 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

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies