Feb 272017

I have just released Photonic Version 1.64, with quite a few big features:

  1. Masonry Layout
    Masonry layouts had never been a part of Photonic because, to be honest, I never got results that I desired with the jQuery Masonry script. So after 6 years of the plugin’s existence when I decided to integrate Masonry, things went swimmingly at first … until I tried testing the “Show More” functionality of Photonic. Try as I might I wasn’t able to make Masonry play nicely with dynamically added content. Eventually I gave up and went a different route – CSS3 columns. This worked out a lot better, and all I needed to do was provide a jQuery Masonry escape path for IE9 and its older brethren. You can now trigger the Masonry layout by setting layout='masonry' in the shortcode. See examples in the Layouts page.
  2. Mosaic Layout
    I wasn’t content with just providing the Masonry layout this time, so I provided another – a Mosaic layout. I must confess that ever since I saw JetPack’s tiled galleries, I have wanted to provide this feature. In fact, almost a year back I tried to implement this, then gave it up and built out the Random Justified Grid instead. The challenge had always been that Jetpack only deals with images on the local server, so it can compute heights and construct the layout in the back-end PHP, while Photonic predominantly deals with images outside the local server, making it impossible to do computations in the back-end. The solution had to be based in JavaScript.

    I looked at several third-party scripts to help build this functionality (Packery, CSTiles, and more), but nothing seemed to fill out gaps properly with images of varying sizes. Eventually I bit the bullet and built out the script myself. It wasn’t very difficult once I had the algorithm and a plan to do the layouts sorted out, and I was eventually done. Take a look at the finished product. You can activate the mosaic layout by setting layout='mosaic' in the shortcode.

  3. Enhancements to Native WP Galleries
    There were three things missing from native WP galleries that existed for all other gallery providers – deep-linking / social sharing, “Show More” capabilities, and an ability to enable / disable lightbox linking. All of these have been addressed in this release.
  4. Thumbnail Effects
    I have added options for some thumbnail effects. So far Photonic used to display a somewhat opaque layer on thumbnails in the square and circle layouts, while others would show with no such effect. In this release I have added an option to zoom upon hover, and I have provided separate options for the different layouts. You can control the effects from Photonic → Settings → Generic Options → Layouts.
  5. SmugMug Folders
    I have added support to display SmugMug folders. See the usage here. As a related change, the SmugMug helper (Photonic → Helpers) shows folder information as well.
  6. Larger Images in Instagram
    So far only the documented Instagram sizes were supported by Photonic – 150px × 150px, 320px × 320px and 640px × 640px. In this release I have added support for the undocumented sizes – 1080px × 1080px, 1080px × 1350px and 1080px × 566px.
  7. Other Additions
    1. Added an option to auto-start slideshows in the slideshow layout. See Photonic → Generic Options → Slideshow Settings → Prevent Slideshow Autostart.
    2. I added a popup attribute to the shortcode, which overrides the “Bypass Popup” capability (Photonic → Generic Options → Overlaid Popup Panel → Enable Interim Popup for Album Thumbnails). It takes the values hide and show.
    3. I added the slideshow options to the shortcode editor for all galleries. Previously this was only present for native WP galleries.
  8. Bug Fixes
    There are a few minor bug-fixes in this release:

    1. I fixed a corner-case issue with the random layout – if the post content width was being rounded up (e.g. 549.8px became 550px), some widths were not being computed correctly, causing the layout to break.
    2. There was a mismatched HTML tag appearing for single-photo displays, which has been addressed.
    3. I corrected a minor styling issue for the preview button in the WP editor that occurred when the back-end shortcode editor was active.
    4. There was an issue with deep-linking working with Image Lightbox, wherein if the same image was repeated in different galleries, the deep-link would show up from the first instance.
Feb 132017

Photonic Version 1.63 has been released with two major updates requiring contrasting levels of development skill:

  1. TinyMCE Integration
    One of the most frequently raised support topics for Photonic was that upon inserting a gallery the user was presented with “No Items Found”. In each of those instances, upon performing troubleshooting what I found is that the user was reporting what he / she was seeing in the back-end Visual Editor, not what was on the front-end. In fact, in almost all of these cases, the front-end would show the gallery perfectly. The issue was not that the shortcode wasn’t working, rather the shortcode wasn’t integrated with the TinyMCE script of WP, and this had been a documented shortcoming of the plugin (in the FAQ section) since one of the early releases. This shortcoming caused a lazy troll not bothered to read documentation to provide Photonic a single-star rating on WP.

    In any case, starting with Version 1.63 Photonic offers integration with TinyMCE. What this means is that if you insert a gallery with your Visual Editor, you will no longer be presented with this:

    Visual Editor showing nothing in the Gallery

    Instead you will see something that makes a little more sense:

    A placeholder for a Flickr Gallery. The placeholder shows the logo of the provider, so you will see the Picasa logo for Google Photos, the SmugMug logo for SmugMug galleries etc.

    Clicking on the placeholder will let you edit the properties of the gallery.

    Change the attributes of the gallery

    There was a reason this hadn’t been developed until this point – it was insanely difficult! In fact among all the integration I have had to do for Photonic until this point, this has been the hardest. As of now, though the feature has been implemented, there is a likelihood of conflicts with other plugins. So if you do come across conflicts, please bring them to my attention. Please note that in case of conflicts you can disable the visual editing capability (Photonic → Settings → Generic Options → Generic Settings → Disable shortcode editing in Visual Editor), which will still let you edit the shortcodes by hand in the “Text” editor.

  2. StripJS Lightbox Support
    If the integration with TinyMCE was the hardest thing I have had to do, the integration with StripJS was one of the easiest. It literally took me less than an hour to get this integration in place. Strip describes itself as “an unobtrusive lightbox”, meaning it doesn’t occupy the entire screen, rather it takes up the space to the side of the screen.

    Strip is distributed under the Creative Commons BY-NC-ND 3.0 License (CC-BY-NC-ND 3.0), which is incompatible with GPL, so I cannot bundle it with Photonic. However, there is nothing stopping you from using the script. See here for instructions. Do bear in mind that you are responsible for following the licensing restrictions of Strip.

  3. Lightgallery Fixes
    A couple of fixes have been put in place for the Lightgallery script – when the “download” capability was being used with Firefox, it didn’t work for external providers. This has been rectified for Flickr, SmugMug and Picasa. Another issue was that when you opted to not display captions if they were blank, Lightgallery would still show them in the lightbox. This too has been addressed.

Good luck with this release!

Feb 122017

I have stopped working on Suffusion (and supporting it in any form) after it was pulled from the WordPress repository. However, there were several requests for the code to be made available for download. I have finally put up a version at GitHub. There are two folders available there:

  • code – Contains the raw code used for the theme. I have ensured that all of it is current as per version 4.4.9, and that a couple of corrections required have been included.
  • dist – Contains the zip files for the code. You can use the 4.4.9 version (the last available version from WP), or the 4.5.0 version. The 4.5.0 version contains the corrections cited above.

Please note that I am not resuming development for the theme – keeping up with an obstructionist Theme Review Team is too cumbersome (apparently now Custom CSS is not allowed in themes!!). There will potentially be a point of time in the future when the currently available versions will cease to be compatible with WordPress. As of now the theme runs fine with WP 4.7.2.

Jan 312017

Version 1.62 of Photonic is now out. The following are included in this release:

  1. Slideshow Layout
    Up until now the native WP galleries could be displayed in a slideshow mode, by setting style='no-strip', style='strip-below' or style='strip-above'. Now you can do this for any type of gallery. Since the other galleries don’t have a style attribute, you can pass this value to the layout attribute. In addition, there is a new value it takes, strip-right, that shows a thumbnail strip to the right of the slideshow.
  2. Replacement of jQuery Cycle
    The jQuery Cycle library has been a staple of my WP projects since 2009. But while being extremely powerful, it was hard to make it work in a responsive fashion, and touch gestures were not integrated into it. The author of the plugin had released a new version, Cycle2, but Cycle2 cannot coexist with Cycle (which is used by Suffusion). Since WP yanked Suffusion from the repository, I have no means to modify it – as a matter of fact, replacing Cycle was what I was working on when Suffusion got pulled. So, rather than risk conflicts for users of Suffusion using Photonic, I figured out an alternative – a new slideshow library! I settled on Lightslider. This is a lot smaller than Cycle, it is responsive and touch-friendly out of the box, and has just 2 transition effects (fade and slide) instead of the buffet that came with Cycle.
  3. Trimmed Down Back-End
    Since the early days of Suffusion I have had a mechanism to display the back-end options, which I kept in place for Photonic as well. I finally cut the cord on that and re-styled the back-end to use native WP features. This removed the dependence on jQuery UI, which was often causing conflicts with rogue plugins. The new back-end has a different look, and reduced size and load-time.
  4. Lightgallery Lightbox
    I have added support for the Lightgallery lightbox script. This is a nice-looking but heavy script by the same author who wrote Lightslider. Feel free to give this a spin.
  5. New “Getting Started” page
    In your back-end, under Photonic you now have a linke, “Getting Started”. This is a compendium of links for high-level capabilities of the plugin.
  6. New Shortcode Attributes
    In line with the slideshow layout a bunch of new parameters have been added to the shortcode:

    1. controls – Shows “Previous” and “Next” buttons. Accepted values: show and hide
    2. caption – Overrides the caption content back-end setting for a gallery. E.g. title will always attempt show the title, even if blank, and title-desc will show a title if one exists, and a caption otherwise. Accepted values are none, title, desc, title-desc, desc-title.
    3. thumb_size and main_size – controls the sizes to be used for a gallery, overriding the thumbnail and main image sizes set in the back-end.

Have fun with this release!

Jan 172017

Version 1.60 of Photonic is now out. This version has the following updates:

  1. “Count” support in SmugMug
    Photonic interfaces for all providers have had a capability to restrict the number of photos pulled. Flickr has per_page, Google Photos / Picasa max_results, Zenfolio limit, 500px rpp (results per page), and Instagram count. The big exception to this rule was SmugMug, because SmugMug API v1.3 didn’t support this capability. However, API v2 supports it, and oversight on my part while implementing it for Photonic v1.57 caused me to skip it. This has been rectified, and now you can get a specified number of photos for SmugMug.
  2. “Load More”
    The above capability has made it easy for me to provide a “Load More” feature. Let’s say your album has 355 photos, and you want to display 100 photos in the beginning so as to not overwhelm your site’s visitors. Photonic so far lacked a capability to display the remaining photos on the same page. You can now pass an additional more parameter to the shortcode, which Photonic then knows to interpret as being asked to show a button. Whatever value you pass to the parameter will become the text of the button. So, more='Load More' will show a button with text “Load More”, while more='More …' will show a button with text “More …”.

    This feature uses “lazy loading”, so unless you click on the button the new batch of 100 photos (or whatever your count parameter specified) will not be fetched from the server, and the old set of existing photos will not be re-fetched.

  3. Lightcase Lightbox Support
    I have added support for the Lightcase lightbox script. This script is a bit heavy (25KB minified) compared to the last 2 scripts I added support for (Swipebox and Image Lightbox) and it requires third-party touch plugins, but it looks pretty nice. I did some optimization on the CSS (16KB), which originally used a custom font that added quite a few KB and files to the volume, and replaced it with CSS animations for the icons.
  4. I have fixed a bug with the “Image Lightbox” script wherein if interim popups were enabled, clicking on an image in the interim popup wouldn’t show the lightbox.

Enjoy the update!

Jan 122017

I have just released version 1.59 of Photonic. This is a very big release, with a lot of far-reaching changes:

  1. Rewritten Instagram Integration:
    Some time in June 2016 Instagram made several changes to its API. Every service provider makes changes to APIs (SmugMug has done it, Twitter has done it, and, notoriously, Google has done it with Picasa). Among things removed from Instagram’s API were popular photos and a few other things… and the changes broke Photonic. What messed things up rather badly, though, was that every Client ID (API key) was by default pushed into a highly crippled “Sandbox mode”, and every level of privilege that you seek for your Client ID to move it from its Sandbox to Production requires a labyrinthine round of approval. To the best of my knowledge Instagram is the only provider with an API that does this.

    Now, if every user of Photonic were to get stuck in this quagmire of requesting approvals for Instagram, they would require at least one week in addition to creating a screencast (!!) for the approval. The alternative would be to get an API key in Sandbox mode, which never returns more than 20 photos.

    So I put in place a different method of displaying Instagram content. Rather than than having users get their Client IDs (in Sandbox) from Instagram, they can use mine to obtain an “Access Token”. I have outlined the procedure on the Instagram page.

    I have, however, hit a hitch. Over the past 10 days I have been trying to get Instagram to approve Photonic for displaying all public content (including hashtags and locations), however they have refused. So far Photonic has only obtained “Basic” permissions, which will allow a user to display his or her own photos. But I still haven’t been successful in getting the “Public Content” permissions, which lets brands / advertisers / marketers / publishers display content by hashtags and locations. I am continuing my fight, but I am not sure if I will succeed anytime soon.

  2. Rewritten Picasa Integration:
    My frustration with the Google’s rewrite of the Picasa API is well known. However, my rewrite of the Instagram integration switched on the proverbial light-bulb with respect to Picasa. Enter “Back-End Authentication”, or “Server-Side Authentication”. Using this approach you will be able to show your users photos that you are allowed to see, not what they are allowed to see. This has several advantages over the traditional “Front-End” or “Client-Side” authentication. I have explained this in-depth on the Picasa documentation page. This completely eliminates the restrictions imposed by the Picasa API around private and protected albums.

    The Picasa rewrite has introduced a couple of new parameters for the Picasa shortcode, namely access and protection. Again, these are explained in the documentation page.

  3. Lazy Loading Flickr Collections
    Flickr’s Collections API is very inefficient, causing long load times if you have many albums in your collections. To counter this I introduced a concept called “lazy loading” of the collections. The details are explained in the Collections documentation.
  4. New Lightbox – Image Lightbox
    I have been considering the addition of several new lightbox scripts over the past couple of months. I finally got around to adding support for an ultra-lightweight one – Image Lightbox. The minified script is only 6KB, and it definitely looks pretty nice.
  5. Other Changes
    1. I fixed a “Headers already sent” error for password-protected Zenfolio albums.
    2. Swipebox in FireFox was throwing an “Event not defined” error. That has been rectified.
    3. I added a new “headers” parameter for Flickr, SmugMug and Zenfolio, where the album / set / gallery / collection header display may be controlled via the shortcode. It can take a comma-separated list consisting of thumbnail, title and counter, to show those specific elements.

Hope you enjoy the update!

Dec 292016

At the cusp of the new year, I have released a new version of Photonic with some big, and difficult changes.

  1. Deep-Linking
    This has been a very, very difficult thing to implement. Every image in a Photonic gallery is now assigned a unique id, which, when appended to the URL, is called a deep-link. This was pretty easy to implement. But, when you open an image in a lightbox, the URL in the browser should change to reflect its id, and when you navigate using the lightbox, the URL should change to reflect the new image. And when someone opens this deep-link in a browser, it should automatically launch the image in a lightbox. This was the hard part, thanks to the different lightboxes and scenarios that I had to account for. You can control deep-linking from Photonic → Settings → Generic Options → Generic Settings → Deep Linking. That being said, a couple of things don’t work:

    1. I couldn’t get it working for Fancybox. But I did get it working for Fancybox2. So it works for Swipebox, PrettyPhoto, Colorbox and Fancybox2. If you are curious about using Fancybox2 as your lightbox, see this.
    2. If you are diplaying an album as a thumbnail, and upon clicking it, it launches a slideshow, the deep-links for the images show up in the browser. However, if you provide this link to someone, it will not automatically launch the image in a lightbox. For all other scenarios the lightbox opens up correctly.

    This brings me to the next big change …

  2. Social Sharing
    When you open a deep-link in the browser and the lightbox shows up, it will show you sharing icons for Facebook, Twitter and Google+. You can then share deep-linked image, which will let others access your photos directly. Social sharing can be controlled from Photonic → Settings → Generic Options → Generic Settings → Social media integration, and will not be active.
  3. Other Changes
    1. Another big change is the addition of “Bypass popup” support to all lightboxes supported by Photonic. Previously Photonic supported this mode in Swipebox and PrettyPhoto only, but now it is available in Fancybox, Colorbox and Fancybox2 as well. This is on by default, and you can switch it off from Photonic → Settings → Generic Options → Popup Panel → Enable Interim Popup for Album Thumbnails.
    2. I have added a hook, photonic_modify_title to apply a different title for photos.
    3. I have enhanced the support for Fancybox2, amongst third-party lightboxes, adding popup bypassing, thumbnail and touch gesture support.
    4. In case an image has no title, and lightbox linking is disabled, the plugin will now not show the “View” text in the lightbox.
    5. I have fixed a Smugmug bug that was causing the album headers to show up twice.
    6. There were Fancybox styling issues in certain themes, like Twenty Fifteen and Twenty Sixteen, which I have addressed.
    7. A while back Smugmug had introduced some new image sizes – I have got them added to the options.

Deep-linking and Social Media Integration is only available in expensive premium lightboxes, so I am happy to be able to bring this to you for free.

Hope you like this release, and have a Great New Year!

Dec 102016

As outlined in my previous post, I updated Photonic to use the latest version of Smugmug’s API, v2. Apparently this causes your API keys to stop working unless you provide some authorization. Don’t worry – it is a lot easier than it sounds. This is what you do:

  1. Login to your Smugmug account.
  2. Go to the API Terms of Service at https://api.smugmug.com/api/developer/accept.
  3. You will be presented with this screen:
    Smugmug API v2 Terms of Service

    Smugmug API v2 Terms of Service

  4. If you accept the terms of service, select the two checkboxes and click “Accept”.

That’s it. You should be good to go! Please let me know if it doesn’t work.

Dec 092016

It has been such a long time since I released a Photonic update! In fact, this is my first WP contribution in a long time.

As per my original plan I intended to replace JQuery Cycle in Photonic and Suffusion at the same time with JQuery Cycle 2, and I had started making the changes. But with Suffusion being pulled from the repository in June, updating Photonic would cause a software incompatibility. So I had to reverse all the JQuery Cycle 2 changes, and focus on newer things. As a result this ended up being a big update.

These are the changes I put in:

  1. Smugmug Updates
    • Quite some time back Smugmug declared v1.3 of its API deprecated. So I updated the code to use to version 2 of the Smugmug API. This was a herculean undertaking, as I had to go through a long process to ensure that things were not broken. Things had changed fundamentally between the two versions, and I spent several days working with Smugmug support to ensure smoother integration with WP. Eventually it got done. This resulted in improved performance, and better support of titles, captions and highlight images.
    • As a direct consequence of the above, you now only require the album_key instead of both, the album_id and album_key. See the Smugmug Photos page for details. Your existing shortcodes will work, though.
    • I added full support for password-protected albums in Smugmug. To see an example go to the Smugmug Albums page and try opening the Bushveld album with the password Saffa.
    • I added more information to the Smugmug Helper (Photonic → Helpers). If you are authenticated it will show you album information for password-protected albums as well.
    • Note that if you are using Smugmug authentication, you will need to define a Callback URL for your API key. This wasn’t a requirement earlier.
  2. Zenfolio Updates
    • Just like its competitor Smugmug, Zenfolio too got the support of password-protected albums. See the Groups and Photosets pages for examples.
  3. Picasa / Google Photos
    • Unfortunately here it is not all good news. One of the reasons I restarted work on Photonic was that Google had moved away from PicasaWeb. It turns out that the move has been rather draconian. They have made it impossible to make a new, public album in Google without third-party APIs or lengthy workarounds, they have completely killed the authkey option that existed in Picasa, and they have made sure that the new “Share URL” option for albums only works for authenticated users. In short, they have adopted a Facebook-style photo-sharing approach rather than their more robust competitors, Smugmug, Zenfolio and Flickr.

      They had also made it impossible to determine album ids easily, for which I added a solution. I introduced a Picasa Helper (Photonic → Helpers) that is capable of listing out all your album ids.

  4. Miscellaneous Changes
    • For Flickr / Smugmug / Picasa / 500px, I added a filter attribute to the shortcode, which lets you pass a comma-separated list of Albums / Photosets / Galleries / Collections for which thumbnails should be displayed, rather than the entire list of such entities. You can see examples on most of the help pages, e.g. Smugmug Albums.
    • A rather minor thing, but I added a “loading wheel” that would show up while the images on your site were rendering.

That’s about it. Do let me know what you think of this update.