Copied to clipboard

Flag this post as spam?

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


  • Stephan Hoekstra 2 posts 72 karma points
    Jul 06, 2016 @ 09:25
    Stephan Hoekstra
    0

    Footprint <3 GridLayout?

    Hi!

    We are considering using footprint to personalize content for our users. We are also using the built-in "Grid Layout" data type in Umbraco 7.

    Is it possible to use segmented (Footprint) content inside a grid layout? If so, can you help us figure out how to do it?

    I have tried adding an editor to the Footer by modifying grid.editors.config.js but I'm not sure what to put for the alias and view values.

    Example:

    [
        {
            "name": "Rich text editor",
            "alias": "rte",
            "view": "rte",
            "icon": "icon-article"
        },
        {
            "name": "Image",
            "alias": "media",
            "view": "media",
            "icon": "icon-picture"
        },
        {
             "name": "Image (Segmented)",
             "alias": "Novicell.Footprint.FootprintContent",
             "view": "media",
             "icon": "icon-picture"
        },
        {
            "name": "Macro",
            "alias": "macro",
            "view": "macro",
            "icon": "icon-settings-alt"
        },
        {
            "name": "Embed",
            "alias": "embed",
            "view": "embed",
            "icon": "icon-movie-alt"
        },
        {
            "name": "Headline",
            "alias": "headline",
            "view": "textstring",
            "icon": "icon-coin",
            "config": {
                "style": "font-size: 36px; line-height: 45px; font-weight: bold",
                "markup": "<h1>#value#</h1>"
            }
        }
        //{
        //    "name": "Quote",
        //    "alias": "quote",
        //    "view": "textstring",
        //    "icon": "icon-quote",
        //    "config": {
        //        "style": "border-left: 3px solid #ccc; padding: 10px; color: #ccc; font-family: serif; font-variant: italic; font-size: 18px",
        //        "markup": "<blockquote>#value#</blockquote>"
        //    }
        //}
    ]
    

    Thank you for your help!

  • Shannon 24 posts 45 karma points
    Jul 27, 2016 @ 07:47
    Shannon
    0

    I use a combination of doctypegrideditor and footprint

  • Peter S 64 posts 106 karma points
    Nov 02, 2016 @ 15:01
    Peter S
    0

    Hi,

    Could you show me an example of the cshtml that does this? How do you go from GetSegmentedValue to render the grid content?

  • Shannon 24 posts 45 karma points
    Nov 03, 2016 @ 02:35
    Shannon
    0

    Hey Peter,

    I use a combination of DoctypeGridEditor and Footprint.

    My grid.editors.config has entries like this.

        {
        "name": "My Custom Content",
        "alias": "myCustomContent",
        "view": "/App_Plugins/DocTypeGridEditor/Views/doctypegrideditor.html",
        "render": "/App_Plugins/DocTypeGridEditor/Render/DocTypeGridEditor.cshtml",
        "icon": "icon-forms-stackoverflow",
        "config": {
            "allowedDocTypes": [
              "^myCustomContent$"
            ],
            "enablePreview": true,
            "previewCssFilePath": "/Style/backoffice.less"
        }
    },
    

    I then create a document with the documentTypeAlias of myCustomContent. This will have the footprint values add to it.

    You can then create a custom view for your new custom document type. (See the documention for doctypegrideditor)

    In the custom view you will be given an IPublishedContent which works with GetSegmentedValue.

    In my complete solution I use ditto to strongly type the models however that is an extra complexity.

  • Peter S 64 posts 106 karma points
    Nov 03, 2016 @ 08:26
    Peter S
    0

    Hi Shannon,

    Thanks for your elaborate answer. This is exactly what I'm trying to do. Use DTGE in combination with Footprint, but I'm missing the part in the custom view where you go from GetSegmentedValue to GetGridHTML. Do you perhaps have an example of a custom view where you get the value from GetSegmentedValue and render the grid content? Documentation for this kind of thing is hard to find :)

  • Shannon 24 posts 45 karma points
    Nov 03, 2016 @ 08:30
    Shannon
    0

    Hey Peter,

    You will need to name the view the same as your document type.

    https://github.com/umco/umbraco-doc-type-grid-editor/blob/develop/docs/developers-guide.md#rendering-a-doc-type-grid-editor

    The documentation has good examples.

  • Peter S 64 posts 106 karma points
    Nov 03, 2016 @ 09:25
    Peter S
    0

    Hi Shannon,

    I'm probably not doing a good job explaining at what point I'm having troubles. Probably a language thing (not native English here). Let me try it this way:

    I've got a DocType 'ContentPage' that has a property 'contentGrid' that has the 'Footprint grid' datatype attached to it.

    So in the ContentPage.cshtml view you would normally (without Footprint) use this to render the grid content:

    @Model.Content.GetGridHtml("contentGrid")

    But now with Footprint I need to get the grid content for the right segment.

    var test = Model.Content.GetSegmentedValue("contentGrid");

    This gets me the right segmented JSON values for the grid content, but I'm having a hard time getting that to render.

    As far as I understand it, this has little to do with the DocTypeGridEditor (even though I use that to fill the grid). The segmentation takes place at the grid level, not at the components in the grid. But I could be wrong about this of course.

    Any idea on how to achieve this?

  • Peter S 64 posts 106 karma points
    Nov 03, 2016 @ 09:42
    Peter S
    0

    It's always nice when you can solve your own problems :)

    I ran into this package: https://our.umbraco.org/projects/developer-tools/skybrudumbracogriddata/

    That does exactly what I needed:

    @{ 
        var gridData = Model.Content.GetSegmentedValue("contentGrid");
        GridDataModel grid = GridDataModel.Deserialize(gridData.ToString());
    
    }
    @grid.GetHtml(Html, "bootstrap3")
    

    Now I have segmented grid content.

    Thanks for your help Shannon.

  • Shannon 24 posts 45 karma points
    Nov 03, 2016 @ 09:34
    Shannon
    0

    I understand now. I am on my phone so can't link to it. You need to get the segmented value and pass it to the grid layout macro. Using the helper function might make it difficult just call the grid layout partial directly.

    I normally do my footprint at the grid item level not the entire grid

Please Sign in or register to post replies

Write your reply to:

Draft