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.

Chapter 1 introduced you to “Live Photo” and the goal of these series of posts. Chapter 2 showed you how to integrate “Live Photo” into the Sitecore Content Editor.


Render a ‘Live Photo’ using Glass to the page.

To accomplish this I needed to know the inner workings of Glass… so I ‘dotPeek’d’ under the hood and figured out how to easily accomplish this part.  Editing is more difficult so that’s why I am covering it in a separate post.

  1. Live Photo Glass object
    This is what our ‘Live Photo’ Glass object looks like:
  2. Mapping the field data and Glass, the ‘Live Photo’ Data Mapper
    Learn more information regarding this topic from Glass at: Glass Data Handlers.
  3. Mimicking Glass to render this element:
    If this was not a “Proof of Concept”, I may have chosen a different approach.  To render this element, I needed to use a few Glass Extension methods, however since the methods were both public and private, I decided to borrow or rewrite them as needed. You can view those here.RenderElement.cs

    LivePhotoMvc.cs

    HtmlHelperExtensions.cs

    GlassMapperScCustom.cs
    In the method: CreateResolver(), add dependencyResolver.DataMapperFactory.Insert(0, () => new LivePhotoDataMapper()); after var dependencyResolver = new DependencyResolver(config);LivePhotoDemo.cshtml

    The Result

Live Photo rendered in Sitecore
Hover over the “Live” on the top right of the photo.

Thank you for reading!

If you found these posts informative (I know you do), you’ll be interested to read the next post: Apple’s LivePhotosKit, Sitecore & Glass: Chapter 4 – Rendering & Editing the Live Photo in the Experience Editor


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.

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

Comments are closed.