“All it takes to turn a grouchy Experience Editor Friendly is a little TLC.” – Mr. Rogers

♬ It’s a beautiful day in the Experience Editor, A beautiful experience for an author, since we’re together, we might as well say, won’t you be my Content Author?

Hi, Sitecore Neighbor, I’m glad we’re together again… discussing new cool ways we can help provide the friendliest authoring experience an author can have while using Sitecore’s Experience Editor! Continue reading ““All it takes to turn a grouchy Experience Editor Friendly is a little TLC.” – Mr. Rogers”

LivePhotosKit API, Sitecore & Glass Integration: Demoing the Functionality and Code

These videos should be beneficial to those developers who want to make custom Sitecore fields that can be rendered and edited with Glass.  I am still in the process of cleanup and code refactoring.  I also am going to attempt to improve the documentation of the code.  As I have mentioned before, I am a perfectionist and this “Proof of Concept” is not up to my standards… yet.  I got into a little fight with a few small bugs last night and that battle’s remnants are still scattered throughout the solution.  However, the code will still be available in its non-pristine condition.

I mentioned in the first video I would be uploading 2 Demos, however, to keep the videos shorter, I broke them up into 4 videos.  As usual, I didn’t stop Vlogging/Blogging for unimportant tasks, like sleeping, eating, moving…  I was exhausted and in my opinion, you can hear the grogginess in my voice set in on the Demo 3 video. Continue reading “LivePhotosKit API, Sitecore & Glass Integration: Demoing the Functionality and Code”

Apple’s LivePhotosKit, Sitecore & Glass: Chapter 4 – Rendering & Editing the Live Photo in the Experience Editor

It’s been a LONG two days, but I am finally finishing the last post in the 4-part series.   My idea took weeks longer to implement than I originally planned. I procrastinated by mistake.  I don’t know why, but I was under the impression ‘procrastinate’ was a synonym for being ‘proactive’; turns out, I was incorrect. I guess I am still capable of learning new definitions at my old age.

If you read the first three chapter in this series, you should be somewhat familiar with the important aspects of integrating LivePhoto, Sitecore and Glass. If the concepts are a lil hazy, Click here for a recap of the most important pieces that you should know more about. Continue reading “Apple’s LivePhotosKit, Sitecore & Glass: Chapter 4 – Rendering & Editing the Live Photo in the Experience Editor”

Apple’s LivePhotosKit, Sitecore & Glass: Chapter 3 – Rendering the ‘Live Photo’ field with Glass

The next two posts are for those who love the to tear apart Sitecore, Glass, etc. and figure out how things work and find ways to implement your new and awesome ideas.

We are finally going to see how we can render the ‘Live Photo’ field using Glass and the final post will explain how to edit the ‘Live Photo’ field in the Experience Editor along with the Sitecore field item and demo items and the source code; all cleaned up and refactored.

Continue reading “Apple’s LivePhotosKit, Sitecore & Glass: Chapter 3 – Rendering the ‘Live Photo’ field with Glass”

Apple’s LivePhotosKit, Sitecore & Glass: Chapter 2 – Sitecore, Custom Fields & Code

Let’s pretend today, April 27th, a fictitious development agency’s oldest and best client finally read about the awe inspiring iPhone and its weirdest camera feature. The article mentioned Apple developed a camera feature with the ability to capture motion pictures! The client was so shocked, he fainted. When he came to, he wasted no time calling his agency contact and began demanding the ability use these Live Photos on his Sitecore site ASAP. In this “pretend” situation, I decided to solve the issue by pretending he was the type to own a ‘non-explody’ maybe even a ‘possibly-explody’ Samsung phone instead of the iPhone. No Live Photos for him and he was bummed.

You probably pretended (or ignored the 1st paragraph entirely) a more realistic scenario. The client does own an iPhone and he’s just “Live Photo’d” every product in the warehouse and he insists you upload these cool moving assets to his Sitecore/E-Commerce powered site ASAP!

Live Photos represent any new, lame piece of tech people think might help them stand out from the competition.  Who knows if it would, but our jobs as developers is to be ready, have fun and solve this types of challenges. Continue reading “Apple’s LivePhotosKit, Sitecore & Glass: Chapter 2 – Sitecore, Custom Fields & Code”

Apple’s LivePhotosKit, Sitecore & Glass: Chapter 1 – Introduction to the Basics

April 20th, Apple released LivePhotosKit JS API that includes web support to the public.  In my opinion it’s about time.  If you are not aware of what a “Live Photo” is… please take a seat, hold tight and prepare to have your mind blown as I explain this simple concept! LOL.

A “Live Photo” is essentially a photo… PLUS MORE!  When activated, the photo switches over to play a short video that was recorded slightly before and after the picture was captured. Apple essentially combined 2 existing technologies and with the help of their great marketing team, they made this technology sound like it was new and innovative.

It’s a Doggy Birthday Extravaganza caught on vid… Live Photo!
Continue reading “Apple’s LivePhotosKit, Sitecore & Glass: Chapter 1 – Introduction to the Basics”

Editor Enhancement Toolkit: Module Overview

The module formally known as “Enhance the Editor Experience” is now known as the “Editor Enhancement Toolkit”; it has been refactored and includes cool new features. The source can be downloaded from GitHub and the module is available on Sitecore’s Marketplace.

The “Editor Enhancement Toolkit” is based on my “MySpace the Content Editor” blog trilogy. The concepts are similar but the code, features, and approach have improved.

What benefits does this module provide you and your Sitecore implementation?

The module was initially created as a tool to improve a content author’s experience editing content in the Content Editor as well as the Experience Editor. It’s useful in disguising architectural mistakes, but shouldn’t be used as an excuse to purposely make poor decisions. Continue reading “Editor Enhancement Toolkit: Module Overview”

Handling Image Dimensions in the Richtext Editor

Something odd happens when an image is added in the rich text editor. Initially, when the image is inserted, the RTE places the width and height properties correctly. However, when we change the properties such as adding a class, the dimensions are now inline styled. Inline styling dimensions isn’t responsive friendly.

Clients should not be expected to edit the HTML. So how do we resolve this issue?

When the client is making changes in the RTE we can fire off code to alter the HTML when the RTE is closed. We can accomplish this by utilizing the saveRichTextContent pipeline.

For content items that haven’t been modified after the new pipeline has been added, we can create a new renderField pipeline.

First we create the code to cycle through the images in the HTML and modify the inline styles.

using System;
using System.Linq;
using HtmlAgilityPack;

namespace Company.Library.Pipelines.RichTextContent
    public static class RichText
        public static string Content(string content)
            var doc = new HtmlDocument();

            if (!doc.DocumentNode.Descendants("img").Any())
                return content;

            foreach (var img in doc.DocumentNode.Descendants("img"))
                var imgAttr = img.Attributes["style"];

                if (imgAttr == null)

                var alteredStyles = string.Empty;
                var inlineStyleList = imgAttr.Value.Split(';');
                var removeImageDimensions = Settings.GetBoolSetting("RTE.Images.RemoveImageDimensions", false);

                foreach (var style in inlineStyleList)
                    var attrList = style.Split(':');

                    if (!attrList.Count().Equals(2))

                    var property = attrList[0].Trim();
                    var val = attrList[1].Trim();

                    if ((property.Equals("width", StringComparison.InvariantCultureIgnoreCase) ||
                        property.Equals("height", StringComparison.InvariantCultureIgnoreCase)) && !removeImageDimensions)
                        img.Attributes.Add(property, val);
                        alteredStyles += string.Format("{0}:{1}; ", property, val);


                if (!string.IsNullOrWhiteSpace(alteredStyles))
                    img.Attributes.Add("style", alteredStyles);

            return doc.DocumentNode.OuterHtml;

saveRichTextContent Pipeline

using Sitecore.Shell.Controls.RichTextEditor.Pipelines.SaveRichTextContent;

namespace Company.Library.Pipelines.RichTextContent
    public class Save
        public void Process(SaveRichTextContentArgs args)
            args.Content = RichText.Content(args.Content);
<img style="width: 200px; height: 200px; border: solid 3px #000;" alt="" src="/someimage.png" />
<img width="200" height="200" style="border: solid 3px #000;" alt="" src="/someimage.png" />

Config Settings

Create a custom config file in the App_Config/Include folder if you haven’t done so and add the following:


Video Demo

Do you enjoy my oddly themed blogs and wish you had access to even more of me and my ideas? Good news, you’re in luck!

If 140 characters is your thing, follow me on Twitter.

If you hate reading and watching Sitecore videos entertains you, head over to my YouTube channel! Sometimes I entertain, sometime I provide useful Sitecore information and sometimes I can do both in the same video.

I can also be found hanging out on the Sitecore channels on Slack, I like it, although it occasionally triggers AOL chat room flashbacks from the olden days.

You can also find me adding content on LinkedIn and on Reddit.