Skip to main content

Portfolio Catalog

This feature is available only for Premium members

NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information

 

Description and Code

 

The portfolio catalog shortcode lets you pull in portfolio items to display in a carousel, a grid, or columns with excerpts. Here's an example of the shortcode in code view:

[portfolio_component layout="carousel" filters="yes" columns="1" columns_grid="1" cat_slug="" exclude_cats="" number_posts="4" columns_excerpt="yes" excerpt_length="35" project_buttons="yes" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""][/portfolio_component]

 

Parameters

 

  • layout
    • set the predefined layout of the portfolio catalog
    • Possible values - carousel, grid, column
  • filters
    • defines if to show or hide the category filters (only for Grid or Columns)
    • Possible values - yes or no
  • columns
    • defines the number of columns to display for the Columns layout
    • Possible values - number - like 1, 4 etc.
  • columns_grid
    • defines the maximum number of items (columns) for the Grid layout
    • Possible values - number - like 1, 4 etc.
  • cat_slug
    • defines the categories to include in the output
    • Possible values - array - like category 1, category 2 etc.
  • exclude_cats
    • defines the categories to exclude in the output, cat_slug value must be defined
    • Possible values - array - like category 1, category 2 etc.
  • number_posts
    • set the number of portfolio items to display
    • Possible values - number - like 1, 5, 16 etc.
  • columns_excerpt
    • defines if display an excerpt portfolio content (only for Columns)
    • Possible values - yes or no
  • excerpt_length
    • defines the number of words to show in the portfolio excerpts (only for Columns)
    • Possible values - number - like 10, 25, 50 etc.
  • project_buttons
    • defines if display the project buttons - Read More | View Project (only for Columns)
    • Possible values - yes or no
  • animation_type
    • set the animation type of the component
    • Possible valuesnone, bounce, fade, flash, shake, slide
  • animation_direction
    • set the animation direction of the component
    • Possible valuesdown, left, right, up
  • animation_speed
    • set the animation speed of the component
    • Possible values - in seconds like 0.1, 1, 5.3 etc.
  • class
    • custom class for CSS of component
    • Possible values - string - like custom-element-class
  • id
    • custom ID for CSS of component
    • Possible values - string - like custom-element-id

 

Basic Examples

 

 

 

Grid

 

 

Columns

 

 

Animated Examples