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.

Want the source code? Visit GitHub and download it.  Keep in mind, it’s using Sitecore 8.2, Glass 4.3.4 and .net framework 4.6.

I created a series of videos demoing the code and functionality. Click here to watch.

What Magic is Needed to Create Custom Fields?

No magic is needed, just a little alchemy.  Back in 2014/2015, I made my first custom field, it was a nifty SVG image field and it worked well in the Content Editor as well as the Experience Editor.

Integrating the field with Glass took a lot of my free time, but when I was done, the field could be rendered and edited easily in the EE using Glass. Unfortunately, I misplaced that treasure and I miss it.  I sometimes wonder what the SVG field has been doing all these years later after I abandoned it.

That last custom field/Glass integration experience was so long ago, I started to worried my Live Photo integration idea would either take much longer than planned or I would fail horribly in an embarrassing and very public display.  Luckily, I possessed a (not so) secret weapon; it’s name is JetBrains dotPeek.  After doing some peeking, I began to code like the wind; quickly crafting a masterpiece that future developers will gaze and marvel at as they reminisce and recount my coding exploits to their peers; everyone in awe of my heroism envious of that field’s magnificence… zzzzz

Tips in Creating Cool, Useful Custom Fields

If you plan on making a custom field there are a few tips that will make your journey easier.

  • Tip #1: Download and use dotPeek!  I am still shocked that developers do not use this awesome tool.  Whatever the reasoning, it’s usefulness as a learning tool should end any argument… oh and what’s the issue with developers shunning Resharper!?  (Eric quickly decides to step off soapbox and ignores his pet-peeve… for the moment).
  • Tip #2: Find a field in Sitecore that resembles or functions similar to what you are trying to accomplish.  Next, study the code and figure out how to implement your version.  Feel free to jazz it up with some Css and Js.  In my opinion, XML based fields are really easy to customize quickly and easy to render.

You Created Your Custom Field, Now What?
How to Include Glass to Render and Edit this Custom Field.

1. Create an Object and its Mapper
We will start off and create two of the more important files, a Glass Data Handler and the object we want the data mapped to.  In my example, I created a LivePhotoObject and it has properties I need populated so Apple’s Live Photo API works.  These properties contain a bunch of data attributes, width, height, Ids and the image and movie sources.

Create a Glass Data Handler, I prefer to call this the LivePhotoDataMapper, Populate the LivePhotoObject in the GetFieldValue method.

Also, don’t forget to add the Data Mapper to GlassMapperScCustom.cs:

2. Find a Glass Rendering Similar to Yours and Mimic it.
Since my field is based on the image field, this was easy.  All I need to render out is an element like span with a few data attributes and an inline style of width and height.  Since Glass has made the method MakeEditable private, we need to recreate it so we can edit the field too.

3. Disregard the negativity and bad press regarding Static Methods.
These methods are fine if they are simple and don’t produce side effects.  To my knowledge, Trump has not signed an executive order outlawing Static Methods… yet.  Plus, I doubt anyone will give us a wag of a finger or a frowny face.

4. Static Method in Use:
With that Static Method, you have the power to render OR edit the Live Photo with this line of code:

5. You are Free to Render and Edit, but it Depends on the Page’s Mode!
Chill, I made it seem more dramatic then I needed to, apologies.  Just switch over to edit mode the quickest way you know how and prepare to be mildly entertained!  In edit mode, this RenderLivePhoto tag works like Glass’s Render Image tag.

I know what you’re thinking… are we done yet?  Sigh, no.  I think I have two more items to explain.

6. Create a WebEdit button to add the movie item to the field’s XML.
With a single click of this button, you can gaze into the Media Library for a Live Photo’s movie file.  FYI, it’s set to only select movie files.

7. What about the Content Editor?
So? What about it?  Oh, I guess editing there is important too.  This will take two fields!  Switch the DB to Core pronto!

  • FYI, If you installed the Sitecore Package, this is already complete. Under System/Field Types, open the Live Photo folder and click on the Live Photo field.  Two subfolders should exist under it, Menu and WebEdit Buttons.  “Browse” should’ve been copied and renamed to “Browse Movie Files” and a button named “View Live Photo” should exist too.
    • Browse Movie Files: In the field Message, the value should be:  contentimage:livephoto(id=$Target).  That code exists in the file: LivePhoto.cs.  Clicking that button will open a modal and you will be able to select a movie file.
    • View Live Photo: In the field Message, the value should be: contentimage:ShowLivePhotoProperties(id=$Target), that code also exists in LivePhoto.cs.  Clicking that button will open a model with a working Live Photo (if one exists).  Some properties can be set there as well.

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 4 – Rendering & Editing the Live Photo in the Experience Editor”

Comments are closed.