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.

OptionDefaultExampleDescription
post_typeportfoliopost_type="post"The post type of the posts to display. Only post and portfolio are currently supported.
typelightboxtype="serene"The type of gallery; “lightbox” will display images in a Fancybox lightbox and “serene” will display image in a full screen gallery.
columns3columns="5"The number of columns, can be a number 1 to 10.
convertphone-width-100convert="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_children1include_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_layoutmasonrymasonry_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_options0masonry="1"Use the options in each portfolio item metabox settings to allow having some items larger than others.
sortable1sortable="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_all1sortable_show_all="0"Makes an option to show portfolio items in all categories.
sortable_all_textAllsortable_all_text="Work"Change the “All” text to something else.
show_image1show_image="0"Show the post featured image; 1 is true, 0 is false.
height0height="120"Set the image height in pixels; if set to 0 it will be set automatically.
grid0grid="1"No border, gaps or margin will be used.
image_typeaboveimage_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_hover1content_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_width150float_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_height0float_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.
boxed0boxed="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_border0show_border="1"Display image with bottom border effect.
hovermed-hvrhover="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
paging0paging="1"Portfolio items will be spread over multiple pages; 1 is true, 0 is false.
max9max="12"Number of portfolio items to show, or posts per page if paging is on; -1 to show all.
orderbymenu_orderorderby="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
orderASCorder="DESC"The direction of above ordering; ASC for ascending, DESC for descending.
offset0offset="10"Number of posts to displace or pass over.
show_title1show_title="0"Show the title of the portfolio item; 1 is true, 0 is false.
title_tagh2tag="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_title1link_title="0"Link the portfolio title to the portfolio item page; 1 is true, 0 is false.
show_title_icon0show_title_icon="1"Display the meta icon next to the title.
show_meta1show_meta="0"Show the post meta data; 1 is true, 0 is false.
show_date1show_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_hover1image_details_on_hover="0"Shows date and like boxes only when the item is hovered, except on touch devices.
show_description1show_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_description0full_description="1"Show the full post content instead of the excerpt; 1 is true, 0 is false.
show_read_more1show_read_more="0"Show the “Read More” button below the portfolio item; 1 is true, 0 is false.
read_more_button_stylebasic-buttonread_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.
like0like_image="1"Adds a like button to each post; 1 is true, 0 is false.
like_iconfa-thumbs-uplike_icon="fa-heart"The icon of the post like button; fa-thumbs-up or fa-heart
like_image0like_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_iconfa-thumbs-uplike_image_icon="fa-heart"The icon of the image like button; fa-thumbs-up or fa-heart
like_title0like_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_iconfa-thumbs-uplike_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