Start | Webmaster's Guide | PicLens Lite | PicLens Publisher | WordPress Plugin

Webmaster's Guide

Last Updated March 20, 2008

This tutorial shows you how to enable your website for the immersive, full-screen slideshows of PicLens.

Learn By Example: A Basic PicLens Gallery

1. Create a Media RSS Feed
2. Enable RSS Autodiscovery
3. Match Your HTML Page's Images to the Media RSS Tags
4. Add a PicLens Badge to Your Site (optional)

Activate PicLens Lite on Your Site

Adding Advanced Features

Multiple Albums on a Single Page
Multi-Page/Feed Support
Custom Logo
Music
Video

How It Works

We've made it easy for media content on any site to be viewable in PicLens. All you have to do is integrate a Media RSS feed into your pages.

Media RSS is an open standard for syndicating multimedia content. It extends RSS 2.0 to provide additional information, such as richer thumbnail and image metadata.

PicLens uses the data in the Media RSS feed to match each image on your webpage to: (1) the separate thumbnail image that appears on the PicLens 3D Wall and filmstrip, and (2) the full-screen image that appears in the PicLens full-screen mode. This full-screen image can be the same image file displayed on your webpage or be a separate image of higher resolution.

Website visitors with PicLens installed on their browsers will enjoy your site with all features, including the 3D Wall, full-screen mode, and more.

For visitors who don't have PicLens installed, you have the option to add a few extra lines of code into your feed and HTML to activate your website for PicLens Lite, a filmstrip-style presentation that mimics the full-screen mode of PicLens.

Learn By Example: A Basic PicLens Gallery

Here's a downloadable set of all files needed to create a bare bones PicLens photo gallery. This example shows how the Media RSS feed, the HTML page, and image directories are formatted and integrated to work for PicLens.

This example is ready to go live. Just upload the contents of the zipped file (the full sized images, thumbnails, photos.rss, and HTML page) to a web directory on your server, and it will look just like this sample gallery.

We created this example with PicLens Publisher, our free desktop software for creating a basic PicLens gallery.

Step-by-Step Instructions

Step 1 — Create a Media RSS Feed

Create a Media RSS feed like the example below, and save it as photos.rss (or any name you choose).

Include an <item> tag for each photo that you want to appear in your slideshow, with the <media:thumbnail> and <media:content> tags specifying the locations of the thumbnail and full-size image content, respectively. The URLS can be relative (i.e. images/photo.jpg) or absolute (i.e. http://anysite/images/photo.jpg).

Make sure to declare the Media RSS namespace with <xmlns:media>, as shown below.


        <?xml version="1.0" encoding="utf-8" standalone="yes"?>
        <rss version="2.0" 
          xmlns:media="http://search.yahoo.com/mrss"
          xmlns:atom="http://www.w3.org/2005/Atom">
            <channel>
                <item>
                    <title>A.jpg</title>
                    <link>pl_images/A.jpg</link>
                    <media:thumbnail url="pl_thumbs/A.jpg"/>
                    <media:content url="pl_images/A.jpg"/>
                </item>                  
                    .
                    .
                    .
                
                <item>
                    <title>Z.jpg</title>
                    <link>pl_images/Z.jpg</link>
                    <media:thumbnail url="pl_thumbs/Z.jpg"/>
                    <media:content url="pl_images/Z.jpg"/>
                </item>                               
            </channel>
        </rss>

Step 2 — Enable RSS Autodiscovery

In your HTML document header section, add the line of code highlighted below, which declares the Media feed using standard RSS Autodiscovery.


        <html>
          <head>
            <link rel="alternate" href="photos.rss" 
            type="application/rss+xml" title="" id="gallery" />
          </head>
          <body> ... </body>
        </html>

IMPORTANT NOTE: You can place your photos.rss file in any web folder. Just make absolutely sure your HREF tag above points to the correct location of photos.rss, otherwise your feed will not work.

Step 3 — Match Your HTML Page's Images to the Media RSS Link Tags

When your visitors mouseover an image link on your HTML webpage, PicLens needs to know which thumbnail image and full-screen image to display on the PicLens 3D Wall and full-screen modes. PicLens automatically does this for you.

Specifically, PicLens scans the <item> tag in the Media RSS feed for the <link>, <media:thumbnail>, and <media:content> tags, and to find a match with the URL specified in the <a href> tag in your HTML.

The URLs can be relative or absolute, as long as they resolve to the same absolute URL.

Example:

The item in your Media RSS feed with this link tag:


     <link>pl_images/A.jpg</link>

Will be paired up with image on your HTML page with this anchor tag:


     <a href="pl_images/A.jpg"><img src="images/A.jpg"></a>

Step 4 — Add a PicLens Badge to Your Site (Optional)

Let your visitors know they can enjoy your site in full-screen, 3D, by placing a PicLens badge on your site. Right-click and then select "Save Image As" to save the badge below.

Add an anchor tag to your HTML code so that visitors are directed to www.piclens.com when they click the badge. For example:


          <a href="http://piclens.com" target="_blank">
             <img src="http://yourwebsite.com/images/piclens_badge.gif">
          </a>

Activate PicLens Lite on Your Site

Activating PicLens Lite on your site will allow visitors who don't have PicLens installed on their browser to enjoy immersive slideshows in a slick filmstrip-styled presentation that mimics the PicLens full-screen mode. Activating PicLens Lite involves two easy steps in addition to the instructions above.

Step 1 — Add Javascript Code

Copy and paste the highlighted code below into the header section of the webpage where you want to make PicLens Lite available.


      <head>
        <title></title>
        <link rel="alternate" href="photos.rss" type="application/rss+xml" 
          title="" id="gallery" />
        <script type="text/javascript" 
          src="http://lite.piclens.com/current/piclens.js"></script>
      </head>

The javascript line points to the PicLens Lite launcher on our site, and should not be modified.

Step 2 — Add a "Start Slideshow" Button

Copy and paste the higlighted code below into the body section of your webpage. This line just invokes the JavaScript code that launches PicLens Lite.


      <a href="javascript:PicLensLite.start();">Start Slideshow 
          <img src="http://lite.piclens.com/images/PicLensButton.png" 
          alt="PicLens" width="16" height="12" border="0" 
          align="absmiddle"></a>

Alternatively, of course, you can save the button image on your own server and point to it.

Adding Advanced Features

Adding advanced features such as pagination, custom logo, music, and video, involves making simple edits to your Media RSS Feed. At this time, video and music support is only available on PicLens Lite, and not yet available for the PicLens browser addon.

If you are using PicLens Publisher, edit your your Media RSS file so that it has this declaration:


      <rss version="2.0"
      xmlns:media="http://search.yahoo.com/mrss"
      xmlns:atom="http://www.w3.org/2005/Atom">

And not this:


      <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss">

Multiple Albums on a Single Page

Suppose you wanted to a single webpage to have an album of vacation photos and another album of friends and family? That's easy to. Just create two separate feeds, i.e. photos1.rss and photos2.rss, and then declare them both at the top of your HTML page.


  <head>
    <title></title>
    <link rel="alternate" href="photos1.rss"
          type="application/rss+xml" />
    <link rel="alternate" href="photos2.rss"
          type="application/rss+xml" />
    <script type="text/javascript" 
      src="http://lite.piclens.com/current/piclens.js"></script>
  </head>

Multi-Page Support

Instead of having one huge RSS feed of content, you can page it into as many individual feeds as you'd like. It's quite simple to do.

In your Media RSS feed, just link each feed with <atom:link rel="previous"/"next".../> tags inside the <channel> element, e.g.


  <channel>
    <atom:link rel="previous" href="http://mysite.com/feed1.rss" />
    <atom:link rel="next" href="http://mysite.com/feed2.rss" />

You can even link feeds from different domain names, if you'd like:


  <channel>
    <atom:link rel="previous" href="http://mysite.com/photos.rss" />
    <atom:link rel="next" href="http://myothersite.com/photos.rss" />

Custom Logo

To add a custom logo to your slideshow, the following tag beneath the <channel> tag:


      <channel>
          <atom:icon>http://www.mywebsite.com/images/logo.gif</atom:icon>

You may use any image (PNG, JPG, or GIF). A 26-pixel high logo will fit nicely into the top bar.

Music

Available for PicLens Lite only at this time. To add a background track to your site, upload an MP3 audio file to your website's server, and then add a new entry into your Media RSS file. Under the <channel> tag, insert an <audio> tag:


  <channel>
      <atom:link rel="enclosure" type="audio/mpeg" length="1337" 
      href="http://mywebsite.com/music/backgroundmusic.mp3"/">

The url field should point to your MP3 file. For an example, check out this RSS file (NOTE: You may need to click and and then view source from your browser to see the code, or simply "right-click" and "save as" to download this file). This updated gallery includes the background music.

Video

If you look closely at your photos.rss file, you will see that each media item is represented by an <item>.....</item> tag. In other words, you can manually build an RSS file by adding new <item> entries. So, to add video, you simply point to an FLV video file hosted on your website and change the content type tag. For example:

      
  <item>
      <title>Chelsea</title>
      <link>http://www.chelseafc.com/</link>
      <description>Chelsea Football</description>
      <media:thumbnail url="pl_videos/Chelsea.png"/>
      <media:content type="video/x-flv" url="pl_videos/Chelsea.flv"/>
  </item>

Here's an example Media RSS feed with video (NOTE: right-click" and "save as" to download), and a video-enabled gallery.