Umbraco CMS Tips and Tricks

Umbraco CMS Tips and Tricks

  • By Caleb Aston
  • Software Engineer

What is Umbraco CMS?

Umbaco CMS, a Content Management System founded on ASP.NET, is a tool developed to help facilitate the creation of a website. It provides what they call a “back office”, which is a super helpful tool for managing the content on the website. Through this back office, website managers can update and manage content without having to interact with code. This is incredibly convenient when the website will be managed by non-web-developers upon its completion.

Umbraco is also backed by a huge community of developers who love to answer questions and who develop Umbraco specific packages to make developers’ lives easier.

My adventure with Umbraco.

When I was asked several weeks ago to take on a project that was founded upon Umbraco, I was nervous. I had heard stories that had filled my mind with the idea that working with a CMS was an awful experience. My first day on the project really only served to compound that warning. I spent a couple hours digging through files, trying to understand just how anything fit together at all. Some work had already been done on the project, so there were more files than just the default ones, and I really wasn’t sure how to proceed in any way shape or form.

After a while, I figured that the only way that I was going to make any progress on the project was to just dive in and start doing what I had already figured out, which really was not a whole lot.

As the days wore on and I got more accomplished, I started to feel a bit better about the experience. I was beginning to understand what I was doing and how I could do the other things I needed to accomplish. Each successful task completed helped me understand better how to accomplish the next task.

Even though the progress was encouraging, I felt remarkably discouraged at the same time. I began to have my doubts and concerns. Really, it seemed like a lot of unnecessary bulk to have in a project when they had a full-fledged web developer working on the project. Why did they need this overcomplicated way to add the content when I could have built a much more simple .NET application that would have done the same thing.

I received my answer a short time later. I was talking with my boss, the one who would be managing the content of the website, and it occurred to me that the CMS is not for the developer. The CMS is for people like him, who may know a bit of code, but having an easy back office interface makes their job a million times easier.

Once I had that realization, I started in on the project with redoubled determination. I don’t know if anyone else is like this, but when I don’t understand the purpose of what I am doing, I really, really struggle to do whatever it is. But when I understand what I am doing and why, it becomes a lot easier to motivate myself to do.

What I learned/Helpful tips.

I am, by far, not the most experienced Umbraco developer out in the world today. There are a lot of aspects to it that I really don’t understand and a lot of tools that I have yet to even think about using. But, having just been through the initial rough stages of Umbraco development, I would like to share the things I learned that made Umbraco easier for me to understand.

The first concept that was really an eye opener for me was that the document types in Umbraco are really just visual representations of C# classes. Maybe other people made that connection faster than I did, but it took me a minute to understand their purpose. Each individual document you create is just an instance of that class. Once I grasped that, implementing the content on the page became a much easier task. And, more than that, building the document types in Umbraco felt much more intuitive. Whatever content I needed to display on the page, I made a field for.

Another great leap in my understanding was when I realized that all of the content in Umbraco is connected in one big tree. Every document has both a parent and children properties. Through those, you can access any content you have in the Umbraco back office from any page with a bit of navigating.

To that point, understanding the Umbraco interface IPublishedContent was a super handy concept. Every node/document in the back office is an IPublishedContent, containing really helpful bits of info like the name, id, and url of the document, along with others such as the parent and children properties.

Probably the biggest challenge I faced when dealing with Umbraco was how to get the actual content from the documents I was working with. Umbraco has a nifty GetPropertyValue method that works really well with strings, like the ones you get from the textstring or textarea editors in the back office. Sometimes, though, the way the content is stored is unclear, and how to display it is never mentioned.

A couple of the trickier ones:

Repeatable Textstrings - These are stored as a string array, and oddly, each of mine were separated with an empty string. So, GetPropertyValue<string[]>(repeatableTextstringAlias) returned an array that looked like this [“content”, “”, “Content”, “”, etc…]. I thought that was odd, but filtering out the empty strings wasn’t an issue.

Media Picker - This one was a real nightmare. I couldn’t find a concise answer anywhere for how to display content from an Umbraco media picker editor. The answer was actually incredibly simple, once I got to it mostly by chance. The implementation is only slightly different if there are multiple images selected with the media picker.

In short, this is the answer:

IPublishedContent image = Model.Content.GetPropertyValue<IPublishedContent>(imageAlias)
<img src=”@Umbraco.Media(image.Id).Url” />

The only difference with multiple images is that the value is then a list of IPublishedContent

GetPropertyValue<List<IPublishedContent>>(imageListAlias)

Then just loop over that and use their Id’s to get the image with Umbraco.Media(). Also, the .Url property was never included in my Intellisense in VS2017, but it is there, trust me.

One last value that was interesting to display was markdown. I installed the Articulate blog package for the site, and I really enjoyed their markdown editor. I wanted to use it elsewhere, but I wasn’t sure how to get it to display properly. Well, with Articulate, the MarkdownDeep package was also installed. This is the process I took to display my markdown:

var md = new MarkdownDeep.Markdown();
string markdownProperty = Model.Content.getPropertyValue<string>(markdownAlias);
var markdown = new MvcHtmlString(md.Transform(markdownProperty));

Then to display it:

Html.Raw(markdown.ToHtmlString());

That worked great for me!

Hopefully my tips and tricks are helpful to you. Umbraco really is a powerful and well-supported tool for web development. If you need a Content Management System for a project, I recommend Umbraco. Or, if you are in need of someone to build you a website using Umbraco, the team here at Mindfire Technology would love to help!

Reach out to us today and we can help you build your dream project!

SHARE


comments powered by Disqus

Follow Us

Latest Posts

subscribe to our newsletter