Photonic Version 1.64 – Masonry, Mosaic, and Thumbnail Effects

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.