WP Galleries


Native WP galleries can be displayed much better using Photonic. To display a gallery this is the standard shortcode usage:

 [gallery id='xyz'] 

If the gallery is a part of the same post, then the id is not needed. By default WP’s galleries have this type of an output:

So what can Photonic do? For starters, if you use a style attribute, here is what you get:

  • Birds Through Branches, Niagara
  • Bird on a Branch, Niagara
  • Arabian Sea, Anjuna Beach (Goa)
  • Merlion, Singapore
  • Python, Singapore
  • Bellagio Flower Garden, Las Vegas

The above is generated using the following code:

 [gallery style='strip-below' thumb_width='100' thumb_height='75' slideshow_height='520'] 

The slideshow_height parameter is required for WebKit-based browsers such as Chrome and Safari. Without this, there are overlaps between the slides and everything else below them.

The above assumes some implicit parameters, thumb_size, slide_size, fx and speed.

The thumb_size and slide_size parameters control the WP-resized image that needs to be fetched. This is particularly useful if you have a very large sized original image, in which case slide_size can be used to retrieve a smaller size. By default this is set to large. The thumb_size parameter is used to retrieve the thumbnail displayed. It takes a default value thumbnail. It can be additionally resized using the thumb_width and thumb_height parameters.

The fx parameter can take values from JQuery Cycle’s impressive options:

  • fade
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • slideX
  • slideY
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • zoom
  • fadeZoom
  • blindX
  • blindY
  • blindZ
  • growX
  • growY
  • curtainX
  • curtainY
  • uncover
  • wipe

The default fx is fade, but while invoking a slideshow you could pretty much use any of the other effects from the list above.

The other implicit parameter, speed takes a value 1000. You can specify any other value in milliseconds.

The style attribute can take the following values:

  • strip-below – Displays the thumbnail strip below the slideshow.
  • strip-above – Displays the thumbnail strip above the slideshow.
  • no-strip – Displays just a slideshow, no strip.
  • launch – Displays only thumbnails, which can be clicked to launch a slideshow.

The following illustrates the use of style='launch':

 [gallery style='launch' thumb_width='100' thumb_height='75' columns=6]