Look at me


Hey you, look at me! I’m a blog. A SharePoint blog would you believe it? Don’t I look fancy?

A new design

For the last few weeks the incredible Tom Van Bortel has been working on a new blog design for this blog. A task I wouldn’t dare to commit myself to, I have very little design skills. But he does!

The result is a modern look, clean and slick, and hey it’s even responsive! Go ahead and play with that browser window and make it smaller and wider Winking smile Very nifty feature thanks to Bootstrap.

If you’re interested in the very details on how the design was formed just drop me a line and perhaps I’ll ask Tom to do a guest post. Or ask him yourself directly, his coordinates should be on his own blog.

SharePoint or CKS:EBE ?

My blog is indeed hosted on SharePoint, but it really still is CKS:EBE that does most of the rendering using the MTF (Modular Theme Framework). Actually I couldn’t upgrade the blog to native SharePoint 2013 mode because of the CKS:EBE customizations, so it is running in SharePoint 2010 mode on our SharePoint 2013 farm. One day I’ll have to upgrade to SharePoint vNext since I doubt they’ll support both 2010 and 2013 modes.

» More posts on CKS:EBE

Content transformation

In order for the images to be ‘responsive’, I had to add a CSS class “img-responsive” to all images in all posts. The blog posts were SharePoint List Items, so this should be an easy enough task to automate via PowerShell or .NET code. I’m still more fluent in .NET than PowerShell so I wrote up a quick application to transform all existing blog posts to have responsive images.

You can go different approaches here, but I chose the Html Agility Pack so I could manipulate the HTML as a queryable, adaptable HtmlDocument. This is very similar to the System.Xml.XmlDocument and it’s very “tolerant” when it comes to malformed HTML.

Here’s the quick and dirty code from my transformation script. I didn’t focus on writing clean code here, it’s just a one off.

using HtmlAgilityPack;
...

public static void Run()
{
    string url = "http://www.sharepointblogs.be/blogs/vandest/lists/posts";
    using (SPSite site = new SPSite(url))
    {
        using (SPWeb web = site.OpenWeb())
        {
            SPList list = web.GetList(url);

            foreach (SPListItem item in list.Items)
            {
                string oldBody = (String)item["Body"];
                string newBody = ModifyHtml(oldBody);

                item["Body"] = newBody;
                item.SystemUpdate();
            }
        }
        SWF.MessageBox.Show("Done");
    }
}

public static string ModifyHtml(string inHtml)
{
    string result = null;

    HtmlDocument doc = new HtmlDocument();
    doc.LoadHtml(inHtml);

    foreach (HtmlNodeNavigator imgNodeNav in doc.CreateNavigator().Select("//img"))
    {
        HtmlNode imgNode = imgNodeNav.CurrentNode;
        HtmlAttribute classAttr = imgNode.Attributes["class"];

        if (classAttr == null)
        {
            imgNode.Attributes.Add("class", "img-responsive");
        }
        else
        {
            string classAttrValue = classAttr.Value.Replace("img-responsive", String.Empty).Replace("  ", " ").Trim();
            classAttrValue = String.Concat(classAttrValue, " img-responsive").Trim();

            classAttr.Value = classAttrValue;
        }
    }

    using (StringWriter sw = new StringWriter())
    {
        doc.Save(sw);
        result = sw.ToString();
    }

    return result;
}

Writing posts

I’m still a loyal user of Windows Live Writer for writing my posts. I like the Edit/Preview/Source modes, the WYSIWYG style of writing up a blog post, and also the plug-ins. For now I’m using Insert Code for code snippets and Dynamic Template. The latter is really cool since you can create your own snippets using HTML, JavaScript and ASP.NET and offers a lot of potential. The author has put up some basic tutorial videos that might interest you and will get you started.

So now it’s up to me again to start blogging more frequently. No more excuses now Winking smile

 


Links to this post

Comments

CAPTCHA Image Validation