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.

Challenge: Live Photos with web support was just released.  It’s so new, Sitecore currently has no fields that can easily handle this technology. There are messy workarounds, but I am a perfectionist and avoid messy workarounds as long as possible. I believe this is a decent challenge for us superhero Sitecore developers. The trickiest part is the Glass integration.

Off to the Fortress of Solitude, it’s time to code and blog as I progress.

1. Creating the Custom Live Photo field in Sitecore

As you learned from reading Chapter 1 of this series, Live Photos need to be exported from the app “Photos” (If you’re using a Mac). Exporting Live Photos spits out a jpg and a mov. Create a folder in the media library and upload them to that folder pronto.

The next decision was what do I do about a field to store the IDs and other data from these files that we will need later on.  I considered making a sweet, new, unique custom field, but time was short so I settled with the Image Field. It’s easily customizable and it stores the data as XML which is easy to work with.

Steps to create a new Live Photo Field

  • Change the database to ‘Core’
  • Navigate to the Content Editor -> System -> Fields Types
  • Create a new folder and name it “Live Photos”
  • Navigate to the folder: Simple Types
  • Copy the Image Field to the “Live Photos” folder and rename the field to “Live Photo”
  • On the Live Photo field item, change the Control value to the ‘prefix:FieldName’, ie. paragon:LivePhoto
  • While being on this new field item, navigate down to the Browse button in the menu folder. Copy it to that same folder and rename it to “Browse Movie Files”.  In that item’s message field enter: contentimage:livephoto(id=$Target)
  • After that, copy the properties button item like you did in the last step.  Name the new item “View Live Photo”.  Make changes to the other fields where appropriate.  The important field is called “Message”, and in this field enter the value: contentimage:ShowLivePhotoProperties(id=$Target).
  • Navigate to the WebEdit Buttons folder.  Copy the Choose Image item and name it Choose Movie File.  Change the appropriate fields to match the new button.  In the message field enter the value:
  • Do the same for the Image Properties item.  Copy and name that View Live Photo.  Fill in the appropriate fields like Header and in the message field, enter: chrome:field:editcontrol({command:”paragon:WebEditViewLivePhoto”})

Don’t forget to change the Field’s icon for funzies!  I chose a movie projector.

2.  Set up the LivePhoto.Config File

Might as well knock this step off the list. If anything changes like a namespace, it’s easy to update.  I should look similar to mine.

3. The Code.

Explaining every aspect of the code would probably be beneficial, but I am going to fly over it.  Don’t worry though!  Like every time before this, I will provide a link to GitHub where you can download the complete Source Code(coming soon).  If I missed something, you have any questions, please get a hold of me through one of the million social media platforms.  I respond quickest with none of them, but a DM through Twitter is probably the way to go.

The Live Photo Field and Related Code
Remember that field and related buttons you were supposed to create back in Step 1? Well the code for the field and buttons is in this section.

I peered into the Sitecore Kernel and borrowed the code from the Image.cs file.  DotPeek decided to be a slob and the code was a mess. It obviously irked me, so I had to do a quick spring cleaning. Once it was ‘cleanish’, I proceeded to shoehorn in my code. I probably could have made this field totally unique and rad, but this coding task was just going to be a “Proof of Concept”, plus I gave myself 24 hours to finish it.  My reasoning will be that this overnighter is training for the 2018 Hackathon.

Apologies for the amount of code and scrolling below.

View the Live Photo and Set some Properties! (Setting Properties coming soon)
If you exported the “Live Photo” from your iPhone correctly then this should work… unless there’s a bug.  If there is a bug, it’s all Tibor‘s fault (Old Simpsons Character).  Two files are needed to accomplish this action are ShowLivePhoto.xaml.xml and ShowLivePhotoPage.cs.

Apple’s LivePhotosKit JS is important to see the moving picture sorcery appear.  We also have check boxes to set the other LivePhotoKit JS API options.

ShowLivePhotoPage.cs – ShowLivePhoto.xaml.xml’s codez
This renders out the Live Photo and properties to change the functionality of the Live Photo.

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

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

Tech Specs:
This module is build on the following:

Sitecore Version: 8.2 update 2
Glass Version: 4.3.4
.Net Framework: 4.6

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.