User Tools

Site Tools


ce4_tfwp_embedding_galleries

Embedding Galleries in Posts & Pages

CE4 Theme for WordPress includes support for the [gallery] shortcode. We've rewritten the default WordPress implementation to be more responsive, more fluid and to support Lightbox presentations for large image display.

The easiest way to create a gallery in WordPress is to use the new Media Manager. That procedure is well documented in the WordPress Codex, so I'll not repeat it.

Read about how to create an image gallery in WordPress.

Using the editor's Text view, we can then change the gallery type and properties by modifying the [gallery] shortcode.

All of the gallery types below support the following properties in the standard way:
orderby, order, size, include, exclude.

Additional properties or variant behaviors may be available depending on the gallery type, detailed below.

The default gallery type, displays hyperlinked thumbnails in a grid layout; thumbnails typically link either to the image file itself, or to the image's attachment page.

At it's most basic configuration, the [gallery] shortcode may be written as:

[gallery]

PROPERTIES:

columns
integer

A guideline for the desired number of columns in your thumbnail grid. This is not a static value; the thumbnail grid is fluid.

If columns is less than (content_width / thumbnail_width), then thumbnails will be displayed at their natural size in as many columns as will fit within the content's width.

If columns is greater than (content_width / thumbnail_width), then thumbnails will be scaled down to accommodate the defined guideline.

At predefined breakpoints, depending on device/display width, columns will be ignored.

[gallery columns="5"]

link
file, none, post

  • file - thumbnails link to the image file (good for Photoswipe galleries).
  • none - thumbnails are not hyperlinked.
  • post - thumbnails link to the image attachment page.

If link is unspecified, the gallery will default to “file” when Photoswipe is enabled in Theme Options, and to “post” when Photoswipe is disabled in Theme Options.

[gallery link="file"]

Galleria Slideshow

Displays images in a responsive, mobile-friendly slideshow using Galleria JS. Requires that Galleria support be enabled in Theme Options; if disabled, the gallery will fallback on the default Grid-type gallery.

At it's most basic configuration, the [gallery] shortcode may be written as:

[gallery type="galleria"]

PROPERTIES:

columns
integer

Used to determine the width of the slideshow in relation to the content area's width.

This is a little bit awkward. The slideshow's width is percentage-based and fluid, on a 12-step scale. But WordPress' interface for creating galleries only allows us to choose values ranging from 1-9. Therefore, we've hacked the math a bit …

Values ranging from 1-4 divide into 100 to give us useful percentage widths:

  • 1 - 100%
  • 2 - 50%
  • 3 - 33.333333%
  • 4 - 25%

Values ranging from 5-9 divide into 12, in accordance with our grid framework:

  • 5 - 41.666667%
  • 6 - 50%
  • 7 - 58.333333%
  • 8 - 66.666667%
  • 9 - 75%
[gallery type="galleria" columns="1"]

link
file, none, post

The link property is irrelevant to the Galleria slideshow. If set, it will be ignored.

The stack gallery type will display images in a vertical stack, inline with the post.

At it's most basic configuration, the [gallery] shortcode may be written as:

[gallery type="stack"]

PROPERTIES:

columns
integer

The number of columns in which your images should be displayed.

If set to “1”, then landscape-orientation images will occupy 100% the content-width, while square and portrait orientation images will occupy 50% the content-width; adjacent square or portrait-orientation images will appear side-by-side in pairs.

If set to “2”, then all images will occupy 50% the content-width, appearing side-by-side in pairs.

If set to “3”, then all images will occupy 33.333333% the content-width, appearing side-by-side in triplets.

To eliminate vertical gaps, images appearing side-by-side should be of like height; if you don't mind the gaps, though, this is not a requirement.

If columns is unspecified, the gallery will default to “1”.

[gallery type="stack" columns="1"]

link
file, none, post

  • file - thumbnails link to the image file (good for Photoswipe galleries).
  • none - thumbnails are not hyperlinked.
  • post - thumbnails link to the image attachment page.

If link is unspecified, the gallery will default to “none”.

[gallery type="stack" link="file"]

square
fill, or unspecified

If set, then square images will behave as landscape-orientation images, occupying the full content-width when columns is unspecified or “1”. When columns > 1, square is irrelevant.

[gallery type="stack" square="fill"]
ce4_tfwp_embedding_galleries.txt · Last modified: 2014/07/09 08:14 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.