Portfolio

The portfolio shortcode is part of the React Portfolio plugin and it allows you to display portfolio items or posts, see this page for how to set up a portfolio. The options for this shortcode are shown below. See examples here. The Portfolio shortcode also let’s you display WordPress blog articles with many style and layout options, see Blog examples.

Option Default Example Description
post_type portfolio post_type="post" The post type of the posts to display. Only post and portfolio are currently supported.
type lightbox type="serene" The type of gallery; “lightbox” will display images in a Fancybox lightbox and “serene” will display image in a full screen gallery.
columns 3 columns="5" The number of columns, can be a number 1 to 10.
convert phone-width-100 convert="units-tablet-50 phone-width-100" At which screen size should the column layout adjust to full width. Options:

  • phone-width-100 – Phone 1 column
  • units-phone-50 – Phone 2 columns
  • mobile-width-100 – Tablet and phone 1 column
  • units-mobile-50 – Tablet and phone 2 columns
  • units-tablet-50 phone-width-100 – Tablet 2 columns, phone 1 column
posts (empty) posts="1,15,19" A comma separated list of post IDs to show.
categories (empty) categories="1,5,12" A comma separated list of category IDs to show posts from.
category__and (empty) category__and="1,5,12" A comma separated list of category IDs to show posts from. The posts must be in ALL specified categories.
category__not_in (empty) category__not_in="1,5,12" A comma separated list of category IDs to exclude posts from.
include_children 1 include_children="0" When using categories, choose whether to also include items in child categories.
author (empty) author="5" Show only posts from the user with this ID.
masonry_layout masonry masonry_layout="fitRows" Choose how the items should be displayed in the masonry layout:

  • masonry – arrange items in a vertically cascading grid, filling empty space
  • fitRows – arrange the items in rows of the same height
masonry_use_layout_options 0 masonry="1" Use the options in each portfolio item metabox settings to allow having some items larger than others.
sortable 1 sortable="0" Make the portfolio sortable by category.
sortable_position (empty) sortable_position="textright" Choose where to show the sortable button labels:

  • (empty) – Auto
  • textleft – Left
  • textright – Right
  • textcenter – Center
sortable_show_all 1 sortable_show_all="0" Makes an option to show portfolio items in all categories.
sortable_all_text All sortable_all_text="Work" Change the “All” text to something else.
show_image 1 show_image="0" Show the post featured image; 1 is true, 0 is false.
height 0 height="120" Set the image height in pixels; if set to 0 it will be set automatically.
grid 0 grid="1" No border, gaps or margin will be used.
image_type above image_type="on-hover" Change the layout of the portfolio content. Options available:

  • above – Above title (full width)
  • below – Below title (full width)
  • left – Float left
  • right – Float right
  • on-hover – Show content on hover
content_on_hover 1 content_on_hover="0" Show details on hover or always.
gap (empty) gap="10" Add a in value which will be in pixels. The gap is set on both sides of the portfolio item so the actual visible gap between columns will be 2 times this number. If left blank it will be set at an appropriate amount to fit the other settings.
margin_bottom (empty) margin_bottom="20" The margin at the bottom of each portfolio item in pixels. If left blank it will be set at an appropriate amount to fit the other settings.
hover_type_height (empty) hover_type_height="120" Set the height of the portfolio item description area, when Image type is set to show content on hover.
float_width 150 float_width="300" If ‘Image type’ is set to Float left or right, this will set the image width to a pixel value of your choice.
float_height 0 float_height="300" If ‘Image type’ is set to Float left or right, this will set the image height. If set to 0 the height will be automatically scaled from the image dimensions.
hover_animation (empty) hover_animation="hvr-shrink" Add a subtle animation when the item is hovered, use the portfolio generator to see available options.
animation (empty) animation="fadeIn" Add an animation when the item comes into view, use the portfolio generator to see available options.
animation_delay (empty) animation_delay="1500" The animation will not start until this number of milliseconds after the element comes into view (1000 milliseconds = 1 second).
animation_offset (empty) animation_offset="200" If the number is positive, the animation will start when the element is this number of pixels below the viewport. If the number is negative, the animation will not start until the element is this number of pixels inside the viewport.
boxed 0 boxed="1" Shows a styled box around any content that is displayed with the portfolio item.
text_align (empty) text_align="textright" Text alignment:

  • (empty) – Inherit
  • textleft – Left
  • textcenter – Center
  • textright – Right
show_border 0 show_border="1" Display image with bottom border effect.
hover med-hvr hover="tiny-hvr" Select a size for the zoom icon that is shown when the user hovers over a portfolio item:

  • (empty) – Auto
  • tiny-hvr – Tiny
  • sml-hvr – Small
  • med-hvr – Medium
  • lrg-hvr – Large
paging 0 paging="1" Portfolio items will be spread over multiple pages; 1 is true, 0 is false.
max 9 max="12" Number of portfolio items to show, or posts per page if paging is on; -1 to show all.
orderby menu_order orderby="date" How to order the portfolio items:

  • none – no specified ordering
  • ID – order by post ID
  • author – order by author
  • title – order by title
  • date – order by date
  • modified – order by date modified
  • parent – order by parent
  • rand – random order
  • comment_count – order by number of comments
  • menu_order – order by menu order setting
  • likes – will only show posts with at least 1 like
order ASC order="DESC" The direction of above ordering; ASC for ascending, DESC for descending.
offset 0 offset="10" Number of posts to displace or pass over.
show_title 1 show_title="0" Show the title of the portfolio item; 1 is true, 0 is false.
title_tag h2 tag="h4" The title HTML tag. Use the appropriate tag for better SEO and usability:

  • h1
  • h2
  • h3
  • h4
  • h5
  • div
  • span
title_min_height (empty) title_min_height="50px" Set a CSS min-height value for the title.
link_title 1 link_title="0" Link the portfolio title to the portfolio item page; 1 is true, 0 is false.
show_title_icon 0 show_title_icon="1" Display the meta icon next to the title.
show_meta 1 show_meta="0" Show the post meta data; 1 is true, 0 is false.
show_date 1 show_date="0" Show the post date; 1 is true, 0 is false.
alt_date_like_layout (empty) alt_date_like_layout="date-like-above" Alternative date and like position:

  • (empty) = On the right (default)
  • date-like-left = On the left
  • date-like-above = Date and like above
image_details_on_hover 1 image_details_on_hover="0" Shows date and like boxes only when the item is hovered, except on touch devices.
show_description 1 show_description="0" Show the portfolio item description (excerpt); 1 is true, 0 is false.
description_min_height (empty) description_min_height="50px" Set a CSS min-height value for the description.
description_length (empty) description_length="40" The length of the excerpt in words.
full_description 0 full_description="1" Show the full post content instead of the excerpt; 1 is true, 0 is false.
show_read_more 1 show_read_more="0" Show the “Read More” button below the portfolio item; 1 is true, 0 is false.
read_more_button_style basic-button read_more_button_style="subtle-link" If the Read more button is visable then you can choose a style for it. Options available:

  • basic-button – Button (default)
  • basic-button full – Button fullwidth
  • subtle-link – Basic link with underline
read_more (empty) read_more="Continue Reading" The text for the “Read More” button.
like 0 like_image="1" Adds a like button to each post; 1 is true, 0 is false.
like_icon fa-thumbs-up like_icon="fa-heart" The icon of the post like button; fa-thumbs-up or fa-heart
like_image 0 like_image="1" Adds a function for the user to like the item. In this case, the Like icon (button) will show over the image.
like_image_icon fa-thumbs-up like_image_icon="fa-heart" The icon of the image like button; fa-thumbs-up or fa-heart
like_title 0 like_title="1" Adds a function for the user to like the item. In this case the Like icon (button) will show next to the items’ title text.
like_title_icon fa-thumbs-up like_title_icon="fa-heart" The icon of the like button; fa-thumbs-up or fa-heart

Examples

[portfolio]
[portfolio columns="4" type="serene" categories="7,30" show_title="0" paging="1" max="6"]

Still having trouble? Head over to the forums.

Forums