Close

Creating a Showcase

Setup gorgeous grids and tables in just a few steps. The process is simple and a few pointers will set you on your way.
Video Tutorial
Step 0: Add Members
You need to have some members, at least dummy members before you can begin setting up your showcases. MTS automatically adds dummy members when you install the plugin. The members are in ‘Modern Team Members’ custom post type. To view them, go to Dashboard > Team Showcase > All Members. You can add 10 more dummy members if you wish with a single click of the ‘Add Dummy Members’ button in the All Members page. Two new categories are already set for you: Marketing and Finance, and members are added to these.
Step 1: Select a Preset
When you have members, click on Team Showcase > Build New Showcase so we can get started with building our showcase. You can create showcases from scratch or start with presets, which will make the process much more convenient and faster. Configure the settings for your preset in ‘MTS: Load Preset’ section then press Submit. In a moment, the preset showcase will appears on your screen.
Step 2: Setup a Query
Now let’s customize our showcase. For this you need to open up the showcase editor. Click the green cog icon at the top left of your showcase to bring up the editor. The editor has 3 settings panels: Query, Member Template and Overall. If the Query panel is not already open, click to open it up. Right now there is no query configured, and the editor is using its default query settings for your showcase. By default it starts with its query panel. If no query is selected the plugin automatically targets the dummy data. You can change the query, targeting any post type, and categories for your showcase. To show all available posts in the query enter -1 in the ‘Number of posts’ input. Try changing this number and hit ‘Submit Query’ to see the changes in a few moments. The ‘additional query args’ input at the bottom is for WordPress developers who are familiar with WP Query.
Step 3: Customize Member Templates
The Member Template panel shows the visual template of the member cells. It will help you make changes to the look and elements of your member cells and can be used to create complex structures. The Member Template editor is a subject that deserves its own documentation page, and is covered in more detail here. You can duplicate and delete elements to customize the structure of the template, for example if you wish to add more attribute fields, you would locate the attributes elements, duplicate them, then edit the copy to create your new elements. You can embed meta keys into the content area of elements and also a list of pseudo meta keys such as {{post_title}}, {{post_link}}, etc. The full list of the pseudo meta keys can be accessed via the ‘Extended meta key list’ button at the bottom of the template editor. You can also setup the meta key logic for elements to ensure they are shown or hidden based on on set condition. Meta keys are covered in more details here, while more information can be found on Meta Key logic here.
Step 4: Customize Overall Settings
The overall settings panel lets you add filtering and caching facilities to your showcase. Filtering can be done on basis of {{category}} or any meta key. It also lets you select the layout of the showcase. You must be familiar with Masonry layout, the Fit Rows layout will equalize the heights of your showcase rows. It equalizes based on tallest row. You also get to edit individual device (screen size) based settings for your showcase which are triggered upon page load and screen resize. The Height Calculation system has an Aspect Based option. It will force the height of the cells based on their width and the aspect ratio you entered. If you change the Height Calculation system from Aspect Based to Flexible, or vice versa, ensure you change it for all the devices, unless you want it to vary based on device.
Step 5: Showcase on FrontEnd
When you’re done, you’ll want to save the showcase with the disk icon at the top right of the showcase editor. Now you can use the shortcode given above the showcase to print the showcase on any post, page or widget area. And as long as you’re logged in as an admin on your website, you’ll be able to use the showcase editor in the same way on the front end as well. In case you want entirely different showcases to show up if user is on mobile or tablet, then you can add these parameters as well to your shortcode: mobile=”showcase_id” tablet=”showcase_id