WordPress Photo Gallery Plugin User Manual

This is the official documentation(user guide) of the Photo Gallery plugin. We are continually updating our plugin, and with each update, we are introducing new features that match the demands of the market and feedback that we receive from our clients. Any feedback that you have for us will be taken into consideration with great interest.

Let’s get started together!

Build and design excellent picture galleries for your website with Photo Gallery!

Installation
How to create a simple gallery in 4 steps
Gallery
Categories
Upgrade Free to Pro or Update the Pro Version

1. Installation

There are two ways you can install the Photo Gallery plugin:

Install the plugin from your WordPress dashboard.
Install the plugin from Wordpress.org.

2. How to create a simple gallery in 4 steps with Photo Gallery

Go to the Gallery – Photo Gallery page.
Click on the Add New button to build your first picture gallery.
Set up your gallery by adding a title, uploading images, and so on.
Copy the shortcode ([gallery_p_gallery id='0']) and embed it into any post or page.

That’s it! Your first photo gallery is now ready!

Let’s get familiar with what our WordPress gallery plugin has for you. Take your picture gallery to the next level by applying powerful and stylish options to it.

3. Gallery – Photo Gallery

3.1 Images

Give the basic configuration settings to your gallery.

3.1.1 Title: Give a title to your photo library.

3.1.2 Description: Describe the picture gallery in a few words.

3.1.3 Add Images: Upload images for your picture gallery. Add multiple images by uploading files or choosing them from the media library. You can also enable image pagination and change the photo order.

Title: When you upload an image, the title field will take its name that is saved on your device. However, you can change the title for each of the images uploaded.
Alt-text: Write alternative texts for photos in case they are not loaded. The alt text field is filled automatically by the picture name saved on your device.
Description: Provide information about the photos.
URL: Add links to your photos.
Image Category: To add a category to a picture, go to the Categories page on the sidebar and create a new category. Come back and select one or more categories for your pictures.

3.2 Settings

Enhance your photo gallery with extra functionality.

3.2.1 Enable filter by categories: To filter the photos by categories, you need to add categories to them first. On the front-end, you will see the category title. By clicking on it, you’ll see the photos belonging to that category. The option works only with the Grid layout.

3.2.2 Show gallery head: Show the title and/or the description of the photo library.

3.2.3 Thumbnail size: Specify the size of the image in the thumbnail view.

3.2.4 Image order by: Decide the picture order according to:

Title
Date
Random

You can also choose the No ordering option. Then, you need to set an ascending or descending order.

3.2.5 Image loading: Choose between these two ways of image loading:

Global loading: The gallery will open as soon as all the images are loaded.
Lazy loading: Images will be displayed separately whenever their own loading is over.

3.2.6 Image loading effect: Try out and take one of the 14 image loading effects available in case of lazy loading.

3.2.7 Show title on thumbnail: Adjust the settings of showing the photo title on the thumbnail.

Show on: Decide where to show the title.
– Thumbnail hover: The title appears when the mouse cursor stops on the picture.
– Gallery thumbnail: The title remains on the thumbnail regardless of the mouse cursor position.
Image title position: Show the title either on the bottom or on the top of the thumbnail.
Show with date: Decide whether to show the title along with the photo date or not.

3.2.8 Disable lightbox: If you tick the checkbox, the users won’t be able to view the photos with their whole size.

3.2.9 Enable search for image: Enable search by image title and description. This option is not compatible with the Mosaic layout.

3.2.10 Gallery width (px): Set the picture gallery width in pixels. For a 100% width, leave the field blank.

3.2.11 Responsive width/height: Enable the option if you want to assign values to height and weight by ratio. The option is compatible only with the Grid layout.

3.2.12 Height/width ratio: The option will appear only if you’ve enabled the previous one. Thus, it’s available only for the Grid layout. The ratio indicates the quantitative relation between height and width. For example, if you give a 1.2 value to the ratio while the width is 300, the height will be 360 (300 x 1.2).

3.2.13 Thumbnail height: Give the value for thumbnail height in pixels. Give separate values for phone and desktop screens. The option is compatible only with the Grid layout. It won’t be available if you’ve enabled the Responsive width/height option.

3.2.14 Column count: Specify the number of columns for your gallery. The column count is 3 by default. The option is not compatible with the Mosaic layout.

3.3 Styles

Use the most attractive style options to make your gallery design absolutely perfect.

3.3.1 Gallery view type: Choose your gallery view type out of 30 layouts available! The Grid, Mosaic, and Masonry layouts are free to use. The other templates are available in the Pro version.

3.3.2 Image hover effect: Choose the hover effect for pictures. Choose between Simple and Direction-aware animations.

3.3.3 Image hover animation: For Simple animation, select one of the 14 animation effects. For Direction-aware animation, choose between Slide and Rotate 3D.

3.3.4 Image position: The image position property specifies which side of the picture will be visible when displayed as a thumbnail.

Center
Left
Right

Center
Top
Bottom

3.3.5 Image hover opacity: Define the opacity level of the image hover.

3.3.6 Image hover color: Choose the color of the hover effect. Whenever the mouse cursor is on the picture, a hover effect of that color will appear.

3.3.7 Image hover zoom effect: The picture will be zoomed in whenever the mouse cursor is on it.

3.3.8 Image hover scale box-shadow effect: Enable box-shadow effect while the mouse cursor is on the picture.

3.3.9 Choose filter for thumbnail: Choose a visual effect that will be applied to the thumbnails. There is no filter by default. Select from the variety:

Blur
Brightness
Contrast
Grayscale
Hue rotate
Invert
Saturate
Sepia

1.3.10 Loader style: Choose the most preferable loader icon out of the eleven styles at hand. The icon will appear on the image while it’s being loaded.

3.3.11 Image hover icon: Choose the icon that is visible while hovering over pictures. There are fifteen icons for you to choose from. If you don’t want any, select None.

3.3.12 Image hover icon size (px): Give the size of the image hover icon in pixels.

3.3.13 Image distance (px): Give a pixel value for the distance between pictures.

3.3.14 Image border: By ticking the checkbox, you will be able to give a pixel value for border width. Also, you can pick the most preferable border style from the following:

Solid
Dashed
Dotted
Double
Groove
Ridge
Inset
Outset

If you don’t want any, choose None. The border-style is Solid by default.
Lastly, select a border color and define the transparency level if you wish.

3.3.15 Image border-radius: Give the value for image border curvature in pixels.

3.3.16 Thumbnail title size (px): Set the size of the title appearing on the thumbnail.

3.3.17 Background color of the thumbnail title: Pick a background color for the thumbnail title and make it transparent if you want.

3.3.18 Custom class: Create custom classes and separate them by hitting the spacebar. For example, wrapper image.

3.3.19 Custom CSS: Enter your own CSS code. For example, h2{color:aquamarine;}.

3.4 Lightbox settings

Make the experience even more delightful. Take your chance to apply conversion-centered design to the lightbox.

3.4.1 Image counter: Show how many pictures there are in the photo gallery and which one is on display. The image counter will appear on the upper panel of the lightbox.

3.4.2 Show caption in lightbox: Decide whether to display the image title on the lightbox or not.

3.4.3 Image slideshow: Enable this option, and photos will follow each other automatically, without necessarily being manually controlled. The corresponding button will appear on the upper panel of the lightbox. A live progress bar will show when the next picture will open. You also need to decide the slide duration in milliseconds.

3.4.4 Choose filter for lightbox: Choose a visual effect that will be applied to images when they are shown in the lightbox. There is no filter by default. Select from the variety:

Blur
Brightness
Contrast
Grayscale
Hue rotate
Invert
Saturate
Sepia

3.4.5 Allow share button (Pro): Let your website visitors share the photos in your picture gallery on social media: Facebook, Twitter, and Pinterest. You can decide for each of them and change the button text.

3.4.6 Full-screen button (Pro): The button will appear on the upper panel of the lightbox. By clicking on it, visitors will be able to view images in full-screen mode.

3.4.7 Image actual size button (Pro): The button will appear on the upper panel of the lightbox. It will restore the actual size of the image.

3.4.8 Download button (Pro): Let your website visitors download the pictures by clicking on this button on the upper panel of the lightbox.

3.4.9 Mouse wheel (Pro): Allow to change the picture by scrolling with the mouse wheel.

3.4.10 Allow thumbnails (Pro): Allow thumbnails to be displayed when the lightbox is open.

Show thumbnails by default: Decide whether to display thumbnails open or collapsed.
Thumbnail width (px): Set the width of the thumbnail in pixels.
Space between thumbnails (px): Specify the distance between thumbnails in pixels.
Display thumbnail bar toggle button (px): Show a button for opening/closing the thumbnail bar. If you disable the option, the Show thumbnails by default option will become active.
Thumbnail bar height (px): Set the height of the thumbnail bar in pixels.

3.4.11 Allow key control (Pro): Control the lightbox with keyboard arrows.

Allow Esc key: Allow to close the lightbox with the Esc button on the keyboard.

3.5 Lightbox effects (Pro)

Build the coolest lightbox with our animation effects and more.

3.5.1 Transition between images: Choose the most appealing animation effect for image transition out of 30+ effects available.

3.5.2 Animation easing: Make your animation smoother and more pleasing to the eye with the effects provided.

3.5.3 Transition speed (ms): Give the value for transition speed in milliseconds.

3.5.4 Lightbox overlay opacity: Give the value for lightbox opacity. You can also preview the changes.

3.5.5 Background color of the lightbox: Choose the background color of the lightbox and define its transparency level on the bar.

3.6 Gallery preview

3.6.1 It is possible to see the changes made in the photo library by clicking on the green button in the bottom right corner.

4. Categories

This page is for creating categories and controlling them. To create a category for your images, click on the Add New button.

4.1 Title: Write the category name.

4.2 Description: Give more information about the category. Make any changes to the text with the WordPress editor.

5. Upgrade Free to Pro or Update the Pro Version

Firstly, we want to thank you for choosing us, as it’s only you who helps us grow faster and improve our services.

You’ll get to know how to upgrade the Gallery – Photo Gallery plugin from the Free version to Pro or upgrade your Pro version to a newer one. The good news is that all your content and customized settings will remain unchanged even after switching to the Premium version. You don’t need to redo what you have already done with the free version. Anyway, you can make a DB backup for your own safety before upgrading (you can use Updraft Plus).
To keep up with all the plugin's updates check out The Changelog for Photo Gallery Pro.

Ready? Let’s go!

Go to the Plugins page of your website admin dashboard.
Click on the Deactivate button of the Free version of the plugin.
As soon as the popup appears, click on the Upgrade button. This will keep all your galleries and settings applied to them. Afterward, the plugin will be deactivated.
Uninstall the Free version of the plugin.
After the successful purchase of the Pro version, you will get an email with a username and password.
Log in to our website.
Go to the Photo Gallery page.
The purchased plan will be available for you to download.
Download the zip file of the Premium version and install it on your website.

Have you still got questions that are not answered in here? Please, feel free to contact us via this email address, and our customer care team will always be happy to help you: This email address is being protected from spambots. You need JavaScript enabled to view it.

Like what you see? Create your first Photo gallery now.

If you are not ready to just yet, you can also try the Photo gallery Demos (Free and Pro).