WP Galleries

Contents (🔗)

Overview (🔗)

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']

    To set up galleries this way, use WordPress’ native “Add Media” feature, upload new photos… and don’t insert the photos you just added!

  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.

Back to the top ↑

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']

All of Photonic’s layouts – Justified Grid, Masonry, Mosaic and Slideshows – can be applied to native WordPress galleries. See the Layouts page for more examples.

Back to the top ↑

“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.

    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.

  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']
Load More

Back to the top ↑