Morten Bock

Using inline macros in the Umbraco editor

Morten Bock — Thu, 28 Jul 2011 20:16:53 +0100

I've seen the question asked a lot of times on the forum, and it's not always easy to give a good answer to it. "How do I create a macro that works inline in the editor". By default when inserting Macros in the editor, it will force a <p> ir <div> tag to be created around it, which means that the macro will always be a block of content.

In some cases however, it is nice to be able to insert a macro that just creates a single word or phrase inside a sentence. It could be a price of a product, a user specific property, or whatever you might need.

So I came up with the below solution. Of course it has benefits and drawbacks. In short:
Benefit:
- Inline macros

Drawbacks:
- You do not get a nice way of entering data for macro parameters
- The preview snippet is static from the moment you insert it in the editor

At the bottom you will find a link to a complete zipped umbraco install that has been set up with this, so you can have a play with it. It's using SQL CE, so should be easy to get up and running.

If you can live with this, then read on :-). First let's take a look at what the result will look like. When you insert a snippet in the editor it will look like this:

In this case my snippet will write the name of the page, and when rendered in the frontend it will look like this:

So, how does this work? There a three parts that we need to set up
1. Create a previewable macro
2. Create an aspx page that renders the preview snippet for the editor
3. Configure the TinyMCE editor to use the snippets with the Templates module

Step 1: Previewable macro

Create a macro with a "preview" parameter. In this case I'm creating an xslt macro, but works just fine with razor or usercontrols as well.

Make the macro aware of a preview state

Step 2: Snippet page

Create an aspx page that will render the macro snippet as well as the macro in preview mode.

My snippet page looks like this. I added the snippet class to a span to make it appear green in the editor. Be aware that this is all in one line to avoid too many spaces in the output when rendered.

Now, for the TinyMCE to be able to reach the page, we need to exclude it from the urls that Umbraco handles. We do this is by adding the folder to the web.config:

Step 3: Enable the templates module in TinyMCE

First we add a few thing to the tinyMceConfig.config file.

The command

The plugin

Allow the umbraco:macro tag as valid html

And add configuration for the templates, so the editor knows which snippets it can get and from which urls.

Then we disable the tidy function in umbracoSettings.config, because that will throw an error when it sees the umbraco macro tag.

Now, go to the Richtext Editor datatype, and enable the newly added templates module.

I also added my own editorStyles stylesheet, but that is standard umbraco stuff :-)

And that is it. Now the macro can be inserted to your text without having to be in a <p> tag. Neato.

I hope this is useful for you. Let me know if you can see any other drawbacks than the ones that I mentioned at the beginning.

Get the demosite here: InlineMacroDemo.zip

Launced new blog

Morten Bock — Sat, 13 Feb 2010 23:09:56 +0100

Last week I helped launch a new blog based on Umbraco. I used the excellent ImageGen package to generate the images for the galleries and it is working perfectly :-)

Tech wise, it is not feature complete yet, but it is already filled with nice tips about nice design, art and furniture for your home (in danish...)

Go visit http://livingsweetliving.dk/ to check it out.

Importing Wordpress posts to Umbraco

Morten Bock — Tue, 13 Oct 2009 19:58:33 +0100

As you may have noticed, my blog has changed a bit this week. I finally got around to porting it to Umbraco. I did this for several reasons, but mainly because I feel at home with Umbraco, and I can tweak it to do just about anything I want. Wordpress on the other hand is PHP, and I just suck at that. So there you go...

Anyhow, after setting up my document types in Umbraco I needed to figure out how to get all my old content into the new site. Wordpress offers to export the entire content as xml, so that part was easy. The exported file was 3Mb, mainly because of some sort of screwed up tags back from when I was using the Ultimate Tag Warrior (I will miss the cool plugin names from Wordpress), which spit out a whole lot of empty tags.

The exported format is basically an RSS feed, but with some extra elements added by wordpress. One of those is an <excerpts:encoded> element, which does not have a namespace declaration at the top, thus making it invalid xml. So I needed to fix this before handling the file in my import routine. I just added it to the rss element:

<rss version="2.0"
    xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:excerpt="http://purl.org/rss/1.0/modules/excerpt/"
    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:wp="http://wordpress.org/export/1.0/">

Sweet, now the xml is all nice and tidy and ready to be imported. So, how to do the import? Well, I decided to do it through the Umbraco API using a dashboard usercontrol. To get the content from the XML file, I chose to go with Linq2Xml which is pretty neat for navigating through the XML file.

First thing I did was to disable some Lucene lock, because it made my import fail due to the number of operations done. I also set the script timeout value a bit high just to be sure:

Server.ScriptTimeout = 300;
Lucene.Net.Store.FSDirectory.SetDisableLocks(true);

Now, to load the Xml file. Pretty easy. I later added the possibility to enter the XML in a textarea instead, thus the commented out line:

XDocument loaded = XDocument.Load(Server.MapPath("~/usercontrols/wordpress.2009-08-01.xml"));
//XDocument loaded = XDocument.Parse(wpxmltextbox.Text);

XNamespace wpns = XNamespace.Get("http://wordpress.org/export/1.0/");
XNamespace contentns = XNamespace.Get("http://purl.org/rss/1.0/modules/content/");
var q = from c in loaded.Descendants("item")
        where (string)c.Element(wpns + "post_type") == "post"
        select c;

So now I got all my blogposts in the variable "q". time to feed them into Umbraco. It's not too nicely structured, but it does the job, and it's a one time deal, so no need to go crazy here.

DocumentType dt = DocumentType.GetByAlias("BlogPost");
User author = User.GetUser(0);

foreach (XElement item in q)
{
    string posttitle = (string)item.Element("title");
    string legacyurl = ((string)item.Element("link")).Replace("", string.Empty);
    string legacyid = (string)item.Element(wpns + "post_id");
    string posturlnodename = Server.UrlDecode((string)item.Element(wpns + "post_name"));
    string postbody = (string)item.Element(contentns + "encoded");
    string posttags = string.Empty;
    DateTime createdate = DateTime.Parse((string)item.Element(wpns + "post_date"));

    int i = 0;
    foreach (XElement tag in item.Elements("category"))
    {
        if ((string)tag.Attribute("domain") == "tag" && !string.IsNullOrEmpty((string)tag.Attribute("nicename")))
        {
            if (i > 0)
            {
                posttags += ",";
            }
            posttags += (string)tag.Attribute("nicename");
            i++;
        }
    }

    Document doc = Document.MakeNew(posturlnodename, dt, author, 1049);
    doc.getProperty("blogPostTitle").Value = posttitle;
    doc.getProperty("blogPostBody").Value = WordpressPostParser.ParseCodeBlocks(WordpressPostParser.ChangeImageUrls(WordpressPostParser.CreateParagraphTags(postbody)));
    doc.getProperty("blogPostLegacyUrl").Value = legacyurl;
    doc.getProperty("blogPostLegacyID").Value = legacyid;
    doc.CreateDateTime = createdate;

    if (!string.IsNullOrEmpty(posttags))
    {
        umbraco.editorControls.tags.library.addTagsToNode(doc.Id, posttags, "default");
        doc.getProperty("blogPostTags").Value = posttags;
    }

    doc.Publish(author);
    umbraco.library.UpdateDocumentCache(doc.Id);


    //comments here...
    foreach (XElement comment in item.Elements(wpns + "comment"))
    {
        if ((string)comment.Element(wpns + "comment_approved") == "1")
        {

            string commentAuthor = (string)comment.Element(wpns + "comment_author");
            string commentEmail = (string)comment.Element(wpns + "comment_author_email");
            string commentUrl = (string)comment.Element(wpns + "comment_author_url");
            string commentIP = (string)comment.Element(wpns + "comment_author_IP");
            string commentBody = (string)comment.Element(wpns + "comment_content");
            DateTime commentDate = DateTime.Parse((string)comment.Element(wpns + "comment_date"));
            
            Document commentdoc = Document.MakeNew(commentAuthor, DocumentType.GetByAlias("BlogComment"), author, doc.Id);
            commentdoc.getProperty("blogCommentAuthor").Value = commentAuthor;
            commentdoc.getProperty("blogCommentAuthorEmail").Value = commentEmail;
            commentdoc.getProperty("blogCommentAuthorURL").Value = commentUrl;
            commentdoc.getProperty("blogCommentAuthorIP").Value = commentIP;
            commentdoc.getProperty("blogCommentBody").Value = commentBody;
            commentdoc.CreateDateTime = commentDate;

            commentdoc.Publish(author);
            umbraco.library.UpdateDocumentCache(commentdoc.Id);
        }

    }

}

I am using some external methods to parse the body text of the posts. This is because Wordpress doesn't save html, but puts in linebreaks and renders paragraph tags at render time... brrrr... There are also some [source] tags leftover from the syntax highlighter plugin that I need to change:

These are the three methods I am using to parse the text:

public static string CreateParagraphTags(string postbody)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("<p>");
    sb.Append(postbody.Replace("\n\n", "</p><p>"));
    sb.Append("</p>");
    return sb.ToString();
}

public static string ChangeImageUrls(string postbody)
{
    string parsedstring = Regex.Replace(postbody, "src=\"/wp-content", "src=\"/media/images", RegexOptions.Singleline);
    return Regex.Replace(parsedstring, "href=\"/wp-content", "href=\"/media/images", RegexOptions.Singleline);
}

public static string ParseCodeBlocks(string postbody)
{
    Regex regPattern = new Regex(@"(\[source(.*?)\])(.*?)(\[/source\])", RegexOptions.Singleline);
    Dictionary<string, string> replaceValues = new Dictionary<string, string>();

    int i = 0;
    foreach (Match match in regPattern.Matches(postbody))
    {
        string code = match.Groups[3].Value;
        if (code.Contains("<"))
        {
            code = code.Replace("<", "&lt;").Replace(">", "&gt;");
        }
        postbody = postbody.Replace(match.Value, string.Format("[[[replacecode{0}]]]", i));
        replaceValues.Add(string.Format("[[[replacecode{0}]]]", i), "<pre>" + code + "</pre>");
        i++;
    }

    foreach (KeyValuePair<string, string> replaceValue in replaceValues)
    {
        postbody = postbody.Replace(replaceValue.Key, replaceValue.Value);
    }

    return postbody;
}

It's not perfect. For example it added some strange <p> tags inside my code blocks, but no more than I could handle by doing manual updates. For these methods I added some unit tests. It is just so much nicer to work with RegEx when you have tests to see if you are breaking existing matches while changing this stuff.

So there you have it. Posts imported and ready to go. It's so easy I don't know why I didn't get around to it before :-)

Setting up membership in Umbraco

Morten Bock — Wed, 01 Apr 2009 00:33:43 +0100

I played around with the membership features of Umbraco tonight, and I thought I would share my findings. Mostly because it is just incredibly easy to do without even compiling any code. Just pure templates and a single entry in the web.config file is all it takes.

I started by installing the Runway package, to get a basic website.

First of all, I set up my members area with a member type and a member group:

Now I need to tell asp.net which Member Type I want to use when creating new users. Find this line in the web.config file:

<add name="UmbracoMembershipProvider"
  type="umbraco.providers.members.UmbracoMembershipProvider"
  enablePasswordRetrieval="false"
  enablePasswordReset="false"
  requiresQuestionAndAnswer="false"
  defaultMemberTypeAlias="WebsiteUser"
  passwordFormat="Hashed" />

Edit the attribute "defaultMemberTypeAlias" to the Member Type you want. In my case it is "WebsiteUser".

Now we are ready to create the Sign Up form. I do this in a new template, which is just a copy of the Runway Textpage, but I add the following after the body text:

<script runat="server">

protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e)
{
    Roles.AddUserToRole(CreateUserWizard1.UserName, "BasicUsers");
}

protected void CreateUserWizard1_ContinueButtonClick(object sender, EventArgs e)
{
    Response.Redirect("/member-area.aspx");
}

</script>

<asp:CreateUserWizard ID="CreateUserWizard1" OnContinueButtonClick="CreateUserWizard1_ContinueButtonClick" OnCreatedUser="CreateUserWizard1_CreatedUser" runat="server">
    <WizardSteps>
        <asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server"></asp:CreateUserWizardStep>
        <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server"></asp:CompleteWizardStep>
    </WizardSteps>
</asp:CreateUserWizard>

Inside the script block I react to two events. When the user is created, I add him to the "BasicUsers" group, which is the one I will give access to my members area. The other method simply redirects the user to the member area when he finishes the signup wizard. (EDIT: Petr suggested that you use ContinueDestinationPageUrl="/member-area.aspx" instead of the redirect method, which I agree with)

Now users can sign up for membership, but we also want them to be able to log in. So we add this to the subNavigation div in the Runway Textpage template:

<asp:LoginView ID="UmbracoLoginView" runat="server">
    <AnonymousTemplate>
        <asp:Login ID="Login1" runat="server"></asp:Login>
    </AnonymousTemplate>
    <LoggedInTemplate>
        Welcome
        <asp:LoginName ID="LoginName1" runat="server" />
        <asp:LoginStatus ID="LoginStatus1" runat="server" />
    </LoggedInTemplate>
</asp:LoginView>

That is all the code that is needed. All that is left is creating content:

The login page is just a textpage with some text about logging in. The Sign Up page is using my new template with the CreateUserWizard control on it. The Member Area page has Public Access set like this:

That is all there is to it. Pretty easy huh? Feel free to post any questions in the comments, and I will try and answer to the best of my ability.

Umbraco gets an evangelist

Morten Bock — Mon, 06 Oct 2008 19:08:51 +0100

I just received the news form CGUS that Douglas Robar has has joined the Umbraco company as an evangelist. This is great news and a positive recognition of the huge effort that Doug has put into the forum and the community, which has also earned him two(?) MVP awards.

I like the idea of the evangelist position that I also know from the Microsoft developer departments. (Don't know if this is common in other places). It will be of great value to the community to have Doug as maybe a sort of middle man between the users on the forum and the core developers.

Congratulations Doug, and I hope you have a blast spreading the Umbraco gospel :-)

Time for new challenges

Morten Bock — Thu, 31 Jul 2008 20:32:02 +0100

After two good years at my current position at Up-Site, it is time to try something new. So from September 1st it is on to new things. What those things will be is not clear yet, but I hope it will include lots of learning experiences, as I am eager to dig deeper into the world of programming.

Will it include Umbraco?
I hope so. One thins is for sure, I am not going to let go of the Umbraco community, even if the future should not bring as much work related Umbraco projects.

All in all, this is an exiting time, so I will just kick it off with escaping for a weekend to a cabin in the woods with some friends from Holstebro Højskole. Fire and acoustic guitars, nothing like it! (Oh, and guitarhero and beer)

Umbraco forum has full text RSS again - WUHUU

Morten Bock — Tue, 10 Jun 2008 22:31:59 +0100

I don't know if you are as slow as I am, or even if this has been out there for a long time, but I just discovered that the Umbraco forum now again has body text in the RSS feed. This is really nice, as the other feed just kind of sucked...

But here it is: http://forum.umbraco.org/rss.aspx

Now go forth and post!!!

Codegarden 08: Hidden gems

Morten Bock — Thu, 05 Jun 2008 22:56:35 +0100

This is just an ultra short writeup of some of the hidden gems presented at one of the Open Space sessions at codegarden.

You can now get the image source directly in the template: <img src='<umbraco:Item field="umbracoFile" nodeid="1072" runat="server"></umbraco:Item>' /> 'nodeid' is the id of the media item.

"Magic" document property names

These all work by adding a property to your document type with the mentioned name as property alias

umbracoRedirect When a nodeid is entered in this property on a page, Umbraco will redirect to that page.

umbracoUrlName If you want to change/override the niceUrl of a page, but don't want to change the pagename property, this is the way to go.

umbracoUrlAlias This will _add_ new url's that will show the page. For example if you have a page hidden deep in your nodetree, you can add "signup" to the property, and you can now access the page on "/signup.aspx" (or without the .aspx if you are using directory url's). You can add multiple shortcuts by separating with a comma (no spaces): "signup,membership,deeper/url/here".

Feel free to add more of the gems from the session (I didn't attend the whole thing)

Certification logos in place

Morten Bock — Thu, 24 Apr 2008 18:32:49 +0100

Today I completed the Umbraco certification test, so I thought this would be a good time to add a little "Certifications" box in my sidebar. So now I'm an MCP and an UCP(?). Gotta get me a new businesscard as well....

WideVision er et svindlerfirma

Morten Bock — Wed, 19 Mar 2008 22:54:59 +0100

Det er i hvert fald hvad jeg kan uddrage fra Niels Hartvigs blogpost omkring WideVisions nye produkt WebNow. Det fremgår mere end tydeligt at WideVision fuldstændig har planket Umbraco og blot skiftet lidt grafik ud her og der. Og for dem der skulle være i tvivl, ja så kan man jo prøve deres eget website:

http://www.widevision.dk/?umbdebugshowtrace=true

Hvis ikke den tracestack beviser det, så ved jeg ikke hvad gør.

Man kan så spørge sig selv hvad WideVision håber at få ud af at planke opensource software, og så sælge det som deres eget. Og endda påstå at de har brugt 2 år og 2 millioner kroner på at udvikle det. Det lugter bare langt væk af en tåbelig direktør der ikke har forstået hvordan verden er skruet sammen.

Heldigvis bliver den slags hurtigt opdaget, og jeg er spændt på at se sagens videre forløb...