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.
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: