WP Galleries

 

WordPress offers gallery capabilities out of the box. Native WP galleries can be invoked in 3 different ways:

  1. Calling the following shortcode displays the gallery attached to the current post:
     [gallery] 
  2. Calling the following shortcode displays the gallery attached to any post. The id refers to the post to which the gallery is attached:
     [gallery id='xyz'] 
  3. The following can be used to display a collection of photos in a gallery:
     [gallery ids='x,y,z'] 

    In the above, x, y and z refer to the individual attachment ids.

Native WP galleries are maintained and supported by WordPress, and any issues and changes with them are beyond the scope of Photonic. For help with galleries, the WordPress Codex is a good starting point.

There is a gallery attached to this post, so I will use the following shortcode to illustrate the default behaviour of WP galleries:

[gallery]

Introducing Photonic for Native WP Galleries (🔗)

So what can Photonic do? Photonic for native galleries is triggered when you use a style attribute. The complete range of values for style is documented in the Layouts page.

Starting with the most basic of Photonic’s layouts, the following illustrates the use of style='square':

 [gallery style='square' columns=6] 

The above is a gallery that is displayed in 6 columns. While it doesn’t appear much different from a default WP gallery, the difference is in how the titles appear, and what happens when you click on a thumbnail – it launches a lightbox!

Setting a numeric value for columns makes the gallery non-responsive, however setting it to auto makes it responsive.

More Fancy Layouts (🔗)

Applying some of the more esoteric layout options starts making the gallery look a lot cooler. The following displays the gallery in a justified grid by setting layout='random':

[gallery style='random']

“Show More” and Paged Results (🔗)

If a gallery has a lot of photos and you want to reduce the count, Photonic offers a couple of approaches:

  1. For WP galleries, use a count attribute and add an additional tag, more. This will initially show you the number of photos specified in count, and a button to load more images. Upon clicking the button you will see an additional set of photos as limited by count. The button will continue to show until you have exhausted the entire set of photos.
  2. If your gallery is on a post (not a page!) Photonic can be used in conjunction with <!-- nextpage --> to display photos in a paged manner. For this you can structure your page content thus in the WP Editor:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta enim vel tellus dignissim, a venenatis neque congue. Nunc ornare cursus leo ac viverra. Pellentesque suscipit pulvinar metus, non aliquam odio egestas quis. Vestibulum porta viverra magna, vel malesuada ante fermentum vitae.
    [gallery type='smugmug' view='album' album='csGcG5' layout='random' count=10 start=1]
    <!-- nextpage -->
    [gallery type='smugmug' view='album' album='csGcG5' layout='random' count=10 start=11]
    <!-- nextpage -->
    [gallery type='smugmug' view='album' album='csGcG5' layout='random' count=10 start=21]
    

    WP interprets <!-- nextpage --> as a page-break and automatically pages the content for you.

Here is an example using the first approach. The text you provide to the more parameter controls what is shown in the button:

[gallery style='mosaic' count=3 more='Load More']

In line with native WP behaviour, if you are passing a defined set of attachment ids (i.e., option #3 from the top of this page), the “More” feature doesn’t work because WordPress disables paging behaviour for such cases.

Slideshows (🔗)

One of the most effective uses of Photonic with native WP galleries is that of a slideshow. As outlined in the Layouts page, you can pass a wide variety of options to customize the slideshow layout. The following will display a strip of thumbnails below your slideshow:

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

Using a combination of the other attributes from the Layouts page (e.g. speed, controls, strip-style), you can tweak the appearance further. The following uses:

[gallery 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