Simple Gallery

You can create a set of images and add them to your OM4 website so they display in a “gallery” arrangement, showing a big image and small thumbnail versions of your image set nearby. Clicking a thumbnail changes the big image to show that particular image.

Clicking directly on the big image triggers a full screen effect with the rest of the page blocked from view.

You’ll need to activate the OM4 Simple Gallery plugin before you can use this (go to Dashboard, Plugins, Installed, then scroll down the list to find Simple Gallery and click Activate).

As this is a relatively new plugin, we haven’t published it for use outside OM4.

Prepare your images

For a good gallery you’ll need a set of images that:

  • are the close to the same physical dimensions we have a detailed Image Preparation Checklist to help you with this
  • have been optimised in terms of file size (Kilobytes) so they don’t slow down loading of the whole page

Check out your images in Windows Explorer or the Mac Finder and make sure you know the dimensions and file size of each of the images you plan to use. You can use a simple image cropping tool to change the dimensions and file size if you need to:

If you are using images from your digital camera, make sure the image quality has been adjusted so the file size (in Kilobytes/Megabytes) is not too large. Aim for about 30-40Kb for smaller images, and no larger than 60-120Kb for full page size images.

It will help here if you standardize your file names – make them all lowercase and use hyphens instead of spaces. For example, instead of Blue Sky.jpg use blue-sky.jpg. This isn’t mandatory, it will just make it easier for you to work with the files.

Upload your images

Go to Dashboard, Media, Add New.

Select the image files and upload them to your website. Make a note of the file names AFTER uploading.

Note WordPress will automatically convert all spaces to hyphens and upper case to lower case. If you did this yourself before you uploaded, you won’t need to worry about file names changing.

When WordPress uploads to a standard OM4 community website, your image files are placed into the /files folder. So to reference a file later, you put /files in front of the file name. If you have an OM4 Standalone website, the files go into the /wp-content/uploads folder.

Set up your gallery

On the page you want your gallery to appear, add the simplegallery shortcode. Any images in the image library that have been “attached” to the page with the simple gallery shortcode will automatically appear in the gallery.+

The shortcode works like this:
[simplegallery]

Save your page and view it to see your new image rotator in action.

Using Shortcode Options

The options listed below can be used in the following way:

[simplegallery optionname="optionvalue"]
(where optionname is one of the options listed below, and optionvalue is the corresponding value for that option)

For example:
[simplegallery thumbnailalign="bottom" largeimagewidth="500" largeimageheight="500"]

Available Shortcode Options

The available options for the Simple Gallery shortcode are below.

thumbnailalign="left"
Thumbnail section alignment. Valid values: left | right | top | bottom.   Default:left.

largeimagewidth="600"
Maximum width of the large image (in pixels).  Default:600.

largeimageheight="400"
Maximum height of the large image (in pixels).  Default:400.

columns="1"
The number of columns for the thumbnails. If columns is set to 0, no row breaks will be included.  Default:1.

size="thumbnail"
Thumbnail image size. Valid values: thumbnail | medium | large default:thumbnail.
The size of the images for “thumbnail”, “medium” and “large” can be configured in
WordPress admin panel under Settings > Media.

cssid=""
Unique HTML/CSS ID/selector for this image gallery.
Default:auto-generated in the format simplegallery_x where x is a unique number.

id="xyz"
The page/post ID to display the images from. The gallery will display images which are attached to that post/page.
The default behaviour if no ID is specified is to display images attached to the current post/page.

include="x,y,z"
Comma separated list of attachment IDs to include in this gallery. include="23,39,45 will show only these attachment IDs.
The default behaviour if not specified is to display images according to the id=""parameter.
See the Gallery Shortcode documentation for more information.

exclude="x,y,z"
Comma separated list of attachment IDs to exclude from this gallery. exclude="21,32,43".
Please note that include and exclude cannot be used together (in that case include="" will take preference)
The default behaviour if not specified is to display all images according to the id=""parameter.
See the Gallery Shortcode documentation for more information.

navigation="1"
Whether or not to display the next/previous navigation. 1=Yes 0=No  Default:1.

fade="out-in"
Options are: out-in | none | over.  Default:out-in

  • out-in: when changing the large image, fade the current image out, and fade the next image in (displays the “loading” message).
  • none: just change the large image with no fading.
  • over: fades the new image over the top of the existing image (doesn’t display a “loading” message).
    For this effect to work properly, all images should be the same size, and the largeimagewidth and
    largeimageheight parameters should be set to this size.

fadespeed="600"
Number of milliseconds it takes to fade in the image. Has no effect if fade=”none”

orderby="menu_order ASC"
The field used to sort the thumbnails. Valid values: menu_order | ID | rand
Default:menu_order

  • menu_order: Sort by the how the images are sorted on the media gallery tab.
  • ID: Sort by the attachment ID. ie. the order that they were uploaded into the media library.
  • rand: Randomly order the thumbnails on each page load. The ‘order’ parameter is ignored if orderby=rand.

See the WordPress orderby documentation for more information.

order="ASC"
Sort order (ascending or descending) for the thumbnails. Valid values: ASC | DESC | rand.  Default:ASC.
See the WordPress order documentation for more information.

Automate your WooCommerce store with Zapier

Automatically send your WooCommerce order, customer, or subscription data to 1500+ cloud services.

Built by OM4.

Other WooCommerce Extensions by OM4

After The Order

WooCommerce Order Management plugin that helps make everyone on your team an order management expert.

e-Path Gateway

Collect credit details securely online and process using your existing bank merchant account offline.