Showcase 1 Instructions

The ‘Showcase’ panel displays a grid of visually-engaging image buttons promoting your school’s most important messages and differentiators. This is headed by a title for the panel and a short text introduction. 

Each image button in the showcase consists of a title, a supporting image and an overlay that displays when the visitor hovers over it. This overlay contains a short text description and a ‘Learn More’ button to open a pop-up displaying more information.

The layout of the showcase grid can also be customized to display the image buttons in 2, 3 or 4 columns on desktop devices.

This panel is powered by a single Post element that is set to 'List' inside a Container element.

The following pixel dimensions are recommended for the images uploaded to the Resources module for use in this panel. Following these guidelines will help you to achieve an ideal balance of visual quality and loading speed for your content:

A title and short text introduction displays at the top of the ‘Showcase’ panel. To change this content, begin by updating the panel title:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Showcase’ panel.
5. Hover over the Container element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Edit Container Element Settings’ window.
7. Update the text or click on the blue toggle to the right of the ‘Title’ field to hide the element title.

With the ‘Edit Container Element Settings’ window still open, update the introduction text:

1. Scroll down to the ‘Header Content’ field and click into the content editor.
2. Update the text in the text area. We recommend adding a single paragraph with a maximum of 40 words to maintain consistency with the original design.
3. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

By default, the ‘Showcase’ panel will display a grid of image buttons in 3 columns on desktop devices. To customize the display of the grid to display in 2, 3 or 4 columns:

1. Go to the Pages panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Showcase’ panel.
5. Hover over the Container element and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ at the bottom of the ‘Edit Container Element Settings’ window.
7. Click into the ‘Custom Class’ field, placing your cursor directly after the existing ‘showcase-1' custom class.
8. Press the space key and type in one of the following additional classes described in the table below to set the desired column structure.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

The ‘Showcase’ panel grid is powered by a single Post element displaying the latest 6 posts from one or more selected boards in the Posts module.

To reconfigure the set of posts on display in the grid:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Showcase’ panel.
5. Hover over the Post element displaying the slideshow and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Content Filters’ in the ‘Edit Post Element Settings’ window.
7. Click on the ‘Select Board’ button and choose one or more boards that you want to feed into the slideshow.
8. Click on ‘+ Formatting’ further down within the ‘Edit Post Element Settings’ window to optionally update the number of posts on display.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: When updating this Post element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the posts display with the correct presentation.

When the visitor clicks on an image button in the ‘Showcase’ panel grid, further information will display in a pop-up. By default this pop-up will display the following details:

• Post Title
• Author
• Publish Date
• Publish Time
• Categories 
• Summary
• Body
• Tags
• Thumbnail

To reconfigure the details showing in the image button pop-up:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Showcase’ panel.
5. Hover over the Post element displaying the showcase grid and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Pop-up Details’ in the ‘Edit Post Element Settings’ window.
7. Check the content details you would like to include in the post pop-up. You may choose to include any of the options available.
8. Click on ‘+ Formatting’ in the ‘Edit Post Element Settings’ window.
9. Optionally update the display settings in the ‘Popup Thumbnail’ section
10. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: The details on display in the image button pop-up include category and tag labels by default, but adding these to a post is entirely optional. These labels will only show in the image button pop-up if categories or tags have been added to the post.

Each image button in the ‘Showcase’ panel grid is powered by an individual post added to the Posts module. 

To add an image button, begin by uploading its supporting image to the Resources module:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Resources’ tab.
3. Create or select an existing folder for your image in the ‘Public’ directory 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the upload options available and upload the new image.
6. Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:
   1. Click into the ‘Title’ field and add a short title for the image. This is for internal use and will not display on the homepage.
   2. Click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve the image’s accessibility.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Image Size: The recommended upload size for the supporting image is 800px (wide) by 683px (high). 

With the supporting image uploaded, add a new post to the Posts module:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
2. Click on the ‘Boards’ tab.
3. Select the board that has been configured to display in the 'Showcase' panel grid. If you have configured the grid to display posts from multiple boards, select the most suitable board for the content of your image button.
4. Click on the ‘Create Post’ button at the top right of the Board interface.
5. Add the content for your new post:
   1. Click into the ‘Title’ field and add a short title for the image button.
   2. Click into the ‘Body Content’ content editor and add the content that displays within the image button pop-up.
   3. Open the ‘Summary’ panel and type the short description that will display in the image button overlay. We recommend adding a maximum of 20 words to maintain consistency with the original design.
   4. Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button to select the image you uploaded previously for the supporting image.
6. Click on the ‘Save’ button at the bottom right of the Post interface.
7. Click on ‘Yes’ in the ‘Publish Now’ window to publish the post immediately.

Once the post has been published, it will display in the ‘Showcase’ panel grid automatically. The posts are set to display in date order.

Tip: To learn more about adding posts in Composer please read our Knowledge Base article on how to make a new post.

Each image button in the ‘Showcase’ panel grid is powered by an individual post added to the Posts module. 

To update an existing image button, begin by uploading a new supporting image for it in the Resources module:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Resources’ tab.
3. Create or select an existing folder for your image in the ‘Public’ directory 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the upload options available and upload the new image.
6. Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:
   1. Click into the ‘Title’ field and add a short title for the image. This is for internal use and will not display on the homepage.
   2. Click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve the image’s accessibility.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Image Size: The recommended upload size for the supporting image is 800px (wide) by 683px (high). 

With the new supporting image uploaded, update the individual post powering the image button you want to modify in the Posts module:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
2. Click on the ‘Boards’ tab.
3. Select the board that has been configured to display in the 'Showcase' panel grid. If you have configured the grid to display posts from multiple boards, select the most suitable board for the content of your image button.
4. Hover over the post entry you want to remove and click on the post title.
5. Update the content of the existing post:
   1. Click into the ‘Title’ field and update the title of the image button, keeping this as short as possible.
   2. Click into the ‘Body Content’ content editor and update the content that displays within the image button pop-up.
   3. Open the ‘Summary’ panel and update the short description that will display in the image button overlay. We recommend adding a maximum of 20 words to maintain consistency with the original design.
   4. Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button to select the image you uploaded previously to replace the existing supporting image.
6. Click on the ‘Save’ button at the bottom right of the Post interface.
7. Click on ‘Yes’ in the ‘Publish Now’ window to publish the post immediately.

Once the post has been published, the updated content will display in the ‘Showcase’ panel grid automatically. The posts are set to display in date order.

Tip: To learn more about updating posts in Composer please read our Knowledge Base article on how to make a new post.

Each image button in the ‘Showcase’ panel grid is powered by an individual post added to the Posts module. To remove an image button, delete the individual post powering it from the board that powers this panel:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
2. Click on the ‘Boards’ tab.
3. Select the board displaying the post you want to remove.
4. Hover over the post entry you want to remove and click on the ‘Delete’ icon at the bottom right corner.
5. Click on ‘Delete Post’ in the ‘Delete Post’ validation window.

Once the post has been deleted, it will be removed from the ‘Showcase’ panel grid automatically. 

Tip: To learn more about removing posts in Composer please read our Knowledge Base article on how to remove posts from display.