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.

10 Responses to “Photonic Version 1.64 – Masonry, Mosaic, and Thumbnail Effects”

  1. Hi Sayontan thanks for the updates. Obviously not a minor thing but it would be great if an option to have captions overlayed on images were on the Photonic road map. Would be very useful, to me at least.

    • You mean covering the whole image? There is one to “slide up”, but it only takes up as much space as required, not the whole image.

      • Thanks for replying, I mean a ‘static’ caption like

        • Well, to be honest, I am not a fan of obscuring so much of the image on a permanent basis. You can, however, achieve this with a little bit of custom CSS, having set Photonic to display the title either below or “slideup”. Let me know if you need inputs on how.

          • Understood. Will try and if needed ask for input, thanks again.

  2. Hello
    I just found Photonic 🙂 Awsome work 🙂 Many thanks for that. The only one thing i need to do is add photoswipe. Could you tell me exactly what I need to paste in box “non bundled Lightbox JS and css ? I’m not fluent in coding… Many thanks for that plugin again and sorry for my English .
    Wojciech Gorecki

    • Hi,
      Photoswipe is on my roadmap for the future, but it is not one of those scripts that you can use as “non-bundled”. Basically, for the non-bundled ones, I still have to write code to do several things within the plugin script, which is why only Fancybox2 and Strip are on that list as of now.

  3. Thanks for your answer. Then i will be waiting Impatiently for photoswipe 🙂 Do you know when it will happen?

  4. Great plugin! I installed V1.64. Unfortunately after configuring it I noticed that it disables the slider that we have on our home page 🙁 Is that still the problem with jQuery that I found by researching the problem?)

  5. Hello Sayontan,

    I have a problem. Till 5 days ago tere where nice and good Thumbnails and now they are gone. How is this possibly?

Sorry, comments are closed at this time.