Responsive Portfolio Image Gallery Pro

Documentation by “Real Web Care” v1.0

Thank you for your interest to this plugin. If you have any questions that are beyond the scope of this help file, please feel free to email us at our client area contact form here. We’d be happy to help you.

Installing 'Responsive Portfolio Image Gallery Pro' Plugin is as simple as installing any other WordPress Plugin. If you don't know how to install plugins, please review the two options below:

1.1 Install by ZIP File

  1. Log In as an Admin on your WordPress blog.
  2. From your WordPress dashboard, choose Add New under the Plugins category
  3. There, you have the buttons: Upload Plugin. Click it.
  4. From here, browse for the zip file included in your plugin purchase titled as and click the Install Now button
  5. Once installation is complete, activate the plugin to enable its features.

1.2 Install by FTP

  1. Upload the responsive-portfolio-image-gallery-pro folder with all the files located in it to your WordPress plugin directory (/WORDPRESS-DIRECTORY/wp-content/plugins/) [e.g.]
  2. From your WordPress dashboard, choose Installed Plugins option under the Plugins category
  3. Locate the newly added plugin and click on the Activate link to enable its features.
  4. A new menu tab with the name Portfolio will be created in the WordPress admin panel, where you can configure and create your portfolio image gallery!

2.1 Summary

Responsive Portfolio Image Gallery Pro is a powerful, lightweight, filterable portfolio gallery plugin developed to display Image Gallery in a lot more professional way. The plugin is fully responsive, designed with jQuery & CSS3 and all major browser supported.

The plugin represent portfolio thumbnails with many CSS3 hover and filter effects. By clicking on a thumbnail, it will expand a preview box and show a larger image along with multiple carousel images and some other content like title, description and buttons with links. The plugin can be used on different posts or pages by SHORTCODE.

By default, WordPress doesn't have support for page templates of the page type in other post types. Most of the themes support original page template for the custom post type. Generally, it is not convenient to use default page template for displaying portfolios. Considering this matter, the portfolio plugin is giving support for both single and archive page template.

2.2 Some of the key features

3.1 Create a Portfolio Gallery

Navigate to Portfolio >> New Portfolio to add your portfolio items. Enter the title and description of the portfolio. Select a featured image and also upload multiple images for the portfolio. Add your portfolio categories and select the category of the portfolio. You can add buttons as many as you want, and color the button and it's font as you want. Finally, click on Publish button at the top to publish a portfolio. In this way, you can add as many as portfolio items you want.

add new portfolio

To set a youtube or vimeo video click on featured image and enter the video link in the Video URL text box. If you enter the correct video link, then in the expanding preview video iframe will be shown instead of the large image. If it is empty, then the large image will be displayed.

Video Setting

After creating several portfolio items, navigate to Portfolio >> Generate Portfolio and click on Add New button to add a portfolio gallery.

add new

Enter the portfolio gallery name and click on Add Gallery button. A table will be displayed with the portfolio gallery name. Mouse over on the gallery name and you will get a link to set that gallery.

add new

3.2 Set the portfolio gallery

Now, you can set your portfolio gallery. To do that click on Set Gallery link. There are four sections here:

3.2.1 General Settings

General Settings is the basic settings of the portfolio gallery. Here, you have to enable the portfolio gallery first to display the gallery at the front-end. Number of post will ensure how many post you want to show in a gallery. After that, select which category's post you want to show for your gallery. If you want to display the carousel images title and description, then set yes for both. For portfolio description length size, enter the excerpt lenght and if you want to show read more button, enter read more text.

general settings
3.2.2 Structural Settings

In this section you have to setup the structure of the portfolio gallery, like width, height and margin. You can set the container width that indicates the total width of portfolio gallery. Leaving blank will set the container width at 100% by default. Next, enter portfolio thumbnail width and height size and set the alignment. Button width and height will ensure button size. Lastly, set the space between each thumbnail by giving top-bottom and left-right margin.

structural settings
3.2.3 Font Settings

In this section you can choose various fonts from Google Font library. Find a Google Fonts that you'd like to use on your portfolio gallery. When you find the desired font, click on the Quick-use icon.

quick use

'Quick-use' icon will redirect you to the selected font page where you'll be asked to choose the styles and character sets for your selected font. Then you will find a generated code in the Standard tab. You don't need to copy the whole code, just add an URL link without http: or https: (e.g. //,700). Then you will be provided the Font-Family for your selected font. Enter the primary and secondary font family for your portfolio gallery (e.g. 'Roboto Condensed', serif). The primary font-family will affect the title and button text and secondary font-family will affect the description text. The rest of the font settings are for the font size of differnt portion of the portfolio gallery. Just set the font size according to your needs.

Font Settings
3.2.4 Color Settings

Here you can set the background, button and font color of the portfolio gallery by the help of ColorPicker. Just select your desired color for background, button and font according to your needs.

Color Settings
3.2.5 Advanced Settings

Here, you can set some of the advanced settings of the portfolio gallery, like hover and filter effect. There are two types of hover effect, image and text. Image effect will animate the images and text effect will animate the titel text. Filter effect will work when you click on a category name. It will display all the thumbnail images with various effects according to your effect selection. You can also set the expanding preview speed and height here. By adjusting height you are ensuring that the expanding preview will not get too much blank space. It is also applicable for carousel wrapper height.

Advanced Settings

After completing all the necessary fields for your portfolio gallery click on Add Gallery button. Then you will get a SHORTCODE of newly created portfolio gallery with an unique ID, which will be generated automatically. You can preview the gallery before publishing. You can also duplicate any existed gallery rather than resetting a new one. Now, paste the shortcode in your posts or pages where you would like to show portfolio gallery and publish. Visit the newly created post/page to see the magic! :)

Gallery Lists

3.3 Portfolio Gallery Settings

Finally, there is an another option to set portfolio gallery more attractively. Here, you can set single page and archive page template for custom post type. Navigate to Portfolio Settings and you will get four sections here:

3.3.1 Global Settings

Global settings is for customizing the custom post type templates. You will be asked for whether you want to display default page templates or plugin provided templates for single page and archive page. You can adjust the width and height of images, length of portfolio and image description, etc. Archive page is based on up to 4 columns view. At the end, there is an option whether you want to display sidebar or not for both page templates.

global settings
3.3.2 Custom Style

Here, you can add all your custom CSS and avoid modifying the core plugin files, since that'll make upgrading the plugin problematic. Your custom CSS will be loaded after the plugin's stylesheets, which means that your rules will take precedence. Just add your CSS for what you want to change. There is an option to select Mode of the custom CSS editor. Keep it ON, if you want to debug your added CSS styles.

custom style
3.3.3 Export

Here, you can create a backup of all the configuration and setting options of your portfolio galleries by exporting them. When you click Download Export File button, WordPress will generate a JSON file for you to save to your computer. After exporting, you can either use the backup file to restore your settings on this site again or another WordPress site.

3.3.4 Import

Here, you can restore the backup files that you export before. Just select the JSON file and click on Upload file and import. Wordpress do the rest for you. Note that, maximum file size would be 450 MB.


I've used the following fonts, icons or other files as listed.

Real Web Care