Hey folks, I've been tasked with estimating a project for converting a website from Wordpress to Umbraco. I come from a Sitecore world and I don't know Umbraco very well, so I have a few high level questions to know what it's capable of, or some best practices for it. The site is pretty simple.
If you're not familiar with Sitecore, you can create page types that have editable regions where you can drop components on to them. So, if I create a "two column" page type instance, I can then drop, say, a text block in the left column and maybe some other custom widgets (maybe they pull in relevant tweets based on current page content) in the right-hand column. I can also create fields that exist directly on the page type and spit out their values on the page, along with the aforementioned ad-hoc widgets.
Onto Umbraco...I've been going through Paul Seal's series on setting up a website in Umbraco 8, and he uses compositions to add fields to page types and displays their values on the template. This seems analogous to what I mentioned above for Sitecore.
Is this the general best practice for Umbraco? Is there a way to add custom widgets that I create, such as say, a "two-column widget with an image on one side and text on the other, with alignment and background color as customizable properties on the widget?"
I've also seen the grid in action on his tutorials, which seems to work well for the built-in block types like text, image, drop down, etc.
I hope all of this makes sense. Hoping to have a discussion on how something like this is best implemented in Umbraco. Thank you!
It's all about context as to the best way to do it, Umbraco is pretty flexible and there are a number of approaches which might fit your needs.
But broadly speaking there are DocTypes -> PageTypes which can have different properties, that you can write out in a template.
You've seen one property type called the 'grid' which allows the editors to choose from different layouts and then drop 'grid editors' into the slots to build up the page.
The core 'grid editors' are things like 'headline' or 'rich text' or 'media' - which work as you might expect, but there is also one called 'Macro' that allows you to present options to editors using parameters, and then you have full control on how the Macro is rendered using a c# Partial View. In addition to that... there is a package called Doc Type Grid Editor - https://our.umbraco.com/packages/backoffice-extensions/doc-type-grid-editor/ that you can install that allows you to easily create your own 'grid editors' based upon a DocType definition... and create a preview for the backoffice, using a c# partial view.
This would allow for more complex editing experience of the widget than the Macro would provide.
You can also create your own grid editors from scratch if you know a little of the ancient art of angularJS
And this aims to provide a more 'widget by widget' layout experience than the grid, with a set of customisable configuration options for each block.
So if you want to provide a set of building block widgets to build up a page, this would be a better appoach than the grid. If you need really subtle nuanced layout in the control of the editor, then the grid may be better, or for different types of pages without the same Umbraco site you might use one approach or the other depending on the type of content being edited.
Marc, thank you for the thorough reply. I actually got the Doc Type Grid Editor working yesterday and I think it will handle what we need.
The last piece of the puzzle is to figure out custom controllers to drive these views...say, if I wanted to pull in third party data from an API or do some custom work before handing things off to the presentation layer.
Marc, I must have missed your reply. Thanks for that link! Seems like DocTypeGridEditor is a pretty useful tool that can really enhance how you build your sites.
Replatforming from Wordpress to Umbraco
Hey folks, I've been tasked with estimating a project for converting a website from Wordpress to Umbraco. I come from a Sitecore world and I don't know Umbraco very well, so I have a few high level questions to know what it's capable of, or some best practices for it. The site is pretty simple.
If you're not familiar with Sitecore, you can create page types that have editable regions where you can drop components on to them. So, if I create a "two column" page type instance, I can then drop, say, a text block in the left column and maybe some other custom widgets (maybe they pull in relevant tweets based on current page content) in the right-hand column. I can also create fields that exist directly on the page type and spit out their values on the page, along with the aforementioned ad-hoc widgets.
Onto Umbraco...I've been going through Paul Seal's series on setting up a website in Umbraco 8, and he uses compositions to add fields to page types and displays their values on the template. This seems analogous to what I mentioned above for Sitecore.
Is this the general best practice for Umbraco? Is there a way to add custom widgets that I create, such as say, a "two-column widget with an image on one side and text on the other, with alignment and background color as customizable properties on the widget?"
I've also seen the grid in action on his tutorials, which seems to work well for the built-in block types like text, image, drop down, etc.
I hope all of this makes sense. Hoping to have a discussion on how something like this is best implemented in Umbraco. Thank you!
Hi Travis
It's all about context as to the best way to do it, Umbraco is pretty flexible and there are a number of approaches which might fit your needs.
But broadly speaking there are DocTypes -> PageTypes which can have different properties, that you can write out in a template.
You've seen one property type called the 'grid' which allows the editors to choose from different layouts and then drop 'grid editors' into the slots to build up the page.
The core 'grid editors' are things like 'headline' or 'rich text' or 'media' - which work as you might expect, but there is also one called 'Macro' that allows you to present options to editors using parameters, and then you have full control on how the Macro is rendered using a c# Partial View. In addition to that... there is a package called Doc Type Grid Editor - https://our.umbraco.com/packages/backoffice-extensions/doc-type-grid-editor/ that you can install that allows you to easily create your own 'grid editors' based upon a DocType definition... and create a preview for the backoffice, using a c# partial view.
This would allow for more complex editing experience of the widget than the Macro would provide.
You can also create your own grid editors from scratch if you know a little of the ancient art of angularJS
https://our.umbraco.com/Documentation/Fundamentals/Backoffice/Property-Editors/Built-in-Property-Editors/Grid-Layout/Grid-Editors#custom-grid-editors
In the latest version of Umbraco however the 'Block list' editor has been introduced:
https://our.umbraco.com/Documentation/Fundamentals/Backoffice/Property-Editors/Built-in-Property-Editors/Block-List-Editor/
And this aims to provide a more 'widget by widget' layout experience than the grid, with a set of customisable configuration options for each block.
So if you want to provide a set of building block widgets to build up a page, this would be a better appoach than the grid. If you need really subtle nuanced layout in the control of the editor, then the grid may be better, or for different types of pages without the same Umbraco site you might use one approach or the other depending on the type of content being edited.
Hope that helps!
regards
marc
Marc, thank you for the thorough reply. I actually got the Doc Type Grid Editor working yesterday and I think it will handle what we need.
The last piece of the puzzle is to figure out custom controllers to drive these views...say, if I wanted to pull in third party data from an API or do some custom work before handing things off to the presentation layer.
Hi Travis
If you mean rendering the DocTypeGridEditor Item, you can use the BaseSurfaceController that comes with DocTypeGridEditor:
https://github.com/skttl/umbraco-doc-type-grid-editor/blob/develop/docs/developers-guide.md#doctypegrideditorsurfacecontroller
To enable you to write c# code, etc call an API and return a strongly typed model to a Partial View.
or
If you are creating your own custom grid editor you can use angularJS to call a WebApi endpont, using a controller that inherits from UmbracoAuthorizedApiController https://our.umbraco.com/documentation/Reference/Routing/WebApi/authorization
regards
Marc
Marc, I must have missed your reply. Thanks for that link! Seems like DocTypeGridEditor is a pretty useful tool that can really enhance how you build your sites.
Hi Travis,
You may also be interested in the award winning uSkinned Site Builder for Umbraco.
You can sign up for a free no obligation hosted trial here:
https://trial.uskinned.net/
We use a component based approach, just like how you have described adding items to a page.
Cheers,
Marc
is working on a reply...