Thread

I just finished enabling PicLens, a free Firefox/IE/Safari plugin, on one of my EE galleries and thought I’d share how I did it here, in case anyone else finds it useful. 😊

PicLens is a plugin that lets you view web images full screen, zoom through a “wall” of images, watch them in a slideshow, etc:

PicLens instantly transforms your browser into a full-screen, 3D experience for viewing images on the web. Photos will come to life via a cinematic presentation that goes well beyond the confines of the traditional browser window. With PicLens, browsing and viewing images on the web will never be the same again.

Enabling it on any site is actually pretty easy! PicLens works by indexing a special RSS page - that will tell it what images to show, the urls to them, etc. Create a new RSS template in EE (I called mine photo_rss) with the following code in it:

{assign_variable:gallery_name="gallery"}
{exp:rss:feed weblog="default_site"}
<?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>
<logo url="LINK TO SITE LOGO">
<title>YOUR SITE NAME</title>
<link>YOUR SITE URL</link>
<description></description>

{exp:gallery:entries gallery="{gallery_name}" orderby="title" sort="desc" rows="1000" columns="1"}
{entries}
{row}
    <item>
        <title>{exp:xml_encode}{category}: {title}{/exp:xml_encode}</title>
        <link>{id_path=gallery/full}</link>
        
        <media:thumbnail url="{medium_url}" >
        <media:content url="{image_url}" type="" >
    </item>
{/row}
{/entries}
{/exp:gallery:entries}
</channel>
</rss>
{/exp:rss:feed}

Make sure to change the assigned variable at the top if your gallery’s short name is NOT gallery, and change the id_path inside <link> to point to whatever page shows your full-sized image. Alternatively, you can just link to the full image itself by replacing {id_path=gallery/full} with {image_url}.

Then, in the head of your category pages (the ones that show all thumbnails inside a category), add the following code:

<link rel="alternate" href="{path=gallery/photo_rss}{segment_3}" type="application/rss+xml" title="" id="gallery" />

For the first line, change the path to the photo_rss template if you don’t have it in the template group called gallery! Also, the {segment_3} bit is optional. If you take it off, it’ll just show all images in your gallery. In my setup, {segment_3} is the category ID, like C345 or C765. So by adding that into the RSS link, it’ll limit the photo_rss template to only images from that category.

And lastly, add the following code to the body of your category page:

You can add this anywhere you like - I’ve added it right underneath the pagination links personally.

And that’s it! Also make sure you have the PicLens plugin installed too, obviously lol.

You can see it in action on the website I implemented this on, adrianalimafan.net, for example here or here.

Hope I explained that okay - let me know if I was unclear. 😊