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:
|
| 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_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:
|
| 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:
|
| 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:
|
| 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:
|
| 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:
|
| 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:
|
| 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:
|
| 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:
|
| 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"]