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:
- On Mac, you can use Preview (part of Leopard) or Picturesque for Mac
- If you use Windows you can get a Mac or use the free FastStone tools
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:
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:
(where optionname is one of the options listed below, and optionvalue is the corresponding value for that option)
[simplegallery thumbnailalign="bottom" largeimagewidth="500" largeimageheight="500"]
Available Shortcode Options
The available options for the Simple Gallery shortcode are below.
Thumbnail section alignment. Valid values:
Maximum width of the large image (in pixels).
Maximum height of the large image (in pixels).
The number of columns for the thumbnails. If columns is set to 0, no row breaks will be included.
Thumbnail image size. Valid values:
The size of the images for “thumbnail”, “medium” and “large” can be configured in
WordPress admin panel under
Settings > Media.
Unique HTML/CSS ID/selector for this image gallery.
Default:auto-generated in the format simplegallery_x where x is a unique number.
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.
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
See the Gallery Shortcode documentation for more information.
Comma separated list of attachment IDs to exclude from this gallery.
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
See the Gallery Shortcode documentation for more information.
Whether or not to display the next/previous navigation.
1=Yes 0=No Default:1.
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.
Number of milliseconds it takes to fade in the image. Has no effect if fade=”none”
The field used to sort the thumbnails. Valid values:
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.
Sort order (ascending or descending) for the thumbnails. Valid values:
See the WordPress order documentation for more information.
Other WooCommerce Extensions by OM4
- Six Critical Issues for Your WooCommerce Store
- Stripe vs PayPal Payments
- Should Your WooCommerce Store Have a Blog?
- A Designer’s Guide To WooCommerce
- Shipping Heavy or Bulky Products Using WooCommerce
- Real Time Training For WooCommerce Order Fulfilment Staff
- Get Pay-Per-Click Advertising To Work For Your WooCommerce Store
- Error Free Order Processing in Your WooCommerce Store
- Here’s a Password Tool For Your WooCommerce Store
- Automate your WooCommerce Store with Zapier
- Offline Credit Card Payments in WooCommerce
- Integrating WooCommerce with the Cloud using Zapier
Enter your details below to receive our latest WooCommerce articles via email.
It's a great way for WooCommerce store owners and WooCommerce developers to stay informed about everything WooCommerce related!