Mobile-Friendly Non-Flash Picasa Photo Slideshow

The death of Flash has left Picasa users stranded as Flash is the only official way Google is offering for embedding slideshows into blogs and websites. Flash is not mobile-friendly, and many users have disabled it thanks to security issues. How to embed Picasa slideshows into blogs and website without flash?

Why not iframe or slidemypics?

It was possible to show slideshows using iframe until Picasa website started sending X-Frame-Options (XFO) headers to prevent clickjacking. Now it would require using a reverse-proxy for getting rid of XFO, making it both slow and dependent on the proxy provider. Another solution is to use a third party webservice called slidemypics. However, their service requires you to give them your Picasa login and password, which should not be necessary as Picasa API allows unauthenticated access to public albums, and slidemypics might vanish soon leaving you again stranded.

For us, having to fix all slideshows in 200+ posts was not a tempting idea. Instead, we developed the following, more permanent workaround for Blogger. As long as Picasa slideshow link structure remains the same, it works in every web browser and mobile device. Here is an example how it works and what it looks like.

Instructions for Blogger Dynamic Views

First you need to go to Blogger dashboard, select Template, Customize, Advanced, and Add CSS.

.slideshow {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0.9;
  z-index:1;
  background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/YouTube_Silver_Play_Button.svg/100px-YouTube_Silver_Play_Button.svg.png)no-repeatcentercenter;
}

Click Apply to Blog button to save the changes.

That CSS code will show centered play icon on top of the photo linking to the slideshow. You need to do this modification only once.

Now you can use Insert image/From Picasa Web Albums to add the slideshow cover photos to your blog posts.

To do that, you need to customise the following html code that Blogger inserts to your blog post:

<divclass="separator"style="clear: both; text-align: center;"><ahref="http://4.bp.blogspot.com/-mKl4KWvUF_Y/VmP64PCkPNI/AAAAAAAAMGo/0kfKVAelYIU/s1600/blogger.jpg"imageanchor="1"style="margin-left: 1em; margin-right: 1em;"><imgborder="0"src="http://4.bp.blogspot.com/-mKl4KWvUF_Y/VmP64PCkPNI/AAAAAAAAMGo/0kfKVAelYIU/s640/blogger.jpg"/></a></div>

1. Change the link url (starting from <a href=") to the web address of the slideshow.

You can get the address from Picasa: open an album and click Slideshow on the top left corner. After that, you can copy the slideshow address from your browser's address field. Copy the address until "#slideshow", for example https://picasaweb.google.com/113035479725087349147/GlobalNomadCouplePaiviSanteri#slideshow

After that, the html code looks like this:

<divclass="separator"style="clear: both; text-align: center;"><ahref="https://picasaweb.google.com/113035479725087349147/GlobalNomadCouplePaiviSanteri#slideshow"imageanchor="1"style="margin-left: 1em; margin-right: 1em;"><imgborder="0"src="http://4.bp.blogspot.com/-mKl4KWvUF_Y/VmP64PCkPNI/AAAAAAAAMGo/0kfKVAelYIU/s640/blogger.jpg"/></a></div>

This adjustment will make the browser show the whole slideshow instead of a single image.

2. Add the following CSS code to the beginning of the style tag: "position:relative;"

If your image is centered, you need to add it to the first style tag inside div, otherwise to the second style tag. Putting the code to a wrong style tag will result play icons showing in the wrong place. If that happens, move the code to the other style tag and try again.

<divclass="separator"style="position: relative; clear: both; text-align: center;"><ahref="https://picasaweb.google.com/113035479725087349147/GlobalNomadCouplePaiviSanteri#slideshow"imageanchor="1"style="margin-left: 1em; margin-right: 1em;"><imgborder="0"src="http://4.bp.blogspot.com/-mKl4KWvUF_Y/VmP64PCkPNI/AAAAAAAAMGo/0kfKVAelYIU/s640/blogger.jpg"/></a></div>

This change is needed for placing the play icon in the middle of the image.

3. Add the following into the anchor tag a: target="_BLANK" title="View slideshow"

<divclass="separator"style="position: relative; clear: both; text-align: center;"><ahref="https://picasaweb.google.com/113035479725087349147/GlobalNomadCouplePaiviSanteri#slideshow"target="_BLANK"title="View slideshow"imageanchor="1"style="margin-left: 1em; margin-right: 1em;"><imgborder="0"src="http://4.bp.blogspot.com/-mKl4KWvUF_Y/VmP64PCkPNI/AAAAAAAAMGo/0kfKVAelYIU/s640/blogger.jpg"/></a></div>

Tooltip will now tell the viewer "View slideshow", and the slideshow will open in a new tab.

4. Add the following before the closing anchor tag </a>: <span class="slideshow"></span>

<divclass="separator"style="position: relative; clear: both; text-align: center;"><ahref="https://picasaweb.google.com/113035479725087349147/GlobalNomadCouplePaiviSanteri#slideshow"target="_BLANK"title="View slideshow"imageanchor="1"style="margin-left: 1em; margin-right: 1em;"><imgborder="0"src="http://4.bp.blogspot.com/-mKl4KWvUF_Y/VmP64PCkPNI/AAAAAAAAMGo/0kfKVAelYIU/s640/blogger.jpg"/><spanclass="slideshow"></span></a></div>

Thanks to this, the play icon is showing on top of your photo album's cover image, prompting user to click and view the slideshow.

Save, Publish or Preview your post, and you have just created a mobile-friendly, non-flash Picasa photo slideshow in you Blogger Dynamic Views blog. Remember to view and click slideshows to make sure there are no problems. Happy hacking!