How to setup Portfolio

Before you can use the Employees Shortcode you will need to add single Employee Items which is known as Employees Post Type. If you do not need to use the Employees Post Type or Shortcode you can go to Theme Options > Advanced > Manage Theme and turn off the Employees Post Type from there.

Employees

In this topic

We will explain about how to setup Portfolio

1. Adding Portfolio Custom Post Type Items

To add the Portfolio items in Jupiter you need to go to WordPress Admin > Portfolios.

1.1. Set up Portfolio – Add a Portfolio Item

Go to Main Dashboard Menu -> Portfolios-> Add to add a new slide

portfolios

1.2. Set up Portfolio – Add a Portfolio Item Title

Add a title for your Portfolio Item.

portfolio-addnew

1.3. Set up Portfolio – Set Jupiter Portfolio Post Options

Use this set of options to tweak the Portfolio Item details. Information about each option is as follows:

1.3.1 Custom URL

portfolio-customurl

If you click on a portfolio item in the portfolio listing page, the default behavior is that it goes to that portfolio single page. You can override this behavior by setting this option as a custom link. If you prefer the default behavior, set this option to blank. Available options are:

  1. Link to Page
  2. Link to Category
  3. Link to Post
  4. Link to Portfolio
  5. Link Manually

Depending on which method of linking you select, proper options will be available to choose from.

1.3.2 Post Type

Use this option to set the Post Type of your Portfolio Item. Available options are:

  1. Image
  2. Video

1.3.3 Video Site

If you choose Video as the Portfolio item Post Type, you will have this option to set which video sharing service you like to have your video pulled from. Available options are:

  1. Vimeo
  2. YouTube
  3. Daily Motion

1.3.4 Video ID

If you choose Video as the Portfolio item Post Type, you will have this option to set the Video ID to select. Video ID is the part of the URL in each video sharing service. Options:

  1. http://www.youtube.com/watch?v=D
  2. http://vimeo.com/ID
  3. http://www.dailymotion.com/embed/video/ID

1.3.5 Masonry Image Size

Make your handpicked images larger, wider or taller in the Masonry loop style image size. The first value represents horizontal wideness, the second value how tall the item is. X x X is regular item width and height (will occupy one fifth of a column). Available options are:

  1. X x X
  2. 2X x X
  3. 3X x X
  4. 4X x X
  5. X x 2X
  6. 2X x 2X
  7. 3X x 2X
  8. 4X x 2X

1.3.6 Item Hover Skin

Using this option you can modify this portfolio item hover skin color.

1.3.7 Show Featured Image

If you do not want to set a featured image inside a single portfolio you can disable it here. If your post type is video, the featured video player will be disabled.

1.3.8 Similar Posts

portfolio-similar-post

If you do not want to show a similar posts section inside a single portfolio you can disable it here.

1.3.9 Social Share

If you do not want to show a Social Share & Love Post feature in this post, disable this option.

1.3.10 Portfolio Ajax Content

This content will be used in ajax portfolio and if left blank the main content above will be used instead. Please note that ajax content will not accept fullwidth rows or page sections. So if you are using these in single portfolio main content then use this field for ajax content.

1.4 Set up Portfolio – Add Excerpt

This content will be used in ajax portfolio and if left blank the main content above will be used instead. Please note that ajax content will not accept fullwidth rows or page sections. So if you are using these in single portfolio main content then use this field for ajax content.

portfolio-excerpt

1.5. Set up Portfolio – Add Full Text

Use the default editor of WordPress to add your Portfolio’s Full Text. You can use Visual Composer for full text if you want. For that you need to enable Visual Composer for portfolios. Go to Dashboard Menu -> Visual Composer and enable the portfolio’s checkbox there and save settings.

portfolio2

1.6. Set up Portfolio – Additional Settings

You also have additional Jupiter Page and Styling Settings for Portfolio items like any other page in Jupiter, which you can use to fine tune the layout of single portfolio pages.

portfolio1

Portfolio Shortcode is the main place to set up a portfolio loop including different layouts, styles and options, on which we will delve into details in the next section.

2. Adding Portfolio to a Page

To add the Portfolio shortcode to a page to show in the front end of the website please follow the steps below:

2.1. Set up Portfolio – Add Portfolio Shortcode

After adding a page, use the Visual Composer tool to add the Portfolio shortcode by clicking on + (plus) icon, and searching for Portfolio. There are other alternative shortcodes you can use for Portfolio Loop, but the main recommended shortcode is the Portfolio shortcode.

2.2. Set up Portfolio Shortcode Settings

After you add the Portfolio shortcode, a pop up window will appear which will allow you to set the shortcode options to fine tune your Portfolio and add it to the page. The following is a detailed description of each option for the shortcode:

2.2.1. Column

Use this option to set up Portfolio style. There are three available in Jupiter which you can choose from. Available options are:

  1. Simple
  2. Boxed
  3. Classic

You can mouse over the Portfolio menu item of Jupiter Demo Page to see each Portfolio style live.

portfolio-settings

2.2.2. Hover Scenarios

This is what happens when user hovers over a portfolio item. Different animations and styles will be shown up on each scenario. Available options are:

  1. Slide Box
  2. Fade Box
  3. Zoom In Box
  4. Zoom Out Box
  5. Light Zoom In
  6. 3D Cube
  7. None (Only Link to Single Portfolio Page)

2.2.3. Grid Spacing

Use this option to set the space between items in grid and masonry portfolio styles.

2.2.4. Image Size

Set up Portfolio – Use this option to decide the thumbnails of the Portfolio. Setting Crop and Resize option will activate the bfi_thumb plugin and will crop images using PHP code. If you don’t want to have that plugin activated, please select one of the other options. This option will not work for the Masonry style. Available options are:

  1. Resize & Crop
  2. Original Size
  3. Large Size
  4. Medium Size
Beware! GD Library Warning: If you set this option to Crop & Resize you need to make sure that PHP GD library is installed on your server. For more detailed information about this please contact your web hosting provider.

Use this option to set the Image Height which will be suitable for your design. This option will not work if you set the Image Size option to something other than Resize and Crop.

2.2.5. Image Height

Use this option to set the Image Height which will be suitable for your design. This option will not work if you set the Image Size option to something other than Resize and Crop.

2.2.6. Increase Quality of Image

portfolio-quality

If you would like your Portfolio images to be retina compatible or just want to use it in full width row, you may consider increasing the image size. This option will help you define the image quality manually. Available options are:

  1. Normal Quality
  2. Images 2 Times Bigger (Retina Compatible)
  3. Images 3 Times Bigger (Full Width Row Compatible)

2.2.7. Shows Posts Using Ajax?

Use this option to enable the Ajax loading functionality of the Portfolio shortcode. You should already have added your portfolio single item content in the Ajax Editor beforehand in the Portfolio Custom Post Type options.

2.2.8. How many Columns?

Set up Portfolio – Use this option to set how many columns you would like to show in one row. Please note that the actual size you will get will be different with 10px tolerance. 3, 4, 5, 6 column with sidebar layouts will be 2 columns.

2.2.9. Show Excerpt?

Disable this option if you do not want an excerpt to be viewed in a Portfolio newspaper style loop.

2.2.10. Post Excerpt Length

Define the length of the excerpt by number of characters. Zero will disable excerpt.

2.2.11. Choose Meta Element

portfolio-choosemeta

Use this option to decide if you want to show the Portfolio Category or Publish Date as the meta information on each portfolio item in the loop. Available options are:

  1. Category
  2. Date

2.2.12. Show Permalink?

If do not need portfolio single post you can remove the permalink from the image hover icon and title.

2.2.13. Show Zoom Link?

If do not need portfolio single post you can remove the zoom link from the image hover icon and title.

2.2.14. How Many Posts?

Set up Portfolio – Use this option to set the limit for the Portfolio Posts you want to have in the front end of the website. If this option is set to -1 it means you do not want to have any limitation regarding the portfolio posts count, but anyway even if you set this option to -1 it will obey the global limitation setting in WordPress:

Admin Menu > Settings > Reading > Posts per Page option.

2.2.15. Sortable?

Use this option to show Portfolio Categories at the top of the Portfolio loop, which will give the viewer filtering functionality by category. Please click here to see a live demo of Sortable Options.

2.2.16. Sortable Align?

Use this option to set the alignment of the Portfolio Category list in the sortable functionality of the Portfolio loop. Available options are:

  1. left
  2. center
  3. right

2.2.17. Sortable Style

portfolio-sortable

Use this option to set the style of the Sortable functionality of the Portfolio loop. Available options are:

  1. Classic
  2. Outline

2.2.18. Sortable Background Custom Color (Outline Style)

Use this option to set the background color of the Sortable section of the Portfolio loop. You need to have the Sortable option enabled and have chosen the Outline style for the sortable functionality to be able to use this option.

2.2.19. Sortable Text Custom Color (Outline Style)

Use this option to set the text color of the Sortable section of the Portfolio loop. You need to have the Sortable option enabled and have chosen the Outline style for the sortable functionality to be able to use this option.

2.2.20. Offset

Number of posts to displace or pass over. This means that, based on your order of the loop, this number will define how many posts to pass over and start from the nth number of the offset.

2.2.21. Select specific Posts

portfolio-select-post

You can set individual posts to show as the Portfolio loop in Jupiter. This option will help you select ones you like to see in the listing.

2.2.22. Select specific Authors

Use this option to select the portfolio posts that a specific author added to the WordPress. The author here is the username of the person who added the portfolio post item.

2.2.23. Select specific Categories

Use this option to select specific categories to show in the Portfolio loop. You will need to go to WordPress Dashboard > Portfolios > Portfolio Categories. In the right hand find the Slug column. you will need to add portfolio category slugs in this option. Add commas to separate them.

portfolio-slug

2.2.24. Show Pagination?

Use this option to enable/disable the pagination functionality for Portfolio loop.

2.2.25. Pagination Style

Use this option to select which pagination style you would like to use on this loop. Available options are:

  1. Classic Pagination Navigation
  2. Load More Button
  3. Load More on Page Scroll

2.2.26. Use this option to set the order of Portfolio posts. Available options are:

Use this option to set the order of Portfolio posts. Available options are:

  1. ASC (Ascending Order)
  2. DESC (Descending Order)

2.2.27. Order by

Use this option to set the criteria you want ordering be based upon. Available options are:

  1. Date
  2. Posts (Manually Selected Posts)
  3. Menu Order
  4. Post ID
  5. Title
  6. Comment Count
  7. Random
  8. Author
  9. No Order

2.2.28. Target

portfolio-target

Use this option to set whether you want to have the links to single Portfolio posts opened in the same browser window or a new one. Available options are:

  1. Same Window
  2. New Window

2.2.29. Extra Class Name

This is an option which is common amongst most shortcodes. If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in Custom CSS settings inside Theme Options > Advanced > Custom CSS.

0