Copied to clipboard

Flag this post as spam?

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


  • Paul 162 posts 562 karma points
    Oct 05, 2015 @ 09:05
    Paul
    0

    Auto Include Macros within specific grid layout

    Hi,

    I'm new to Umbraco, but I've hit a bit of a problem. We're trying to create a very flexible layout system, and I've spent some time on the sub navigation system for the sites we'll build. More often that not the sub navigation will reside either on the right or left hand side of the page. The problem we have is detailed below:

    At present adding in sub navigation menu has two options:

    1.) Hardcode side menus into the template and force users to have this on each page using that template. (don't want to do this, as we want flexibility)

    2.) Create a side menu macro, allowing users to drop it in where they want. (We've done this, allowing users to pick a parent node to create the menu from.)

    What I'd like to do is expand #2 a bit. As it stands when a user creates a new page we've given them the option to layout pages uses elements in the grid system (e.g. headline, banner, article with sidebar, full content, 3 boxes etc). From that they can build their pages.

    Within the context of the side navigation we'd like the macro to automatically populate the grid system layouts for 'article with sidebar', rather than users having to add this in each time. As the chances are users will want this on around 80% of their pages.

    enter image description here

    Can anyone advise how we might go about this customisation of what the grid system includes on pages when a user selects that layout?

  • Lars-Erik Aabech 349 posts 1098 karma points MVP 5x c-trib
    Oct 05, 2015 @ 09:18
    Lars-Erik Aabech
    0

    I think your only option (for now) is to create your own grid datatype.
    You'll be re-using a lot of the builtin stuff, but to be able to act when a row layout is selected, you'll need to "own" the controller for the entire grid.

    Have a look at the documentation for custom grids and see where that gets you.

    Sorry for not providing an example, but I haven't really done this myself. ;)

  • Paul 162 posts 562 karma points
    Oct 12, 2015 @ 14:36
    Paul
    100

    Thanks for taking the time to reply. We'll have a look at that then. Thanks.

  • Paul 162 posts 562 karma points
    Dec 04, 2015 @ 09:55
    Paul
    0

    We're having to revisit this one. Can anyone advise if they've managed to do this at all?

    The initial problem was how do you hardcode a side menu to appear on every page of the site when using the grid system? It's impractical to ask users to add a side menu every time they create a new page.

    Ideally I want to be able to configure a certain partial to be pre-defined when selecting certain page layouts.

  • Paul 162 posts 562 karma points
    Jan 30, 2017 @ 13:15
    Paul
    0

    Resolved - we created an option to dynamically include a side menu that's now an option in the CMS. Although I still think having the ability to pre-populate templates with macros/editors would make life easier for users.

  • Søren Kottal 587 posts 3769 karma points MVP 3x c-trib
    Jan 30, 2017 @ 14:38
    Søren Kottal
    0

    Hi Paul

    You can also modify your grid view, look for the helper renderRow.

    In there, I would do something like this

    @helper renderRow(dynamic row, bool singleColumn)
    {
        <div @RenderElementAttributes(row)>
            @Umbraco.If(singleColumn, "<div class='container'>")
            <div class="row clearfix">
                @foreach (var area in row.areas)
                {
                    <div class="[email protected] column">
                        <div @RenderElementAttributes(area)>
    
                            @{
    
                                var menuIsPresent = false;
    
                                // check if we are in the right row configuration, and the right column
                                // note, I don't remember if the property is named "name", you should make sure it is!
                                if (area.name == "Article with sidebar" && area.grid == 3)
                                {
    
                                    // loop through all the controls in the column, hoping to find our menu
                                    foreach (var control in area.controls)
                                    {
                                        if (control != null && control.editor == "MyMenuEditor")
                                        {
                                            // woohoo, we found our menu, set menuIsPresent to true
                                            // you will off course need to modify the if statement, to match what you are looking for
                                            menuIsPresent = true;
                                        }
                                    }
                                }
    
                                if (menuIsPresent == false)
                                {
                                    // we didn't find our menu, so lets render it ourselves
                                    @Html.Partial("OurMenu")
                                }
                            }
    
    
                            @foreach (var control in area.controls)
                            {
                                if (control != null && control.editor != null && control.editor.view != null)
                                {
                                    <text>@Html.Partial("grid/editors/base", (object)control)</text>
                                }
                            }
                        </div>
                    </div>}
            </div>
            @Umbraco.If(singleColumn, "</div>")
        </div>
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft