For some mysterious reason this has never occured to me before, even though i've built hundreds of umbraco sites.
Is there a simple way to build a page using a "dynamic" grid, utilizing e.g. bootstrap columns.
I've pretty much stuck to 1-3 content areas in the past.
But i'm looking to do som more dynamic layouts, like
But this raises some issues as i see umbraco's DNA:
1. I could do it using templates, but i would have to have many content areas/RTE's on the document type. 2. I could do it using document types, but that would lock the editor after creation of the page, as you cant change the doc type after the page is created.
The optimal scenario would be to let the editor add "blocks" of content and apply a kind of sub-template to it, defining wether it should be full width, 1/3, 1/4, 1/2 and so on...
I could do this using the multi node tree picker, but that would remove the content from the node itself, and therefore introduce a different problem.
Has any of you guys done sites like this, and if so do you have some pointers on how you do it. Im sure there's a solution, and by brain has just gone xmas numb...
I have built a few sites using Zurb Foundation (http://foundation.zurb.com/). How the site is created in Umbraco comes down to how the design looks / works - as always.
For the site I am working on at the moment, each page has been broken down into content blocks (carousel, header, 2 column text, etc). Then a general "page" doc type is allowed to have content blocks added as sub-nodes. Then I use a central Razor script to read through the set of content blocks and create the page content accordingly.
It works very well and it allows the editor to create pages with the content elements required. If more control is needed then different types of page doc types can be created, with different sets of allowed content blocks.
I have also written event handlers to automatically create default or required content elements when a page is added.
I see what your saying. I just dont think having sub nodes as content blocks on the parent node is a very clean way to go. It removes the content from its natural context. How do you go about making actual sub pages, if your sub pages are content on the parent. Doesnt it get really messy really fast?
Each page (at whatever level) has a node called a "content container", I wrote an event handler to ensure it is always at the top and can't be deleted or duplicated. I use a specific icon to help identify it.
Sub pages are added in the normal way and work as above. I've not heard anyone complain about how it works - rather, people like the fact that they can add what they want, remove bits easily, re-order page content and generally feel less restricted.
It isn't always the best solution ... as I said before, the solution is always driven by the requirements!
Yes, pretty much. Here is a screen print from my current project
"Content Container" is always at the top, right underneath the page to which it belongs. There are various types of "content" items, some of which have child nodes.
"Template Page" is a page at the top / root level (as is Site Map and Privacy Policy), with its Content Container and a sub page as well. Content editors seem to understand and like it, once you explain to them how it works and how flexible it can be. Of course, if flexibility is not part of the site design then this would not be a good solution ;-)
Hi Soren - any bit of code in particular? The project itself is rather large so wouldn't be very useful ... nor could I send it to you as-is!!
The basic method for dealing with the content for the current page starts with code like:
// Process all Content elements found under the ContentContainer node var contentContainer = CurrentModel.Children.FirstOrDefault(x => x.NodeTypeAlias == "ContentContainer");
Then it works through all child elements -
foreach (var contentItem in contentContainer.Children) { switch (contentItem.NodeTypeAlias) { case "ContentRowCarousel": @CreateCarousel(contentItem) break; case "ContentRowPageHeader": @CreatePageHeader(contentItem) break; .... and so on } }
The stuff like keeping the content container at the top is handled using event handlers.
If you don´t know yet, there are some packages that provide you a grid system, with some webblocks, and you can develop you own blocks if it´s necessary.
Using grid layouts with Umbraco
For some mysterious reason this has never occured to me before, even though i've built hundreds of umbraco sites.
Is there a simple way to build a page using a "dynamic" grid, utilizing e.g. bootstrap columns.
I've pretty much stuck to 1-3 content areas in the past.
But i'm looking to do som more dynamic layouts, like
But this raises some issues as i see umbraco's DNA:
1. I could do it using templates, but i would have to have many content areas/RTE's on the document type.
2. I could do it using document types, but that would lock the editor after creation of the page, as you cant change the doc type after the page is created.
The optimal scenario would be to let the editor add "blocks" of content and apply a kind of sub-template to it, defining wether it should be full width, 1/3, 1/4, 1/2 and so on...
I could do this using the multi node tree picker, but that would remove the content from the node itself, and therefore introduce a different problem.
Has any of you guys done sites like this, and if so do you have some pointers on how you do it. Im sure there's a solution, and by brain has just gone xmas numb...
I have built a few sites using Zurb Foundation (http://foundation.zurb.com/). How the site is created in Umbraco comes down to how the design looks / works - as always.
For the site I am working on at the moment, each page has been broken down into content blocks (carousel, header, 2 column text, etc). Then a general "page" doc type is allowed to have content blocks added as sub-nodes. Then I use a central Razor script to read through the set of content blocks and create the page content accordingly.
It works very well and it allows the editor to create pages with the content elements required. If more control is needed then different types of page doc types can be created, with different sets of allowed content blocks.
I have also written event handlers to automatically create default or required content elements when a page is added.
I see what your saying. I just dont think having sub nodes as content blocks on the parent node is a very clean way to go. It removes the content from its natural context. How do you go about making actual sub pages, if your sub pages are content on the parent. Doesnt it get really messy really fast?
Actually Trevor for U7 is pretty close to what i'm talking about http://our.umbraco.org//projects/backoffice-extensions/sir-trevor
If it can use the RTE, and you could set a parameter on each "block" its pretty much perfect. Too bad U7 isn't quite ready for production sites yet.
Each page (at whatever level) has a node called a "content container", I wrote an event handler to ensure it is always at the top and can't be deleted or duplicated. I use a specific icon to help identify it.
Sub pages are added in the normal way and work as above. I've not heard anyone complain about how it works - rather, people like the fact that they can add what they want, remove bits easily, re-order page content and generally feel less restricted.
It isn't always the best solution ... as I said before, the solution is always driven by the requirements!
So something like:
Node
Content Container (always at top)
Content block
Content block
Content block
Content block
Subnode
Subnode
Yes, pretty much. Here is a screen print from my current project
"Content Container" is always at the top, right underneath the page to which it belongs. There are various types of "content" items, some of which have child nodes.
"Template Page" is a page at the top / root level (as is Site Map and Privacy Policy), with its Content Container and a sub page as well. Content editors seem to understand and like it, once you explain to them how it works and how flexible it can be. Of course, if flexibility is not part of the site design then this would not be a good solution ;-)
Hi Gordon
Interesting idea to the grid problem you have.
Is the code something you would care to share ?
Hi Soren - any bit of code in particular? The project itself is rather large so wouldn't be very useful ... nor could I send it to you as-is!!
The basic method for dealing with the content for the current page starts with code like:
Then it works through all child elements -
The stuff like keeping the content container at the top is handled using event handlers.
Hi Gordon
Thanks for your reply, i like your concept, ill look into it :)
Have a nice weekend.
Hi Søren,
If you don´t know yet, there are some packages that provide you a grid system, with some webblocks, and you can develop you own blocks if it´s necessary.
One of the packages is Mentor Web Blocks there are a MVC version Mentor Web Blocks MVC and a webform version of it Mentor Web Blocks Webforms, and more information can be found on Mentor Web Blocks own website: http://www.mentorwebblocks.com/
Another packages is the Go Basic package, this is also a package using modules. http://gobasic.dk/
Just want to inform you if you don´t know the packages.
/Dennis
Hi Dennis, thanks for the tip.
Ill look into Menter Web Block.
Gobasic we have looked at, and it is not an option.
is working on a reply...