Portfolio Element
The Portfolio Element shows your portfolio items: projects, case studies, references or anything else you publish as Portfolio posts. Each item appears with its featured image and, if you like, its title, categories and a short text, and links to the full portfolio post.
You choose between three layouts: a Carousel that slides through the items, a regular Grid, and a Masonry grid where images keep their shape. Grid and masonry layouts can add category filters and pagination, so the element also works as a complete portfolio overview page.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Portfolio Element
Add the Portfolio Element and pick a Layout. Set the Number of Columns and Column Spacing, then decide which items appear: Pull Posts By category or tag, select the Categories or Tags you want (leave them empty for all), exclude others, and set Posts Per Page, Order By and Order.
For grid and masonry layouts, Text Layout controls the text under the image: Boxed puts it in a box with its own background (Grid Box Color) and padding, Unboxed shows it without a box, and No Text shows images only. Portfolio Title Display, Text Display and Excerpt Length decide how much text appears. With one column in the grid layout, Content Position can place the text next to the image instead of below it.
The carousel has its own options: Carousel Layout shows the title on rollover or below the image, and Carousel Autoplay, Carousel Show Navigation and Carousel Mouse Scroll control how it moves. Filters and pagination are only available for grid and masonry. Show Filters adds category buttons above the items, and Pagination Type offers numbered pages, a load more button or infinite scrolling.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Layout | Select the layout for the element. |
| Picture Size | fixed = width and height will be fixed auto = width and height will adjust to the image. |
| Text Layout | Controls if the portfolio text content is displayed boxed or unboxed or is completely disabled. |
| Grid Box Color | Controls the background color for the grid boxes. For grid layout this option will only work in boxed mode. |
| Grid Element Color | Controls the color of borders of the grid boxes. |
| Grid Separator Style | Controls the line style of grid separators. |
| Grid Separator Color | Controls the line style color of grid separators. |
| Number of Columns | Set the number of columns per row. With Carousel layout this specifies the maximum amount of columns. IMPORTANT: Masonry layout does not work with 1 column. |
| Column Spacing | Controls the column spacing for portfolio items. |
| Masonry Image Aspect Ratio | Set the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). IMPORTANT: The value of “1.0” represents a special case, which will use the auto calculated ratios like in versions prior to Tirenoa 5.5. |
| Masonry 2×2 Width | This option decides when a square 1×1 image should become 2×2. This will not apply to images that highly favor landscape or portrait layouts. IMPORTANT: There is a “Masonry Image Layout” setting for every image in the WP media library that allows you to manually set how an image will appear (1×1, landscape, portrait or 2×2), regardless of the original ratio. In pixels. |
| Content Position | Select if title, terms and excerpts should be displayed below or next to the featured images. |
| Equal Heights | Set to yes to display grid boxes with equal heights per row. |
| Posts Per Page | Select number of posts per page. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading. |
| Portfolio Title Display | Controls what displays with the portfolio post title. |
| Portfolio Text Alignment | Controls the alignment of the portfolio title, categories and excerpt text when using the Portfolio Text layouts. |
| Portfolio Text Layout Padding | Controls the padding for the portfolio text layout when using boxed mode. Enter values including any valid CSS unit, for example 25px, 25px, 25px, 25px. |
| Show Filters | Choose to show or hide the category filters. |
| Pull Posts By | Choose to show posts by category or tag. |
| Categories | Select categories or leave blank for all. |
| Exclude Categories | Select categories to exclude. |
| Tags | Select a tag or leave blank for all. |
| Exclude Tags | Select a tag to exclude. |
| Pagination Type | Choose the type of pagination. |
| Hide URL Parameter | Turn on to remove portfolio category parameters in single post URLs. These are mainly used for single item pagination within selected categories. |
| Post Offset | The number of posts to skip. for example 1. |
| Order By | Defines how portfolios should be ordered. |
| Order | Defines the sorting order of portfolios. |
| Text Display | Choose how to display the post excerpt. |
| Excerpt Length | Controls the number of words in the excerpts. |
| Strip HTML | Strip HTML from the post excerpt. |
| Carousel Layout | Choose to show titles on rollover image, or below image. |
| Carousel Scroll Items | Insert the amount of items to scroll. Leave empty to scroll number of visible items. |
| Carousel Autoplay | Choose to autoplay the carousel. |
| Carousel Show Navigation | Choose to show navigation buttons on the carousel. |
| Carousel Mouse Scroll | Choose to enable mouse drag control on the carousel. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Masonry needs at least two columns. Use the “Masonry Image Layout” setting of each image in the media library to force a picture to appear as landscape, portrait or 2×2.
- Give every portfolio item a featured image. The layouts are built around the image, and items without one look empty.
- Equal Heights (grid layout, more than one column) keeps the boxes in a row the same height, which looks tidier when the excerpts differ in length.
- Options set to Default follow the portfolio settings in Global Options, so several portfolio elements stay consistent without setting each one.
- Order By set to Random shows a different selection on each page load, but the Order option is hidden then because it has no effect.
- Infinite scrolling loads new items as the visitor reaches the end of the list. Avoid it when important content, such as a footer, sits below the element.