The Photonic plugin provides photo-blogging extensions to the WordPress
gallery shortcode. Along with support for Flickr, Smugmug, Zenfolio, Picasa, Instagram and 500px, it provides a host of added functionality with JQuery goodness:
Native WP Galleries
Standard WordPress galleries can be displayed as slideshows either automatically or upon clicking on a thumbnail.
Photonic helps fetch photos from various third-party providers, viz. Flickr, PicasaWeb, 500px, Smugmug, Zenfolio and Instagram. Some of these providers require you to sign up for an API key, and I don’t bundle my own with the app for two simple reasons:
- Potential rate-limiting
Let’s say I had bundled my Flickr API key with the plugin and you were using it to show your photos. If you had several thousand photos, the fetching of those photos would get tagged to my id, potentially marking me as a “high use” individual. Flickr might then decide that since I am using my key so much, it should make me upgrade my level of service, or it might block my API key. These are potentially dangerous for both, me, and the end user. As a result, Photonic enforces the use of an individual’s API key.
Various providers let you control access for who gets to see your photos. If my API key was being used, there would be no way for you to use your access control list.
Of all the providers:
- Flickr always needs an API key.
- Picasa only needs a key if you want to show private photos to select individuals.
- 500px always needs an API key. At the time that I had applied, getting the 500px API key approved used to take a few days. I am not sure how it is now.
- Smugmug needs an API key, which you can create from your user profile page.
- Instagram needs an API key, that you can create from its website.
- Zenfolio doesn’t need an API key
With simple parameters the gallery short-code can now be used to display almost everything from Flickr:
You can also display a Picasa web-album with this extension.
Photos from 500px can be displayed quite easily too.
SmugMug support is built into the plugin as well:
Currently there is no support for viewing password-protected albums along with other, non-password-protected albums from Smugmug. However, photos within individual password-protected albums can be viewed by passing the additional
The following features of Zenfolio are supported:
Currently password-protected photosets or groups from Zenfolio are not supported.
Instagram is not as full-featured as the providers above. Instagram support is provided, keeping in mind that most people use it for social purposes
By using the
layout parameter for the shortcode, you can get three different alignments for your photos.
The following JS libraries are supported for slideshows:
- Fancybox – ~16KB, phased out in favour of the non-GPL Fancybox2.
- Colorbox – ~10KB, actively maintained, lightweight
- PrettyPhoto – ~23KB, very feature rich
- Swipebox – ~12KB, my personal favourite, touch gesture-friendly
The libraries have been tweaked to support external scripts such as JQuery Tooltips (bundled with WordPress), so if you have a different plugin that introduces these scripts, you might have a conflict. In addition, while the first three are not touch-friendly out of the box, I have bundled a script called Touchwipe that adds to them the capability to handle gestures. Swipebox just works out of the box in that regard.
Lightboxes for Non-Photonic Images
Photonic gives you the option of using its lightbox for non-Photonic images as well. This obviates the need for a separate lightbox plugin, and also keeps the look-and-feel consistent across your site. To activate this, go to Photonic → Settings → Generic Options → Generic Settings → Photonic Lightbox for non-Photonic Images and select that option. In all cases where an image is encased within an
<a> tag, Photonic will convert it to a lightbox-enabled link. The lightbox used is the one you have selected for your Photonic galleries.
What if you wanted to group photos together for your lightbox, like a pseudo-gallery? You can use the
rel attribute of your
<a> tag for this purpose. If your lightbox is Fancybox, or Colorbox, or Swipebox, pretty much any name for your groups works, so you could name your
rel attributes thus:
<a href='image1.jpg' rel='group1'><img src='image1-thumb.jpg' /></a> <a href='image2.jpg' rel='group1'><img src='image2-thumb.jpg' /></a> <a href='image3.jpg' rel='group1'><img src='image3-thumb.jpg' /></a> <a href='image4.jpg' rel='group2'><img src='image4-thumb.jpg' /></a> <a href='image5.jpg' rel='group2'><img src='image5-thumb.jpg' /></a> <a href='image6.jpg' rel='group2'><img src='image6-thumb.jpg' /></a>
If you have picked PrettyPhoto as your lightbox, you will need a little bit of special handling for the
<a href='image1.jpg' rel='photonic-prettyPhoto'><img src='image1-thumb.jpg' /></a> <a href='image2.jpg' rel='photonic-prettyPhoto'><img src='image2-thumb.jpg' /></a> <a href='image3.jpg' rel='photonic-prettyPhoto'><img src='image3-thumb.jpg' /></a> <a href='image4.jpg' rel='photonic-prettyPhoto'><img src='image4-thumb.jpg' /></a> <a href='image5.jpg' rel='photonic-prettyPhoto'><img src='image5-thumb.jpg' /></a> <a href='image6.jpg' rel='photonic-prettyPhoto'><img src='image6-thumb.jpg' /></a>
While the basis of the plugin is the tweaking of a shortcode, it can get challenging to remember all the different parameters of the shortcode. So Photonic bundles an insertion script with the Add Image media button in your admin panel: