Photonic Version 2.63 – CLS Reduction, CSS Cleanup

A Happy New Year to Photonic users!

I have just released version 2.63 of Photonic with the following changes:

1. CLS Reduction
   You might be wondering what CLS is. CLS stands for “Cumulative Layout Shift”. This is a fancy term introduced by Google’s PageSpeed team, which refers to the shifting of content when objects are rendered late in the loading of a page. Galleries with heavy images often add to CLS, and this affects your site’s SEO. One way to reduce CLS is to pre-assign the height and width per image. With this release, Photonic does this wherever possible. Some exceptions for this are Instagram photos (the Instagram API returns no sizes) and Google Albums (the display image for an album doesn’t return a size with it unless you make an additional call).
2. CSS-Based Justified Grid
   Ever since I released the Justified Grid layout 5 years back almost to the day, it has been one of my favourite layouts. I have been particularly proud of the pixel-perfect calculations of the layout. With the CLS reduction feature, this release I took the Justified Grid layout a step further and built it up using a pure CSS approach, which does not rely on JS to determine image sizes. The layout switches to CSS-mode if all image sizes are available, and stays in JS-mode if even one image size is missing. This works pretty well for the most part, with the exception of a few scenarios that you can read about below.
3. Other Changes
   1. One side effect of the CSS-based Justified Grid was that for cases where image sizes are returned incorrectly by the image platform, the photos are rendered with a broken aspect ratio. I spotted two examples of this in my testing – first, when Flickr had the height and width of a photo flipped, and second, when Google returned an incorrect thumbnail size for a video’s thumbnail. In the first case all I had to do was re-save the photo in Flickr without any change. But for examples like the second case I have introduced a shortcode option layout_engine, which you can set to either css or js. If you pass js to the shortcode / block (Gallery layout processing mode in the Gallery Wizard), it will ignore the sizes returned by the server and will use the natural sizing of the image. If you have many galleries already and many of them are suffering from this problem, you can apply this at a global level from your options, under Photonic → Settings → <Platform> → <Platform> Settings → Layout Processing Mode.
   2. In the last release I had introduced a feature called the “Load mode” (Photonic → Settings → Generic Options → Advanced → Loading Mode). You can now override this per gallery using load_mode='js' or load_mode='php' for the shortcode, or the “Gallery loading mode” setting in the Gallery Wizard.
   3. I did some cleanup of the HTML / CSS associated with Photonic:
      • Images and their captions are now served inside figure and figcaption elements.
      • The slideshow-grid-panel CSS class is now called modal-gallery.
      • Redundant CSS classes – photonic-<flickr etc.>-<image etc.> have been removed to reduce payload size.
4. I fixed a bug with Image Lightbox, Fancybox3, Lightcase and Strip, which was preventing the “Load More” feature from working for albums.

Hope you enjoy the release!