I started developing a test website with Umbraco a few days ago. As a developer I like the concept of being able to control every single character that a website will output. We currently use DNN (DotNetNuke) to create websites, and I may be restricted in the way of thinking how to organize content because DNN has a very different approach.
It was very easy to get a Umbraco website up and running and creating a layout with templates and a few document types. But now I am stuck while planning the document types. The customer wants a quite flexible way to add content to a single page, let me explain this with an example page setup:
Some text describing the page (rich text)
A Video (Youtube)
Some text describing some other things (richt text)
An image gallery
Some text describing something (richt text)
Again a video
The customer should be able to place these pieces on one page (rich text, video, gallery). He should be able to control the order of the pieces in every possible way and also have an unlimited amount of "pieces" on one page.
In DNN this would be possible with so-called "modules" a user can drag onto the page while having the possibility to change the order. Each module can define its own output (for example, there may be a Youtube video module where the user inputs a Youtube url and the module takes care of inserting an iframe of that video on the page).
In Umbraco, I tried first to place macros inside the rich text editor (for example, having a youtube macro and a gallery macro). But I had trouble to create and edit them. I wasn't able to figure out how to continue a paragraph after a macro. Sometimes a macro was placed inside a macro which stopped the macro from rendering on the page. The "macro-inside-editor" approach also felt not clean for me (you may correct me if I am wrong).
Then I tried to insert a macro container datatype, where the customer would not have to struggle inside the editor. But I realized that it isn't possible to use a rich text editor as a macro parameter which I'd need for the above page structure. Is there a solution in Umbraco to create such an un-structured, flexible page layout?
I hope that I described my problem understandable (quite a challenge while still learning English). I'd like to use Umbraco because I already felt in love with the backoffice in Umbraco 7 Belle and I love Razor :-).
Thank you in advance!
Raphael
/ Edit
I noticed that the wired.co.uk website (which I heard, is made with Umbraco) has similar content structures as I need, look at this page: http://www.wired.co.uk/reviews/mobile-phones/2014-02/zte-grand-s-flex. You can see that there is some formatted richt-text which contains image galleries inside. Does anyone know if this is made with macros inside a single rich-text editor?
there are a number of ways you can go about this, your right trying to fit all of that in the standard rich text editors isn't going to be fun.
however the jucyness of umbraco 7 and Angular stuff means its quite easy to add your own property editors and use things other people have already done.
A great example of this for you is how easy it is to add the SirTrevor editor to umbraco.
i haven't used them so i don't know if they are diffrent / better, but you might want to check them out.
another really cool thing you might want to check out is Mentor Web Blocks which gives full draggy droppyness to umbraco pages. I know they are working on it but I'm not sure where they are upto with Umbraco 7 - the screencast shows you how it all works.http://www.mentorwebblocks.com/support/screencasts
this is where i would start - but if they don't fit the bill there are loads of other ways and you could just roll your own.
I already found a post describing how to extend the backoffice with the help of AngularJS and I kept it in mind as one of the ways I could go.
But I didn't know Sir Trevor yet which looks very interesting, and I will definitely have a look at the Mentor Web Blocks as soon as they have a package ready for Umbraco 7.
Just to complete this topic: I took another approach and solved my problem by using @Umbraco.RenderTemplate(...) without any additional third-party plugins. My document structure looks like this:
Text Page 1 - Text - Gallery Text Page 2 - Text - Video - Gallery
I have separate document types for text, gallery, video, etc. In my Razor template, Umbraco provides a way to render all child elements on the same page by using:
@foreach(var child in Model.Content.Children) { @Umbraco.RenderTemplate(child.Id) }
The order of the elements will be the same applied in the backoffice. You could even filter the list by document types that inherit from a specified document type.
Please let me know what you think about this solution; are there any drawbacks?
This is a very interesting discussion, and a problem lots of us would love to see solved. I agree that macros-in-an-RTE is fragile, hacky and feels wrong. And the macro container datatype is great, but the datatypes available as macro parameters are very limiting.
Sir Trevor seems very promising, at least for basic modules of content. And Archetype is another good bet, closer to a macro container with all of Umbracos datatypes available.
As for the solution with rendering child nodes as content blocks, that is definitely a way to go. Not very DRY if you want to reuse modules across pages (but neither is Sir Trevor or Archetype), and it can feel a bit messy because each child template has a URL and a template, so you have to be careful not to include them in navigation and search results etc. And for an editor, it can be hard to distinguish between actual child pages and modular content blocks. But it does allow full use of datatypes and easy sorting.
This is definitely a problem that needs solving, so I hope others will chime in with the ideas and best practices too!
Talking from personal experience of managing a build we inherited from our design agency the best part of 4 years ago (Umbraco 4.0.4.2). I can recommend using child doctypes as a means of arranging document fragments within a parent document. It's flexible and if implemented with enough forethought can be re-usable!
Where possible we keep the RTE to a simple text editing and image embedding only and that's limited to a very strict set of styles to keep our content editors from wandering off! Recently we've allowed free embedding of videos in the RTE because the content is in the cloud.
Our codebase has remained mostly as XSLT, for historical reasons, but we're now up to Umbraco 6 and all of the container templates and user controls have been re-implemented in MVC views and partials.
We've also recently re-written the templates for mobile responsive, loveliness!
Content flexibility
Dear Umbraco community,
I started developing a test website with Umbraco a few days ago. As a developer I like the concept of being able to control every single character that a website will output. We currently use DNN (DotNetNuke) to create websites, and I may be restricted in the way of thinking how to organize content because DNN has a very different approach.
It was very easy to get a Umbraco website up and running and creating a layout with templates and a few document types. But now I am stuck while planning the document types. The customer wants a quite flexible way to add content to a single page, let me explain this with an example page setup:
The customer should be able to place these pieces on one page (rich text, video, gallery). He should be able to control the order of the pieces in every possible way and also have an unlimited amount of "pieces" on one page.
In DNN this would be possible with so-called "modules" a user can drag onto the page while having the possibility to change the order. Each module can define its own output (for example, there may be a Youtube video module where the user inputs a Youtube url and the module takes care of inserting an iframe of that video on the page).
In Umbraco, I tried first to place macros inside the rich text editor (for example, having a youtube macro and a gallery macro). But I had trouble to create and edit them. I wasn't able to figure out how to continue a paragraph after a macro. Sometimes a macro was placed inside a macro which stopped the macro from rendering on the page. The "macro-inside-editor" approach also felt not clean for me (you may correct me if I am wrong).
Then I tried to insert a macro container datatype, where the customer would not have to struggle inside the editor. But I realized that it isn't possible to use a rich text editor as a macro parameter which I'd need for the above page structure. Is there a solution in Umbraco to create such an un-structured, flexible page layout?
I hope that I described my problem understandable (quite a challenge while still learning English). I'd like to use Umbraco because I already felt in love with the backoffice in Umbraco 7 Belle and I love Razor :-).
Thank you in advance!
Raphael
/ Edit
I noticed that the wired.co.uk website (which I heard, is made with Umbraco) has similar content structures as I need, look at this page: http://www.wired.co.uk/reviews/mobile-phones/2014-02/zte-grand-s-flex. You can see that there is some formatted richt-text which contains image galleries inside. Does anyone know if this is made with macros inside a single rich-text editor?
Hi
there are a number of ways you can go about this, your right trying to fit all of that in the standard rich text editors isn't going to be fun.
however the jucyness of umbraco 7 and Angular stuff means its quite easy to add your own property editors and use things other people have already done.
A great example of this for you is how easy it is to add the SirTrevor editor to umbraco.
the editor was used in a demo at the UK umbraco festival and some of the code is here http://umbraco.github.io/Belle/#/tutorials/manifest
but you don't have to worry about that because at two other people have already done packages. http://our.umbraco.org/projects/tag/Sir%20Trevor
i haven't used them so i don't know if they are diffrent / better, but you might want to check them out.
another really cool thing you might want to check out is Mentor Web Blocks which gives full draggy droppyness to umbraco pages. I know they are working on it but I'm not sure where they are upto with Umbraco 7 - the screencast shows you how it all works.http://www.mentorwebblocks.com/support/screencasts
this is where i would start - but if they don't fit the bill there are loads of other ways and you could just roll your own.
Hi Kevin
I already found a post describing how to extend the backoffice with the help of AngularJS and I kept it in mind as one of the ways I could go.
But I didn't know Sir Trevor yet which looks very interesting, and I will definitely have a look at the Mentor Web Blocks as soon as they have a package ready for Umbraco 7.
Thank you very much for your answer!
Raphael
Just to complete this topic: I took another approach and solved my problem by using @Umbraco.RenderTemplate(...) without any additional third-party plugins. My document structure looks like this:
Text Page 1
- Text
- Gallery
Text Page 2
- Text
- Video
- Gallery
I have separate document types for text, gallery, video, etc. In my Razor template, Umbraco provides a way to render all child elements on the same page by using:
@foreach(var child in Model.Content.Children)
{
@Umbraco.RenderTemplate(child.Id)
}
The order of the elements will be the same applied in the backoffice. You could even filter the list by document types that inherit from a specified document type.
Please let me know what you think about this solution; are there any drawbacks?
This is a very interesting discussion, and a problem lots of us would love to see solved. I agree that macros-in-an-RTE is fragile, hacky and feels wrong. And the macro container datatype is great, but the datatypes available as macro parameters are very limiting.
Sir Trevor seems very promising, at least for basic modules of content. And Archetype is another good bet, closer to a macro container with all of Umbracos datatypes available.
As for the solution with rendering child nodes as content blocks, that is definitely a way to go. Not very DRY if you want to reuse modules across pages (but neither is Sir Trevor or Archetype), and it can feel a bit messy because each child template has a URL and a template, so you have to be careful not to include them in navigation and search results etc. And for an editor, it can be hard to distinguish between actual child pages and modular content blocks. But it does allow full use of datatypes and easy sorting.
This is definitely a problem that needs solving, so I hope others will chime in with the ideas and best practices too!
Hey Raphael
Talking from personal experience of managing a build we inherited from our design agency the best part of 4 years ago (Umbraco 4.0.4.2). I can recommend using child doctypes as a means of arranging document fragments within a parent document. It's flexible and if implemented with enough forethought can be re-usable!
Where possible we keep the RTE to a simple text editing and image embedding only and that's limited to a very strict set of styles to keep our content editors from wandering off! Recently we've allowed free embedding of videos in the RTE because the content is in the cloud.
Our codebase has remained mostly as XSLT, for historical reasons, but we're now up to Umbraco 6 and all of the container templates and user controls have been re-implemented in MVC views and partials.
We've also recently re-written the templates for mobile responsive, loveliness!
All the best
Martin
is working on a reply...