In one of the requirements I have, I need to render a parallax image.
For that and to make things easy, I will request from the editor an image and a class of parallax.
Then during rendering of the row, I would remove the entire bootstrap 3 container/row/col-- and use instead a normal div with the parallax class.
How can I do this with umbraco? Can I change the way a row renders? I know I can create a new rendering engine similar to what Fanoe starter kit does, but then I should check for class attached, if parallax then i render something etc.?
Is that the way to do things or there is a better way?
You could create a new partial to render the grid in Views > Partials > Grid with whatever markup you'd like.
Also often you can use a custom partial in combination with various row formatting options to add a lot of flexibility in the grid. See attached for a basic row option setup we often use for home page blocks that have big parallax images, pull quotes, etc.
Thanks Amir. Can you please elaborate more on what you said?
1- Views/Partials/Grid, here I can provide a completely new rendering for the Grid? Is this the same as in Fanoe starter kit?
2. Custom Partials for rows, can you illustrate more?
I am trying to make the Grid more or less like a Page Builder that I can drag and drop instead of having to redo everything every time.
So if you look in the Views/Partials/Grid folder you should see a few examples, usually 2 for bootstrap as they ship with Umbraco by default. You should be able to just simplify that markup and use CSS to do the rest.
How to customize how a row renders in Grid
Hi,
In one of the requirements I have, I need to render a parallax image.
For that and to make things easy, I will request from the editor an image and a class of parallax.
Then during rendering of the row, I would remove the entire bootstrap 3 container/row/col-- and use instead a normal div with the parallax class.
How can I do this with umbraco? Can I change the way a row renders? I know I can create a new rendering engine similar to what Fanoe starter kit does, but then I should check for class attached, if parallax then i render something etc.?
Is that the way to do things or there is a better way?
Thanks, Bilal
You could create a new partial to render the grid in Views > Partials > Grid with whatever markup you'd like.
Also often you can use a custom partial in combination with various row formatting options to add a lot of flexibility in the grid. See attached for a basic row option setup we often use for home page blocks that have big parallax images, pull quotes, etc.
Thanks Amir. Can you please elaborate more on what you said?
1- Views/Partials/Grid, here I can provide a completely new rendering for the Grid? Is this the same as in Fanoe starter kit? 2. Custom Partials for rows, can you illustrate more?
I am trying to make the Grid more or less like a Page Builder that I can drag and drop instead of having to redo everything every time.
Thanks /Bilal
So if you look in the Views/Partials/Grid folder you should see a few examples, usually 2 for bootstrap as they ship with Umbraco by default. You should be able to just simplify that markup and use CSS to do the rest.
Will I be able to access Row settings that the editor would be setting?
Also, you mentioned something about customized partials, what are those and how to do them, do they target specific rows or cells?
Thanks again,
/Bilal
Have you taken a look at the docs?
I think most of what you're looking for is covered here: https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout
Then if you look at Mike's response here, you can see how to modify the bootstrap grid editor (or any other) for multiple prevalues like in the screenshot I sent: https://our.umbraco.org/forum/umbraco-7/using-umbraco-7/60368-Grid-Settings-PreValueEditors
is working on a reply...