Integrating uBlogsy into your Umbraco site

After writing an article on a basic installation and configuration of uBlogsy, best suited to a clean Umbraco site, this article advises areas to review and change in order to get uBlogsy working on an existing Umbraco site. 

Given Umbraco is a framework and every Umbraco site is different, it will be impossible for this article to be the perfect recipes for everyone.  I hope however, that with a little general Umbraco knowledge, the following guidance will assist most people integrate uBlogsy into their existing Umbraco site.

Your existing Umbraco site

To get started I have created a blank Umbraco instance, then applied the Umbraco Business Starter kit with the U.Media skin.

Umbraco Business Starter Kit - Out of the box

• The home page and subsequent content pages.
• Nodes to control the home page slider.

• A couple of Stylesheets.
• A number of Templates, including master pages two levels deep.
• A flat set of Document Templates.
• A couple of javascript (jQuery) files used to dirve the slider.

In addition to the above the Umbraco Business starter kit with the U.Media skin comes with a whole bunch of XSLT Files, Macros etc.

Notably, the resulting site keeps a consistent feel by having the "Starterkit Master" master page providing much of the structure of the site including a dynamically generated navigation bar (both of which we will want to keep when integrating uBlogsy).

After a vanilla uBlogsy Install

Please see the installation and configuration of uBlogsy article for further details of how to install and configure uBlogsy including initialising the default uBlogsy nodes.

For the purpus of demonstration, I have left the example uBlogsy blogs and kept the default folder structure.

After installation, the Umbraco admin interface now includes:

• A number of content nodes, however these are not nested below our home page.
• Stand alone Templates, which do not utilize the "Starterkit Master" master page.
• Independent style sheets.
• Document Types, which may not include include all the properties required to drive our existing site (or similar properties with alternative names).
• Scripting Files and XSLT files driving much of the content.

It is worth noting that technically, at this stage, if you publish all the default uBlogsy nodes, you have a working blog package bolted onto your site (accessible by <YourDomain.>/my-blog.aspx).  Unless you link to it from your main site, or include it in your sitemap, no-one will know it's thier, and if they do come across it, it will bare no reseberlance to your existing site, however, it is technically available and functional.

Scope of integrating uBlogsy

It goes without saying that uBlogsy could be customised to the n^th degree; modifying every output and replacing the entire styling.  To do such an article would be a immense undertaking, so instead I shall cover the basics and provide a few pointers on the areas you may consider for further work.

For a first pass integration, the following areas require addressing to integrate uBlogsy into your existing site:

1. Locating the uBlogsy landing page to an apropriate point in your sites content (normally nested under the home page).
2. Adjusting your site navigation to include a link to the uBlogsy landing page.
3. Refactoring the your existing and uBlogsy Templates to adopt your existing sites frame.
4. Extending the uBlogsy Document Tempates to enable tighter integration.
5. Optionally removing the out of the box uBlogsy sub-navigation.

uBlogsy Integration Steps

Relocating the uBlogsy landing page

After installing uBlogsy, the landing page along with nested content will be placed at the root level.  For most sites, this will need to be moved under the home page.  As well as astheritacly pleasing, placment of nodes often drives other functionality like navigation.

The "My Blog" node is a "uBlogsy - Landing" Document Type.

Without modifications, you will not be permitted to move documents of type "uBlogsy - Landing" below your home page.

The follwoing steps show how to enable this:

1. Navigate to the Settings section.
2. Under Document Types, locate the Document Type of your home page.  In this example, the type is Homepage, however this may vary from your implomentation.  Your home pages Document Type is displayed under the properties tab of your home page (Content Section).
3. Select the Structure tab.
4. Enable "uBlogsy - Landing".
5. Save.

Now your home page has been adjusted to accept uBlogsy landing page, you can move the My Blog document under it.  To achive this:

1. Navigate to the Content Section.
2. Right click on My Blog.
3. Select Move.
4. Select your home page and confirm.

 On completing the relocation, Content should look as follows:

Navigating to uBlogsy

If using the Business starter kit with the u.Media skin (or similar), by adding the My Blog document under the homepage, the My Blog page is automatically added to the main navigation of the site.

At this point, everything is up and running, however the style may differ somewhat from your site.

If this is not the desired effect, or your site is not configured with a similar automated navigation sytem, the rest of this section may offer pointers which will help you customise your implomentation.

Removing the auto navigation

uBlogsy imploments an umbracoNaviHide Property of Type "True /false" located under the Properties tab.  This is standard umungst many navigations implomentations, however, if this differs in your implomentations, the "uBlogsy - Base DocType" Document Type can be modified.

1. Navigate to the Settings Section.
2. Locate the "uBlogsy - Base DocType" Document Type.
3. Select the Generic Properties tab.
4. Expand the "Hide from navigation" property.
5. Update the Alias and Type in line with your existing site.
6. Save your changes.

For most implementations, you will not want to hide My Blog from your main navigation, however if you want htis else where, you can remove My Blog from the autonavigation as follows:

1. Navigate to the Content Section
2. Select My Blog
3. Click Properties.
4. Update the Hide from navigation (ticked = hidden).
5. Save and publish.

Refactoring existing and uBlogsy Templates

Although core to uBlogsy integration, given the anticipated content and size of this section, I have started a new article to cover the details:

• Intergrating uBlogsy Templates

Extending / Changing uBlogsy Document Types

Making changes to the uBlogsy document types is heavily dependent on your existing implementation.  This step is to prompt consideration.

If you decide you do want some addtional properties or tabs, or need to make changes to existing ones, the above (in "Removing the auto navigation") section should be reviewed as it describes how to adjust the umbracoHideNav property.

Removing uBlogsy default sub-navigation

It makes sense to have a navigation and content pages when uBlogsy is used as a stand-alone site, however, when itegrated into your existing site, this turns into a sub-nav which no longer seems relervant.

To remove the uBlogsy navigation:

1. Navigate to the Settings Section.
2. Select the uBlogsyBaseSite template
3. Locate and delete the <%--top navigation--%> code.
4. Save.

Personally, and especially if My Blog is a link on the top nav of your existing site, I would also remove the link from the blog tile (in this case My Blog). To do this, in the uBlogsyBaseSite template selected above, replace:

"

  <%--get  site  name--%>
                         <umbraco:Macro  runat="server"  Language="razor">@{ var landing = uBlogsy.BusinessLogic.DataService.Instance.GetLanding(Model.Id);
                             <a  href="@landing.Url">@landing.uBlogsyContentTitle</a>  }  </umbraco:Macro>                  

"

with

"

<%--get   site   name--%>

<umbraco:Macro   runat="server"   Language="razor">@{ var landing = uBlogsy.BusinessLogic.DataService.Instance.GetLanding(Model.Id);
                              @landing.uBlogsyContentTitle  }   </umbraco:Macro> 

"

Alternativley, replacing with the page title isn't bad either (especially as it is wrapped in h1 tags):

"

<umbraco:Item  field="pageName"  runat="server"  />

"

Other minor uBlogsy modifications

eg. removing the commenters websites.

Important note: If you missed the Intergrating uBlogsy Templates link in the above content, it really does form a very important part of integrating uBlogys process.