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
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).
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.
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.
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.
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.
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
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.
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.
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
Basiclly there is 3 blocks, each 100% in width
Hero
Blue Block
Red Block
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!
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.
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
How about row configs in multiple rows? Like this? https://i.imgur.com/C5A3Bmr.png
Ohh... did not realize that that was an option =D Need to try it out! =D
OMG! I think you just saved my next couple of weeks =D =D =D
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.
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.
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.
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.
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
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.
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.
is working on a reply...