Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Nick 42 posts 155 karma points
    Jul 10, 2024 @ 08:03
    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

    Copy Link
  • Huw Reddick 1929 posts 6717 karma points MVP 2x c-trib
    Jul 10, 2024 @ 08:58
    Huw Reddick
    0

    Yes, you can add blocklists to a blockgrid

    Copy Link
  • Nick 42 posts 155 karma points
    Jul 10, 2024 @ 09:48
    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?

    Copy Link
  • Huw Reddick 1929 posts 6717 karma points MVP 2x c-trib
    Jul 10, 2024 @ 10:21
    Huw Reddick
    0

    Yes, that is correct

    Copy Link
  • Nick 42 posts 155 karma points
    Jul 10, 2024 @ 11:33
    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?

    Copy Link
  • Huw Reddick 1929 posts 6717 karma points MVP 2x c-trib
    Jul 11, 2024 @ 08:50
    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>
    }
}
    Copy Link
  • Nick 42 posts 155 karma points
    Jul 15, 2024 @ 07:57
    Nick
    100

    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>
    Copy Link
  • Huw Reddick 1929 posts 6717 karma points MVP 2x c-trib
    Jul 15, 2024 @ 18:00
    Huw Reddick
    0

    Glad you have it sorted

    Copy Link
  • Huw Reddick 1929 posts 6717 karma points MVP 2x c-trib
    Jul 18, 2024 @ 06:39
    Huw Reddick
    0

    Glad you have it sorted

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft