Copied to clipboard

Flag this post as spam?

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


  • Nick 38 posts 131 karma points
    1 week ago
    Nick
    0

    Can a Block List be added as a block on a Block Grid?

    Hi,

    we have a requirement for a 'Timeline' which we plan to implement as a block list with a 'TimelineEntry' element type.

    We then want to be able to add this 'Timeline' as a block within a Block Grid so that the timeline can be placed in any row / column in the Block Grid.

    Is this possible?

    We are looking to implement in Umbraco 10 and Umbraco 13.

    thanks,

    Nick

  • Huw Reddick 1864 posts 6388 karma points MVP 2x c-trib
    1 week ago
    Huw Reddick
    0

    Yes, you can add blocklists to a blockgrid

  • Nick 38 posts 131 karma points
    1 week ago
    Nick
    0

    Thanks Huw, to achieve this would the process be to:

    1) create an element type that had the block list property editor on it and then 2) add that element type as a block on the block grid?

  • Huw Reddick 1864 posts 6388 karma points MVP 2x c-trib
    1 week ago
    Huw Reddick
    0

    Yes, that is correct

  • Nick 38 posts 131 karma points
    1 week ago
    Nick
    0

    Thanks, I have created the following:

    TimelineItem (Element Type)

    Timeline (Block List Property Editor) and added the TimelineItem as a block type

    Timeline (Element Type) and added the Timeline block list property editor to it with an alias of timelineList

    Then I have then created a BlockGrid property editor (and added the Timeline element type to the Blocks).

    I have the created a document type with template called GridPage and added the BlockGrid property editor to it with an alias of "grid".

    Then added the following code to the GridPage template:

    @await Html.GetBlockGridHtmlAsync(Model, "grid")
    

    I then had to add a partial view at:

    /Views/partials/blockgrid/Components/Timeline.cshtml

    However I am not sure how to render the blocklist html in the /blockgrid/Componenents/Timeline.cshtml partial view.

    I have tried:

    @Html.GetBlockListHtml(Model, "timeline")
    

    But am getting the error:

    *'IHtmlHelper<dynamic>' has no applicable method named 'GetBlockListHtml' but appears to have an extension method by that name. Extension methods cannot be dynamically dispatched. Consider casting the dynamic arguments or calling the extension method without the extension method syntax.*
    

    I am not sure what I need to declare as the model in the partial view. Can anyone advise?

  • Huw Reddick 1864 posts 6388 karma points MVP 2x c-trib
    1 week ago
    Huw Reddick
    0

    Hi Nick,

    The example below is for just a simple image but should give you an idea

    @using Umbraco.Extensions
    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>
    
    @{
        Layout = "_Layout_Features.cshtml";
    }
    
    @{
        var typedMediaPickerSingle = Model.Content.Value<Umbraco.Cms.Core.Models.MediaWithCrops>("image");
        var altText = Model.Content.Value<string>("altText");
        if (typedMediaPickerSingle != null)
        {
            <img alt="@altText" src="@typedMediaPickerSingle.GetCropUrl(width:360)" style="object-fit:cover; width:100%; height:100%;" />
        } else {
            <p>Missing image</p>
        }
    }
    
  • Nick 38 posts 131 karma points
    7 days ago
    Nick
    0

    Thanks Huw, I now have the following code working...

    In the partial view for the block that will be added to the grid:

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>;
    @using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
    @{
        // https://our.umbraco.com/forum/using-umbraco-and-getting-started/109529-is-it-possible-to-render-a-blocklist-inside-of-another-block-list#comment-346152
    
        var content = (ContentModels.TimelineGridBlock)Model.Content; // use the item level ElementType model
    
    }
    
    @Html.GetBlockListHtml(content.TimelineItems) @* Use the alias of the property on the parent element type*@
    

    Then in the partial view for the block that is added to the BlockList:

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListItem>;
    @using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
    @{
        var content = (ContentModels.TimelineItem)Model.Content;
    }
    
    @*Output the value of field with alias 'title' from the Element Type selected as Content section*@
    
    <h1>@content.Value("title")</h1>
    
    <h3>@content.Value("description")</h3>
    
  • Huw Reddick 1864 posts 6388 karma points MVP 2x c-trib
    6 days ago
    Huw Reddick
    0

    Glad you have it sorted

  • Huw Reddick 1864 posts 6388 karma points MVP 2x c-trib
    4 days ago
    Huw Reddick
    0

    Glad you have it sorted

Please Sign in or register to post replies

Write your reply to:

Draft