Installing the Basic Plugin
- Browse to Plugins > Add New in the admin area, and search for WP Flow Plus.
- Click install, once installed, activate.
Quick Start
- Install the plugin
- Open up a post/page edit window
- Upload some images into the post
- Insert the [wp-flowplus] shortcode
- Preview the post
The configuration settings are found on the WordPress dashboard under Settings > WP Flow Plus.
Shortcode Options
The following basic options are supported:
orderby
Specify how to sort the display thumbnails. The default is "menu_order". This supports the standard WordPress values.
order
Specify the sort order used to display thumbnails. ASC or DESC. For example, to sort by ID, DESC:
wp-flowplus order="DESC" orderby="ID"
id
Specify the post ID. The gallery will display images which are attached to that post. The default behavior, if no ID is specified, is to display images attached to the current post. For example, to display images attached to post 123:
wp-flowplus id="123"
include
Comma separated attachment IDs to show only the images from these attachments.
wp-flowplus include="23,39,45"
exclude
Comma separated attachment IDs excludes the images from these attachments. Please note that include and exclude cannot be used together.
wp-flowplus exclude="21,32,43"
dir
Specify a subdirectory name. The path to the subdirectory must be configured on the settings page.
mediatag
Works with the Media Tags plugin(https://wordpress.org/plugins/media-tags/). This option will pull matching media out of your media library and include it in the gallery. Specify the media slug to select. Example use: mediatag=mymedia
startimg
Gives the starting slide number to center in the gallery, the default is 1.
rotate
Turns on/off auto-rotation for this instance (overrides the setting from the admin panel). Values are 'on' or 'off'.
samewindow
Specifies if links open in the same window or a new window. Set true or false, overrides the default value from the settings page.
category
Select featured posts by category. The featured image of each post will be placed in the carousel, and each image will link to the post. If a post has no featured image, the first image found attached to the post will be used instead, if there is no attached image a default image will be used.
ngg_id
Create carousel from a NextGen gallery. With the NextGen plugin you can perform bulk image resizing, and regenerate thumbnails in any size. The WP Flow Plus carousel will use the thumbnail size for the carousel images, and the full size for the Lightbox images.
nocaptions
Turn off/on captions for this instance of the carousel.
- true: captions are hidden
- false: captions are displayed according to the setting on the WP Flow Plus options page (default)
captions
Specify the style of the captions in the carousel. Values are:
- slide-up: grey box slides up when centered, containing the title and description
style
Specify the carousel animation and display style. Values are:
- baseline: the default basic carousel provided with the free version of the plugin
- angled: side images are rotated 45 degrees
- flip: flipbook animation
- explode: exploding image animation
- topline: images are top aligned
- midline: images are center aligned
Carousel Format
- Background color may be selected to match your theme. Do not use transparent with CSS reflections as this is not supported.
- Text color may be selected to match your theme.
- Captions may be disabled. The caption is the image name for images taken from a folder, and is the image title for images from the Media Library or NextGen gallery. This setting may be overridden in the shortcode.
- Slider color may be set to black, white, or disabled.
- Container width CSS may be configured. 100% is recommended to provide a responsive gallery. Any valid CSS may be entered.
- Container aspect ratio specifies the width to height ratio of the container. The default is 1.9. Higher numbers result in shorter height and vice versa. The ideal value for your gallery depends on the orientation of the images in the carousel.
- Carousel image size specifies the image size used in the carousel for images taken from the Media Library. All image sizes registered in your installation are offered as a choice. The default is "medium".
Gallery Behaviour Options
The images in the carousel will by default link to a Lightbox enlargement of the image. Alternatively, you may specify a URL to link to each image from the Media Library. This link address should be configured in the image uploader/editor of the Media Library.
- Open URL links in same window - check to enable
- Reflection scripts:
- CSS - supported by all modern browsers (including IE8+)
- V2 - works on most servers ** DEPRECATED
- V3 - like V2 but also supports transparent PNGs ** DEPRECATED
- Disable reflections - use the gallery without reflections
- Strict mode - this option is provided to be used with V2 or V3 reflections. Some servers do not allow images to be referenced by URL, this option will then provide a relative path. ** DEPRECATED
- Enable auto rotation - the gallery will rotate automatically, this may be disabled in the shortcode for each gallery instance.
- Auto rotation pause - how long to delay between slides in the carousel.
Folder Gallery Setup
You can upload a collection of images to a folder and have WP Flow Plus read the folder and gather the images, without the need to upload through the WordPress image uploader. Using this method provides fewer features in the gallery since there are no titles, links, or descriptions stored with the images. This is provided as a quick and easy way to display an image carousel. The folder structure should resemble the following:
- wp-content
- galleries
- gallery1
- image1.jpg
- image2.jpg
- image3.jpg
- gallery2
- image4.jpg
- image5.jpg
- image6.jpg
- gallery1
- galleries
With this structure you would enter "wp-content/galleries/" as the folder path.
Folder path - This should be the path to galleries from homepage root path, or full url including http://. Example "wp-content/galleries/". Include the ending slash, but NO starting slash. If you folder path is configured successfully you will see a list of galleries (and shortcodes) of the subdirectories that were found.
Auto Rotation
When auto rotation is enabled, the images will automatically rotate through the carousel. You may configure the pause time between rotations. Once the end of the gallery is reached it flows back to the beginning and starts again. The rotation will pause when the mouse hovers over the bounding div. Once an image is clicked and expanded into the Lightbox display the auto rotation is suspended.
Continuous Circular Carousel
This option will allow your WP Flow Plus galleries to circle infinitely!
Just check the box on the Advanced settings tab to enable the Circular Carousel.
Extended Carousel Styles
This feature provides several formats for your WP Flow Plus galleries!
Specify the carousel animation and display style. Values are:
- baseline: the default basic carousel provided with the free version of the plugin
- angled: side images are rotated 45 degrees
- flip: flipbook animation
- explode: exploding image animation
- topline: images are top aligned
- midline: images are center aligned
Example shortcode: [wp-flowplus style='angled']
Angled
Flip
Explode
Topline
Midline
Baseline (default)
Featured Posts
Select featured posts by category. The featured image of each post will be placed in the carousel, and each image will link to the post. If a post has no featured image, the first image found attached to the post will be used instead, if there is no attached image a default image will be used.
Shortcode options for a Featured Posts gallery
- category - the post category that will be included in the carousel
- order (default is ASC) – values are ASC or DESC
- orderby (default is menu_order ID) – standard WordPress orderby values are accepted
- startimg - Gives the starting slide number to center in the gallery, the default is 1.
- rotate - Turns on/off auto-rotation for this instance (overrides the setting from the admin panel). Values are ‘on’ or ‘off’.
- samewindow - Set true or false, overrides the default value from the settings page.
Lightbox Arrow Styles
Select your Lightbox arrow style in the admin area on the Advanced tab.
Choose from:
- Image - the default image
- Open arrow - a text arrow, you choose the colour
- Solid arrow - a solid border arrow, you choose the colour
NextGen Gallery
Creating a WP Flow Plus carousel from a NextGen gallery is an ideal way to achieve great results. With the NextGen plugin you can perform bulk image resizing, and regenerate thumbnails in any size. The WP Flow Plus carousel will use the thumbnail size for the carousel images, and the full size for the Lightbox images.
STEP 1 - Create a NextGen Gallery and upload images
STEP 2 - Optionally edit your gallery on the NextGen manage galleries page. Here you can bulk edit image sizes, regenerate thumbnails, and update the image alt & title text
STEP 3 - Edit the page/post that will contain the WP Flow Plus carousel
STEP 4 - Insert the shortcode using the WP Flow Plus shortcode generator, selecting the NextGen image source and the appropriate gallery name, optionally select starting image and rotation.
Selecting Images
There are a variety of ways to populate your carousel.
Images attached to the current post
Upload images to your post/page and use the shortcode [wp-flowplus]. The photo title will be displayed below each image. The image may link to either the large size image in a Lightbox or to a link that opens in a window.
Images attached to another post
Images uploaded to another post/page may be specified using the shortcode [wp-flowplus id=post_id]. The photo title will be displayed below each image. The image may link to either the large size image in a Lightbox or to a link that opens in a window.
Images from a folder
Upload your pictures to a folder and use the shortcode with dir argument [wp-flowplus dir=FOLDERNAME]. The image name will be displayed below each image and all images link to the Lightbox. The folder path must be configured in the WP Flow Plus settings.
Images tagged in the media library
Tag images in your media library using the Media Tags plugin by Paul Menard and use the shortcode [wp-flowplus mediatag=tagslug]. The photo title will be displayed below each image. The image may link to either the large size image in a Lightbox or to a link that opens in a window.
Images listed by ID from the media library
Images in the media library may be specified by ID using the shortcode [wp-flowplus include='1,2,3']. The photo title will be displayed below each image. The image may link to either the large size image in a Lightbox or to a link that opens in a window. To force the images to appear in the order listed, use the option orderby="post__in".
NextGen Gallery
Create a NextGen gallery and use the shortcode [wp-flowplus nggid=1] where the number corresponds to your NextGen gallery ID. The NextGen thumbnails will be used in the carousel. They will link to the large size images in the Lightbox. If your thumbnails are blurry, try regenerating them in a larger size.
Featured Posts
Create a featured posts gallery by using the shortcode [wp-flowplus category=slug]. The carousel will display each post's featured image, and will link to the post.
Shortcode Generator
The shortcode generator makes it easy to select the best options to use depending on the source of the images.
Shortcode Options
The following basic options are supported:
orderby
Specify how to sort the display thumbnails. The default is "menu_order". This supports the standard WordPress values.
order
Specify the sort order used to display thumbnails. ASC or DESC. For example, to sort by ID, DESC:
wp-flowplus order="DESC" orderby="ID"
id
Specify the post ID. The gallery will display images which are attached to that post. The default behavior, if no ID is specified, is to display images attached to the current post. For example, to display images attached to post 123:
wp-flowplus id="123"
include
Comma separated attachment IDs to show only the images from these attachments.
wp-flowplus include="23,39,45"
exclude
Comma separated attachment IDs excludes the images from these attachments. Please note that include and exclude cannot be used together.
wp-flowplus exclude="21,32,43"
dir
Specify a subdirectory name. The path to the subdirectory must be configured on the settings page.
mediatag
Works with the Media Tags plugin(https://wordpress.org/plugins/media-tags/). This option will pull matching media out of your media library and include it in the gallery. Specify the media slug to select. Example use: mediatag=mymedia
startimg
Gives the starting slide number to center in the gallery, the default is 1.
rotate
Turns on/off auto-rotation for this instance (overrides the setting from the admin panel). Values are 'on' or 'off'.
samewindow
Specifies if links open in the same window or a new window. Set true or false, overrides the default value from the settings page.
category
Select featured posts by category. The featured image of each post will be placed in the carousel, and each image will link to the post. If a post has no featured image, the first image found attached to the post will be used instead, if there is no attached image a default image will be used.
ngg_id
Create carousel from a NextGen gallery. With the NextGen plugin you can perform bulk image resizing, and regenerate thumbnails in any size. The WP Flow Plus carousel will use the thumbnail size for the carousel images, and the full size for the Lightbox images.
nocaptions
Turn off/on captions for this instance of the carousel.
- true: captions are hidden
- false: captions are displayed according to the setting on the WP Flow Plus options page (default)
captions
Specify the style of the captions in the carousel. Values are:
- slide-up: grey box slides up when centered, containing the title and description
style
Specify the carousel animation and display style. Values are:
- baseline: the default basic carousel provided with the free version of the plugin
- angled: side images are rotated 45 degrees
- flip: flipbook animation
- explode: exploding image animation
- topline: images are top aligned
- midline: images are center aligned
Slide-Up Captions
The slide-up captions option provides an alternate display for the titles and description of the slides in your carousel. The image title and description will appear in a partially opaque slide-up gray box at the bottom of the centered image.
This option can be enabled site-wide on the Advanced settings page, or individually in the shortcode:
captions="slide-up"
Using a Folder
- Create a folder for your galleries within your WordPress installation, wherever you want. The location has to be accessible from the internet - for example you could use wp-content/galleries.
- Upload your image galleries to a subfolder of this folder, for example you might upload your images under "wp-content/galleries/myphotos".
- Set the "Path to galleries from homepage root path" in the settings admin page for WP Flow Plus. Enter the path with trailing slash like: "wp-content/galleries/". Alternatively you may also enter the full path like "http://www.mywebsite.com/wp-content/galleries/" - this works around problems on some server configurations. Note that the gallery must reside on the same server as the blog. If you have entered the gallery path correctly you will see a list of the sub-directories on the settings page.
- Insert a gallery on a page by specifying the shortcode wp-flowplus dir=myphotos on your post or page.
This gallery style will display the image names as the captions, and will link to the full size image Lightbox gallery.
Shortcode options for galleries based on a folder of images
- startimg - Gives the starting slide number to center in the gallery, the default is 1.
- rotate - Turns on/off auto-rotation for this instance (overrides the setting from the admin panel). Values are 'on' or 'off'.
- samewindow - Set true or false, overrides the default value from the settings page.
Using the Media Library
Upload images using the WordPress image uploader on your post or page or into the media library.
The title will be used as the image caption. The description will be displayed in the Lightbox below the title.
If you want the image to link to a URL, enter the address in the WP Flow Plus link field in the image editor (ie: http://www.website.com). If the link field does not contain a URL, the image will link to the Lightbox.
Shortcode options for images from the Media Library
- id - specifies a page/post ID. The images attached to that ID will be used in the carousel.
- order (default is ASC) - values are ASC or DESC
- orderby (default is menu_order ID) - standard WordPress orderby values are accepted
- include - list of image IDs to include
- exclude - list of image IDs to exclude
- mediatag - Works with the Media Tags plugin by Paul Menard. This option will pull matching media out of your media library and include it in the gallery. Specify the media slug to select. Example use: mediatag=mymedia
- startimg - Gives the starting slide number to center in the gallery, the default is 1.
- rotate - Turns on/off auto-rotation for this instance (overrides the setting from the admin panel). Values are 'on' or 'off'.
- samewindow - Set true or false, overrides the default value from the settings page.
To force specific images in a prescribed order, use the "include" option with orderby="post__in". The images will appear in the order listed in the shortcode.
Please visit the WordPress Support Forum for support.
Frequently Asked Questions
My carousel contains broken images. What can I do?
If your reflected images don't show up, you might have a server that generates 404 errors on the reflected images. In this case select the option in the settings for strict servers or use CSS reflections.
Is there a way for me to place a tag in my template so that the gallery would be part of it?
You can insert any shortcode into a template using this enclosed in standard PHP tags: echo do_shortcode('[shortcode option1="value1" option2="value2"]');
For WP Flow Plus, insert something like this: echo do_shortcode('[[[wp-flowplus dir="value"]]]');
My site uses the shortcode name wp-imageflow2. Is this still okay?
Yes, both versions of the shortcode name are supported equally.
How can I help support this plugin?
A donation to support this plugin would be greatly appreciated. I also appreciate a rating on the WordPress plugin directory.
Troubleshooting
Lazy Loader
Use of the Lazy Loader or similar plugin is known to disrupt the display of the carousel. Lazy Loader prevents background images from loading until visible, preventing the WP Flow Plus plugin from having full image size information available. Some themes have Lazy Loader included automatically as an option in their settings - this option should be disabled.