Use Live Photos In Your Website

Apple introduced its Live Photos feature with the introduction of the iPhone 6s and iOS 9. Live Photo records a 1.5 second photo burst from its 12 megapixel camera. At the same time, audio is also recorded and combine with the camera burst to create a ‘live’ photo. To animate the photo, just press and hold the photo in the Photos app of your iPhone.

Live Photos can be added to your EverWeb created website if you have EverWeb 2.5 or higher which includes the Live Photo widget. Let’s look at how you can include Live Photos in to your EverWeb created website…

Setting Up Live Photo on Your Apple Device

The Live Photo feature is usually set on as the default in iOS, but if it is not on, or if you have disabled it earlier and want to re-enable the feature then…

1. Make sure that your iPhone or iPad supports iOS 9 or higher
2. Open the Camera app on your iPhone or iPad
3. Check that you are using Photo mode. The word ‘Photo’ should be in yellow in the app.
4. At the top of the app in the center is an icon that looks like a target. This is the Live Photo icon.
5. If there is a diagonal line through the icon, Live Photo is currently off. Tap the icon to turn Live Photo on if this is the case, otherwise you’re set to go.
6. From now on, all photos you take will be ‘Live’ photos!

Adding Live Photos To Your Website

After taking some photos with the Live Photo feature enabled, you can add one or more of them to your EverWeb created web page in just a few steps:

1. First synch your iPhone or iPad created photos on your Mac using the Mac’s Photos app
2. Once the synch is complete, select the photo in the Photos app that you want to use in your website.
3. Export the selected photo using the File -> Export Unmodified Original menu option.
4. The export generates two files, one for the image, which has a .JPG file extension, and also a video file which as a .MOV file extension.
5. After the export has completed you can then use the ,JPG and .MOV file in EverWeb.
6. You’ll need to use EverWeb version 2.5, or higher, installed on your computer to use this feature. If not you can always easily upgrade your version.
7. Go to the page in your project file where you want to add the Live Photo.
8. Drag and drop the Live Photos widget on to your page from the the Widgets tab. Size and position as you want bearing in mind that you may need to resize and reposition the widget later on depending on the size of the Live Photo you want displayed.
9. In the Widget Settings select the exported .JPG file that you created earlier as the ‘Image File’
10. Select your exported .MOV movie file as the ‘Video File’.
11. That’s all you need to do, so now you can Preview the page.
12. To activate the Live Photo animation, mouse over the ‘Live’ button in the top right corner of the image.

It’s really easy to add Live Photos in to your web pages with the Live Photos widget making it super easy!