Introduction to Embedding Lytro Living Pictures

Users can embed individual Lytro "Living Pictures" or entire albums in blogs and/or webpages as long as iframes are supported.  

The basic embed option allows a quick and easy way to copy and paste the HTML code for a fully functional Lytro player.  The Basic Web Player Customization Tool allows users to select the parameters and features available in the embedded image player.  

Details and instructions on using basic embeds and the Basic Web Player Customization Tool are available in the article below:

==================================

NOTE:  Your album must be set to public OR you must use the special token URL to share a private album.

==================================

  • Basic Embed overview:

1. Embed an Album

To embed an album, go to the top level of your Album, click on the Embed Code Icon, and copy the resulting code:

 2. Embed a Picture

To get the code for a particular picture, simply view that picture on Lytro.com's Gallery, click the Embed button (</>),  and click "Copy." The HTML will now be stored on your clipboard, ready to be pasted.

We have a super easy to use tool to help you customize your embed; see "The Basic Web Player Customization Tool" section below.


Default embed code:

<iframe width='600' height='434' src='https://pictures.lytro.com/jmoskovic/pictures/942107/embed' frameborder='0' allowfullscreen scrolling='no'></iframe>

Default embedded picture will look like this:

Tumblr

If you have a Tumblr blog, you can embed your "living pictures" by

1) posting them as a video and pasting the entire code (not just the URL),

OR

2) making a new text post, clicking the HTML button and pasting the embed code from our site into the HTML editor.

WordPress

If you have a WordPress blog, you cannot embed iframes, but WordPress was kind enough to add support for embedding Lytro "living pictures". Please see their guide here: http://en.support.wordpress.com/lytro/

For hosted wordpress.org users, please see http://wordpress.org/extend/plugins/embed-light-field-photos/

 

  • The Basic Web Player Customization Tool overview:

The Basic Web Player Customization Tool is a simple-to-use wizard which allows you to easily modify the features and appearance of the Web Player for use on websites and blogs.

To access the Basic Web Player Customization Tool open an image in one-up view on pictures.lytro.com, click on the embed icon, and select 'Customize' (see screenshot below).

The Basic Web Player Customization Tool page will then open (see below)

By using the Basic Web Player Customization Tool users have several options for altering the appearance of an embedded living picture. The Basic Web Player Customization Tool allows users to change the following attributes of the player:

  • Image Size – Determines the dimensions of the embedded living picture
  • Info Layer – Determines whether to show/hide the attribution credit bar and image notes at the bottom of the player.
  • Lytro Logo – Determines whether to show/hide Lytro's logo
  • Fullscreen Button – Determines whether to show/hide the Fullscreen button
  • Help – Determines whether to show/hide the help button
  • Play Button – Determines whether to show/hide the Play button

 

Comments

  • Avatar
    Charles J. Kelly

    I have tried this and it doesn't work.  Are there theme restrictions, or maybe something else?  I can successfully embed Lytro pictures in a Dreamweaver page.

  • Avatar
    Charles J. Kelly

    Thank you for your support response, but I still can't get this to work.  I can embed one of your pictures, using a link on your support page.  However, when I substitute a link to my pictures, it doesn't work.  Below are the links, as well as a link to my WordPress blog where you can see the links at work, and not.

    Code on support page that works for Lytro squirrel:

    <iframe width="400" height="415" src=" [https://www.lytro.com/living-pictures/1698/embed?showArrow=true&showBorder=true&showFTU=true&allowFullView=true](https://www.lytro.com/living-pictures/1698/embed?showArrow=true&showBorder=true&showFTU=true&allowFullView=true)" frameborder="0" allowfullscreen></iframe>

    URL to my picture:

    http://pictures.lytro.com/chuckie01/pictures/63377#./63377?&_suid=498

    Code received from support, altered for URL of my picture:

    <iframe width="400" height="415" src=" [http://pictures.lytro.com/chuckie01/pictures/63377#./63377?&\_suid=498](http://pictures.lytro.com/chuckie01/pictures/63377#./63377?&_suid=498) [/embed?showArrow=true&showBorder=true&showFTU=true&allowFullView=true](https://www.lytro.com/living-pictures/1698/embed?showArrow=true&showBorder=true&showFTU=true&allowFullView=true)" frameborder="0" allowfullscreen></iframe>

    WordPress Blog Address: http://lytrolivingpictures.wordpress.com

    Any Ideas?  I notice the support link goes to an encrypted page, and mine does not.

  • Avatar
    Charles J. Kelly

    Another thing I have noticed: when you update a WordPress page, the link changes from 

    <iframe width="400" height="415" src=" https://www.lytro.com/living-pictures/1698/embed?showArrow=true&showBorder=true&showFTU=true&allowFullView=true" frameborder="0" allowfullscreen></iframe>

    After updating WordPress page, code looks like this:

    [lytro  photo='1698' show_arrow='true' show_border='true' show_first_time_user='true' allow_full_view='true' width='400' height='415']

     

    When I update the same original code, substituting my picture's address, the code changes from:

    <iframe width="400" height="415" src=" http://pictures.lytro.com/chuckie01/pictures/63377#./63377?&_suid=498/embed?showArrow=true&showBorder=true&showFTU=true&allowFullView=true_" frameborder="0" allowfullscreen></iframe>_

     

    After updating WordPress page, code looks like this:

    <a href="http://pictures.lytro.com/chuckie01/pictures/63377/embed?showArrow=true&#038;showBorder=true&#038;showFTU=true&#038;allowFullView=true">http://pictures.lytro.com/chuckie01/pictures/63377/embed?showArrow=true&showBorder=true&showFTU=true&allowFullView=true</a>

    In the link that works, the lytro address is www.lytro.com, while n my picture's address lytro address is pictures.lytro.com  the only other difference I see is the https vs http

  • Avatar
    Charles J. Kelly

    I tried the last two suggestions - no luck.  Do you think I have to get a folder on www.lytro.com for my pictures, where Lytro stores the pictures that work on WordPress, instead of where Lytro stores my pictures, at pictures.lytro.com?

  • Avatar
    Charles J. Kelly

    Embedding WordPess now works for me! Thanks Lytro support.  Thanks especially to Corey.

  • Avatar
    Nico Gees

    I´ve also succeed in integrating lytro to my page, but my question is: Is there a possibilty to let the user switch to the next picture? On the Lytro-Page the user can use arrowkeys to switch, but after integrating on epic with the iframe, this won´t work anymore.

    Any suggestions?

    kind regards

    nico

  • Avatar
    Mathieu Terzian

    @Charles: How did you get to make it work? using only the URL or the embed code? Pasting it in the rich text mode or the html editor?

    I only get URLs to appear on my blog post...

    Thanks!

    Mathieu

  • Avatar
    Mathieu Terzian

    BTW I'm using wordpress.com 

    Thanks!

  • Avatar
    Mathieu Terzian

    OK, thanks to Robert, embedding living pictures in a Wordpress.com blog now works.

    Unlike what's explained here at step 3 http://en.support.wordpress.com/lytro/

    Copy/pasting the embed code into Wordpress.com HTML mode and saving/updating it doesn't bring the expected shortcode but a <a href...> link.

    Here is what you should do:

    • On Wordpress.com, switch to HTML editor and copy 
    • Manually paste/insert a shortcode like this one [lytro photo="143092" width="400" height="415"]
    • Replace the number of the photo (here: 143092) by the one you find in your picture's URL (http://pictures.lytro.com/xxxxxxx/pictures/yournumber)
    • If you want, you can customize your picture by adding attributes to the shortcode. You can find them here http://en.support.wordpress.com/lytro/ (see shortcode attributes).
    • Switch to the visual editor mode.
    • See the result by clicking on preview.

    Hope this will help.

    Thanks again to Robert from Lytro support.

    Mathieu

  • Avatar
    Julie Cason

    When I hit the share button from Gallery View OR the actual photo view, I only get two choices: Facebook or Lytro. There is no choice to email, get the code, etc., as shown in the directions above. Help, please. Thanks,

  • Avatar
    Mathieu Terzian

    Hi Julie, which browser are you using?
    Internet Explorer? "sometimes" it can behave weirdly.
    I only tried Chrome and Safari on a Mac and it worked just fine.
    Hope this will help.

  • Avatar
    adam gould

    Hi Julie, I know what's going on there... while you are in Desktop, you can only share directly to Lytro or to Facebook.  If you want to share elsewhere (and/or get the code/non-public URL) just share to Lytro (with the appropriate public or non-public selection), and when finished go to the story page.  It is there you will find the additional share options, not Lytro Desktop.

     

  • Avatar
    adam gould

    I see that WordPress ** updated their Lytro documentation** yesterday (May 16th).  Any WordPress power users want to check it out and let us know if what's posted works? 

  • Avatar
    Mathieu Terzian

    Hi Adam,
    As far as I can see, I don't find where the page was updated.
    The information seem to be exactly the same as before.
    If they haven't updated the Wordpress.com platform, I guess it won't work as explained.

    Heve a look at my previous comment to find how to get it to work.

  • Avatar
    Mathieu Terzian

    Sorry Adam, I didn't realize that you were from Lytro support ;)

    I've checked and it still doesn't work like they say.

    But with the trick Robert explained, it does.

  • Avatar
    adam gould

    Yah the only reason I thought they might have updated it was due to the "Last modified May 16th" tag at the end of http://en.support.wordpress.com/lytro/

    I did also find this, but it's specific to users of WordPress' hosted service:  http://wordpress.org/extend/plugins/embed-light-field-photos/

  • Avatar
    Gaird Schlesinger

    I have a self-hosted WordPress site running the latest version 3.3.2, and it supports the drop-in iframe code as-is. Paste in HTML mode and publish.

    Example page here: http://www.gaird.com/lytro/

  • Avatar
    matthew hill

    Can't get this to work at all on my Wordpress Blog, help!

  • Avatar
    Lee Schneider

    Ok, the directions are a little confusing.  If, like Gaird, you have a self hosted blog, the iframe code will work perfectly.  If you do not, and Wordpress hosts your blog, you need to do as Mathieu suggests, and switch to HTML editing and pop in the short code.  [lytro photo="143092" width="400" height="415"]. Then it works. 

  • Avatar
    Allen Hemberger

    Hi there; I'm trying to get some lytro images embedded in a wordpress blog (self-hosted). Following all of the various techniques listed here, I can't seem to get anything to work; the shortcode -- when copy/pasted in -- just appears as plain text in my post, rather than evaluating to anything. Is there something more required to get this to work? 

    Specifically, I'm trying to just test an image listed in Lytro's public gallery:

    [lytro photo="143092" width="400" height="415"]

    but all I see in my post is this exact text. 

  • Avatar
    adam gould

    Allen,

    We're unable to reproduce any issue with the short code; it seems to work fine for us.

    Perhaps @Lee might have some insight, or you might have better luck contacting WP's support since this shortcode thing is their feature.  Sorry we couldn't be more help!

  • Avatar
    adam gould

    Allen, one of our crack QA team members noticed that you are using a self-hosted version of word press.  Is it possible you are using a version of WP that is old/doesn't support the lytro short code?

    WP introduced the short code as a work around because they do not allow iframes on blogs they host.

    You may still need to contact WP suport to get the full story, but let us know what we can do.

  • Avatar
    Allen Hemberger

    Hi Adam;

    Thanks very much for your reply! I understand you guys probably have your hands tied in terms of knowing how to troubleshoot this. Unfortunately Wordpress Support is something that looks like might only be available for some sort of Premium (paid) membership, and hints I've found regarding troubleshooting shortcode valuation hint at upgrading/changing blog themes. I'm not sure I'm ready to run in either of those directions just yet; I've tried deactivating all installed plugins and confirming that I'm running the latest version of Wordpress, but still can't seem to get it to work. I'll keep investigating here... 

    Thanks!

    --a

  • Avatar
    Jonathan Friedman

    How do I disable the caption popover? I just want the clickable image, plain-and-simple. The caption might even be tolerable if it didn't have my username on it.

  • Avatar
    Ian Ellison

    @Jonathan, Could you post a screenshot of what you are seeing?

  • Avatar
    Jonathan Friedman

    See attached. Note caption and username at bottom of photo. Don't want that to appear. Ever.

  • Avatar
    tjhanley

    @jonathan you can add 

    showCaption=false

    to the embed params

  • Avatar
    Wim Hoogers

    Wanneer kan ik een Lytro embedden  in G+

     

    Groetjes wim

  • Avatar
    adam gould

    We now have a new knowledgebase article on advanced Lytro living picture embedding and customization options.  ** Check it out!**

     

     

Powered by Zendesk