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.

1.) Create Team Members

To create new members for your team head over to the WP admin dashboard > Team Showcase > All Members page. MTS automatically creates 10 dummy members for you when you first install the plugin. You can edit these or create new members just like you would create posts. The dummy members are assigned either of two groups – Marketing and Finance. You can create as many groups as you like. But please ensure every member that you create is assigned to a group, because when building a new team grid you will need to select the groups that you wish to show in it. So any members without a group will be left out from being displayed in the team grids.

2.) Select A Preset Grid Design

To build a new team grid head over to WP Admin Dashboard > Team Showcase > Build New Showcase. On this grid builder page locate the ‘MTS: Load New Preset’ section. You can use this section to select a preset template and work with essential customization options to create your grid. For even more in-depth options or to further edit the structure of the member templates use the Advanced Editor that pops up when you click the green button on the top left of the grid. Please remember that any changes you make to the Member Template will be reset if you use the Load New Preset section to re-load a preset template with its default settings.

3.) Select Members To Display

In the Load New Preset > Query Settings section you can give instructions on which members to display in the grid. Please ensure the correct member groups are selected in this section. 

4.) [Advanced] 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.

5.) [Advanced] 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 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 set 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.

6.) Place Shortcode on Front End

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 Advanced 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