Layouts

 

One of the key strengths of Photonic is the number of layouts it offers. There are thumbnail-based layouts, as well as slideshows and beautiful arrangements of tiles. All layouts except the slideshow layouts are capable of launching lightboxes.

For all types of galleries the default layout is set from Photonic → Settings → Generic Options → Layouts → Image Layout. This setting can be overridden by passing layout='...' for third-party providers, and style='...' for native WP galleries. The following are the permissible values for layout / style:

  1. square – Shows a grid of square thumbnails. Clicking a thumbnail launches a lightbox.
  2. circle – Shows a grid of circular thumbnails. Clicking a thumbnail launches a lightbox.
  3. strip-below – Shows a slideshow, with a strip of thumbnails below.
  4. strip-above – Shows a slideshow, with a strip of thumbnails above.
  5. strip-right – Shows a slideshow, with a strip of thumbnails to the right.
  6. no-strip – Shows a slideshow, with no thumbnails.
  7. random – Shows a random, justified grid. Clicking a thumbnail launches a lightbox.
  8. masonry – Shows images in a masonry layout. Clicking a thumbnail launches a lightbox.
  9. mosaic – Shows a random mosaic, like the Jetpack tiled gallery. Clicking a thumbnail launches a lightbox.

Square Thumbnails 🔗

As the name suggests, this displays a grid of square thumbnails. My site’s setting has square thumbnails as the default, so I can omit the parameter. However, even if I pass the parameter explicitly there is no harm done. The following illustrates square thumbnails from a Zenfolio photoset:

[gallery type='zenfolio' view='photosets' object_id='p619593020' limit='10' layout='square']

This is triggered by setting layout='square'.

If you look at the configuration options for each type of provider, it lets you specify whether you want to constrain the number of thumbnails per row, or whether you want to just set a padding around each thumbnail and have the layout adjust itself.

Constrain by Number or Padding

I prefer to constrain by padding, as it adapts better to responsive layouts. You can set very low values for the padding to make the images stack up close to one another.

Circular Thumbnails 🔗

Similar to the square thumbnail grid, the circular thumbnail layout creates a grid of circular thumbnails. This is triggered by setting layout='circle'. In the following example I have shown a set of 500px photos in a grid of circular thumbnails:

[gallery type='500px' feature='user' username='sayontan' rpp=20 layout='circle' thumb_size=2]

Slideshows 🔗

Now we get into the more fun layouts! The first is the slideshow layout, which displays a perfectly responsive slideshow. This layout is triggered by setting one of the following values to the layout attribute (style for native WP galleries):

  • strip-below
  • strip-above
  • strip-right
  • no-strip

While displaying a slideshow, a lot of implicit parameters come into the picture, which can be overridden via the shortcode:

  • fx – Can take values fade or slide, defaults to slide.
  • speed – Takes numeric values in milliseconds, determines the speed of transitioning of slides.
  • timeout – Takes numeric values in milliseconds, determines the pause between two slides.
  • pause – Takes values 0 (no pause) and 1 (pause), determines if the slideshow should pause upon hovering on it.
  • controls – Takes values show and hide, and shows “Previous” and “Next” buttons on the slideshow.
  • columns – Can take positive integer values. If set, it displays the specified number of images in the slideshow’s viewing area, not just a large single image.
  • strip-style – Takes values thumbs (the default) and buttons. If set to buttons, and if the layout / style parameter is set to strip-below, strip-above, strip-right, it shows buttons below the slideshow, replacing the thumbnails from the thumbs setting. Note that the thumbnails can be displayed below, above or to the right of the slideshow, while the buttons can only be displayed below.

The following uses:

[gallery type='default' id='1086' style='strip-below' strip-style='buttons' controls='show']
  • Birds Through Branches, Niagara
  • Bird on a Branch, Niagara
  • Arabian Sea, Anjuna Beach (Goa)
  • Merlion, Singapore
  • Python, Singapore
  • Bellagio Flower Garden, Las Vegas

A word about the responsive behaviour of slideshows – when you start resizing the window and the size drops below 800px, the slideshow switches to start displaying 2 columns (unless you started with 1 column), and when you further drop below 480px it switches to start displaying a single column.

Random Justified Grid 🔗

The next layout is the Random Justified Grid. This is triggered by setting layout='random'. It displays photos in a neat, responsive grid of justified images, in a manner such that all images in a row are shown with the same height, and all rows’ edges are aligned to each other.

If you would like your images to be of a certain minimum height and have a specific gap between them, you can control the settings from Photonic → Settings → Generic Options → Layouts → Random Justified Gallery – Minimum Tile height and Photonic → Settings → Generic Options → Layouts → Random Justified Gallery – Padding respectively.

The following is an example of a Random Justified Grid showing a Flickr album:

[gallery type='flickr' user_id='57549557@N07' per_page=30 view='photos' layout='random']

Masonry 🔗

While I started on the Masonry layout using the Masonry script, I quickly came across several limitations that prevented it from behaving correctly when new images were added to a gallery (e.g. via the “Load More” feature). Eventually I gave up, and went the CSS3 route. The downside of using CSS3 is that IE only supports it from IE10 onwards. So for those cases I went ahead and put in a plug to use the Masonry script for IE9 and older versions of IE. There will be some layout issues for people using IE9 to view a masonry gallery with “Load More”, however I figured that this was a significantly small cross-section of people.

The Masonry layout is triggered by layout='masonry'.

The number of columns in the Masonry layout appearance is controlled by two things: the columns parameter of the shortcode, and the setting in Photonic → Settings → Generic Options → Layouts → Masonry Layout – Minimum Column Width.

  • Let’s say you specify columns='2', and your content is 600px wide, while the minimum column width is set to 200. In this case you will be shown 2 columns, each 300px wide (inclusive of padding). Upon shrinking the window the columns will progressively narrow down, until they get to 200px wide, at which point your layout will switch to a single-column layout.
  • On the other hand, if you specify columns='auto' and your content is 800px wide with a minimum column width of 250, you will get 3 columns approximately 267px wide. If your content shrinks down to < 750px, you will switch over to 2 columns, and so on.

In other words, the minimum column width dictates how many columns will be shown based on the width of your content.

The following is a set of photos from a Picasa album in the Masonry layout:

[gallery type='picasa' user_id='kokonad' album='CorningGlassMuseum' max_results=30 layout='masonry']

Mosaic 🔗

Activated by layout='mosaic', the Mosaic layout is inspired by the JetPack Tiled Gallery layout, but with a few significant differences:

  • JetPack relies on images that are local, then computes the sizes in the back-end in PHP and does some sort of a “best fit”. But since Photonic, for the most part, shows images that are not on your server, the computation happens the front-end in JS, after the images are downloaded to the user’s browser.
  • As stated above, JetPack computes a “best-fit”, so there are several cases where images show up cropped. That doesn’t happen for Photonic. Photonic’s Mosaic layout gets you perfectly resized images, without any cropping.
  • When you resize your window with a JetPack gallery, all thumbnails shrink proportionately, and at one point you might have very tiny tiles. But in Photonic the layout gets recomputed so as to keep your thumbnails from getting too small.

As with the previous two layouts, Photonic lets you control the Mosaic layout by means of the setting, Photonic → Settings → Generic Options → Layouts → Mosaic Layout – Trigger Width. Essentially Photonic will not try to cram too many tiles into a row of the Mosaic layout. The number of images is controlled by the following equation:

Number of images = Math.floor(Width of content / Trigger Width)

So, for a wide layout you will get more thumbnails in each row, while for a narrow layout you will get fewer.

The following is a SmugMug album displayed as a Mosaic:

[gallery type='smugmug' view='album' album='zCKf5m' layout='mosaic' password='Saffa']

Layout Oddities 🔗

There are certain corner cases that need to be noted:

  1. It is not possible to show the title below the tile in a Random Justified Grid, or the Mosaic Layout.
  2. For both, square and circular thumbnails, you can make the layout centrally justified by adding this custom CSS to your child theme:
    .photonic-standard-layout {
        justify-content: center;
    }
    

    The reason the above is not a part of the core is because if your last row has fewer images than the others, then they also get centrally justified, and can be misaligned with the rows above. So rather than put in the code, Photonic offers you the choice to handle it at your end!

  3. If you set a padding of 0 between the tiles in the Mosaic Layout, it can, in some cases, lead to 1px lines between the tiles. This is because of JavaScript rounding issues. To avoid this, it is advisable to keep the padding at a positive integer value, such as 2px.