Copied to clipboard

Flag this post as spam?

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


  • Markus Johansson 1536 posts 4318 karma points
    Nov 22, 2018 @ 16:08
    Markus Johansson
    0

    Grid layout with "wrappers" or multiple layouts

    I'm working on a site where we're looking at using the grid for some of the content pages.

    I know that a grid has a layout and then X number of "row configurations", but we run into problems when we need to wrap a section on the page with different row configurations.

    The design looks something like this

    enter image description here

    Basiclly there is 3 blocks, each 100% in width

    Hero

    • 100: Heading

    Blue Block

    • 100: Heading
    • 100: Intro text
    • 33/33/33: Images

    Red Block

    • 100: Heading
    • 100: Intro text
    • 33/33/33: Images

    Since we need to configure the color for the "Blue Block" and "Red Block" we need some kind of wrapper for these "sections". As far as I can tell there is no way to do this at the moment?

    I was thinking that multiple "grid layouts" stacked could have been the solution but a grid can only have one layout and we can't nest the row configurations - right?

    Anyone that have had the same problem?

    I'm thinking that this might be something to address in the core as well, maybe a grid should be able to have multiple stacked layouts? That would solve this particular scenario and I don't see any real drawback with that? (Could of course be a configuration setting as well).

    Cheers!

  • Nik 937 posts 3745 karma points MVP c-trib
    Nov 23, 2018 @ 09:25
    Nik
    0

    People might shout at me for this, but could you do Nested Content with the grid within it?

    Nested could configure your high level "blocks", and then the grid for their content?

    I would say use Stacked Content to get the preview benefits but it wouldn't be very nice to edit the grid in the slide out dialog Stacked uses.

  • Markus Johansson 1536 posts 4318 karma points
    Nov 23, 2018 @ 10:36
    Markus Johansson
    0

    Hi!

    The same idea actually crossed my mind but I did a small "POC" and the grid does not render nice inside Nested Content and like you say it does not really "feel right".

    My current approach is try to use Doc Type Grid Editor for each "block" but then again - not a 100% good solution.

    // m

  • Søren Kottal 352 posts 2004 karma points c-trib
    Nov 23, 2018 @ 10:35
    Søren Kottal
    100

    How about row configs in multiple rows? Like this? https://i.imgur.com/C5A3Bmr.png

  • Markus Johansson 1536 posts 4318 karma points
    Nov 23, 2018 @ 10:37
    Markus Johansson
    0

    Ohh... did not realize that that was an option =D Need to try it out! =D

  • Markus Johansson 1536 posts 4318 karma points
    Nov 23, 2018 @ 10:40
    Markus Johansson
    0

    OMG! I think you just saved my next couple of weeks =D =D =D

  • Matt Brailsford 1937 posts 9562 karma points MVP 5x c-trib
    Nov 23, 2018 @ 10:42
    Matt Brailsford
    0

    If each block is a 100% wide, can't you have multiple blocks in a single cell and let them stack? Then each row can be your container and inside that is one cell, which inside that is your content blocks stacked.

    On the row you can then have row options to decide the colour.

  • Markus Johansson 1536 posts 4318 karma points
    Nov 23, 2018 @ 10:47
    Markus Johansson
    0

    Matt, that's what I wanted to do, but I'm not really sure how you're thinking that the 33/33/33-cells could be added inside the 100% row config?

    The approach that Søren posted seems to take me 90% of where I want to be, but the problem is that there is no freedom for the editor to ie add another 100%-wide row inside the wrapping block if they all have to be configured on the row.

    Edit: I think I'm getting your idea that the 33/33/33-row could be a content block with these tree "boxes" configured on the "block" right? That's one approach but let's say that they wanted to put an image in the middle, then this approach would limit the editor.

  • Søren Kottal 352 posts 2004 karma points c-trib
    Nov 23, 2018 @ 10:57
    Søren Kottal
    0

    You could treat the controls inside the 100% cell as rows themselves.

    Umbraco exposes an alias for the row configuration, which you can detect and use to make a specific rendering for just that row config.

  • Matt Brailsford 1937 posts 9562 karma points MVP 5x c-trib
    Nov 23, 2018 @ 10:50
    Matt Brailsford
    0

    Ahhh, I thought all your blocks were 100% wide such that the 33/33/33 images block was a single block.

    In reply to your question, I tend to make single stackable blocks (hence I use Stacked Content) and each block is predefined. So I would have a 33/33/33 image block. Or if I needed to be able to put a video in the middle I might then create a block with image/video/image. I'd then use Doc Type Grid Editor to configure those.

  • Markus Johansson 1536 posts 4318 karma points
    Nov 23, 2018 @ 10:54
    Markus Johansson
    0

    Seems like a good approach! I'm still trying to figure out how we should work moving forward. But like you say, there is an upside in setting up the blocks in a quite "limited" way like this to avoid editors going crazy =D

  • Matt Brailsford 1937 posts 9562 karma points MVP 5x c-trib
    Nov 23, 2018 @ 10:57
    Matt Brailsford
    0

    Yup, and that's why I do it this way. The reality is, many grid designs aren't actually made for total flexibility, instead you want defined groups of modules to sit together (ie, you don't want someone to put a form block in the 33/33/33 area because it's too small) so I tend to find treating everything as a single row works best for me.

  • Matt Brailsford 1937 posts 9562 karma points MVP 5x c-trib
    Nov 23, 2018 @ 11:02
    Matt Brailsford
    0

    Yup, and that's why I do it that way. Truth is, most grid designs aren't really designed for total flexibility (put any module anywhere) and really they mostly want predefined row layouts (ie, 33/33/33 should always be 3 images side by side) so this is why I tend to use this approach. They have the flexibility of moving the rows around, but they can't then break the horizontal layout (which I find is much easier to break with a flexible grid).

    This is just my preference though so your milleage may vary.

Please Sign in or register to post replies

Write your reply to:

Draft