Integrating uBlogsy into your Umbraco site

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.

Umbraco Business Starter Kit Content

 

  • 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.

Umbraco Business Starter Kit Settings

 

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).

Umbraco Business Starter Kit Home Page

 

 

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 nth 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.

uBlogsy Content Relocation

 

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

uBlogsy Landing Docyment 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.

 

uBlogsy Allow Landing Docyments

 

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:

uBlogsy Relocated Content

 

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.

uBlogsy Navigation

 

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.

Modifying uBlogsy umbracoNavHide

 

 

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.

uBlogsy Hide From Navigation

 

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:

 

 

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.

uBlogsy Content Pages Navigation

 

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.

uBlogsy Remove Content Page Navigation

 

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);
                             < 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.

Written by Richard Bowers at 19:30

7 Comments :

Roberto said...
Great goods from you, man. I have understand your stuff provueis to and you are just too great. I really like what you have acquired here, really like what you are stating and the way in which you say it. You make it enjoyable and you still care for to keep it smart. I can not wait to read far more from you. This is really a terrific web site.
July 27, 2012 01:04
Great Article
July 30, 2012 04:23
Den said...
Do you know how to remove commenter website field? When I remove/comment it from "\usercontrols\uBlogsy\Contact.ascx" I get "Object reference not set to an instance of an object" because that field is in "Contact.ascx.cs" but I'm not sure how to use source files.
September 12, 2012 04:08
ANIL said...
There is any way to login user before they send comment of any blog
November 21, 2012 06:57
I do not know if you have encountered the same problem with other people, perhaps your site. Will be slightly better.If some writing on the text content on the running Snapshots. Other people can provide feedback.There are more good proposals.Look forward to your suggestions. I love this blog.
November 14, 2012 12:41
Anthony said...
Nice tutorial!
March 11, 2013 04:20
Anthony said...
Nice tutorial!
March 11, 2013 05:29

Comment

Comments closed

Try our Umbraco Hosting free for 3 months