Showcase 5 Instructions

The ‘Showcase’ panel displays a visually-engaging grid of image buttons interspersed with non-interactive images to showcase your school or district’s most important messages and differentiators. This is headed by a title for the panel and a short text introduction.

The panel is powered by the following elements:

• A single Container element housing the panel elements and displaying the panel title and introduction text.
• A single Resource element that is set to 'Grid', powering the grid of image buttons and non-interactive images. This is set to display resources from the ‘Showcase 5’ Resources Gallery by default.

Each image button in the grid 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 CTA button linking to another page or resource on the website with further information.

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:

Image Area	Width (pixels)	Height (pixels)
Image Buttons & Non-Interactive Images
Row 1 Image 1	720px	640px
Row 1 Image 2	1000px	640px
Row 1 Image 3	300px	640px
Row 1 Image 4	720px	640px
Row 2 Image 5	1000px	640px
Row 2 Image 6	720px	640px
Row 2 Image 7	1040px	640px

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.

The grid of image buttons and non-interactive images in the ‘Showcase’ panel is powered by a single Resource element. By default, this has been set to show resources all resources from the ‘Showcase 5’ Resources Gallery.

To change the gallery of resources on display within the slideshow:

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 Resource element displaying the grid of image buttons and non-interactive images and click on the ‘gear’ icon in the top-right corner.
6. With the ‘Slideshow’ tab selected in the ‘Edit Resource Element Settings’ window, click on the ‘Browse’ button directly below the ‘Title’ field.
7. Select the desired gallery to display in the ‘Select a Gallery’ window.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Important: When updating this Resource element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the slideshow displays with the correct presentation.

Note: These instructions detail the steps required to display an existing gallery of resources within the ‘Showcase’ panel. To learn more about adding galleries in Composer please read our Knowledge Base article on how to organize resources into Galleries.

To add a new image button or non-interactive image to the grid within the ‘Showcase’ panel, begin by uploading the image for it 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. Select the folder containing the images for this panel 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 a new image or video.

Image Size: See "Panel Image Sizes" in the accordion panel above

Once the upload is complete, update the following properties in the ‘Edit Resource Details’ window if you would like the new image to display as an image button in the panel:

1. Click into the ‘Title’ field to add a short title for the image button. This will display in bold lettering along the bottom of the image button.
2. Click into the ‘Description’ field content editor and type in a short supporting statement for the image button hover state. We recommend adding a single sentence with a maximum of 10 words (for image buttons added to a narrow space in the grid) or 15 words (for image buttons added to the wider spaces). Any text that does not fit within the available space will be automatically truncated, with an ellipsis shown after the last word to indicate this to the visitor.
3. Press the return key and type in a short label for the button.
4. Highlight the button label with your cursor.
5. Click on the ‘Link’ icon button in the content editor toolbar.
6. Choose ‘Add Link’ from the dropdown list
7. Select a link type from the top of the ‘Link’ properties window.
8. Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is checked if the link opens a document or a page on an external website.
9. Click on the ‘Class’ dropdown within the ‘Link’ properties window and select ‘button-on-dark-1’ from the tooltip menu.
10. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.

With ‘Edit Resource Details’ still open, set an alternative description for the image button or non-interactive image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve the accessibility of your content: 

1. Click into the ‘Alt Text’ field and add a short description of the image.
2. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Finally, add the new image to the Resources Gallery powering the grid within the ‘Showcase’ panel:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Galleries’ tab.
3. Select the Resource Gallery powering your slideshow under ‘Public Galleries’. 
4. Click on the ‘Add Public Resource' button at the top-right of the gallery interface.
5. Select the image you have previously uploaded and add it to the gallery.
6. Optionally drag and drop the image within the gallery interface to reorder its position within the slideshow. 
7. Click the ‘Update’ button at the bottom-right of the Gallery interface.

Once the gallery has been updated, the new image button or non-interactive image will display automatically as part of the grid in the ‘Showcase’ panel.

Important: The grid within the ‘Showcase’ panel supports a maximum of 7 items (including image buttons and non-interactive images). Adding more than this may result in the panel displaying incorrectly.

For best results, please choose a non-interactive image to display as the third resource in your Resources Gallery. This image takes on a very narrow shape within the panel on desktop devices and is not as well suited to the display of text.

The order of the image buttons and non-interactive images within the grid in the ‘Showcase’ panel is based on the order of the images within the Resources Gallery powering this content.

To reorder the image buttons and non-interactive images:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Galleries’ tab.
3. Select the Resource Gallery powering your slideshow under ‘Public Galleries’.
4. Drag and drop the resource within the gallery interface to reorder its position within the grid in the ‘Showcase’ panel.
5. Click the ‘Update’ button at the bottom-right of the gallery interface.

Once the gallery has been updated, the image buttons and non-interactive images you have moved will display in the updated order.

Important: For best results, please choose a non-interactive image to display as the third resource in your Resources Gallery. This image takes on a very narrow shape within the panel on desktop devices and is not as well suited to the display of text.

To remove an existing image button or non-interactive image from the grid in the ‘Showcase’ panel:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Galleries’ tab.
3. Select the Resource Gallery powering your slideshow under ‘Public Galleries’.
4. Hover over the resource you want to remove and click on the ‘check’ icon. This will select the file and open the ‘Resources Selected’ panel on the right of the gallery interface.
5. Click the ‘Remove from Gallery’’ button in the ‘Resources Selected’ panel.
6. Click the ‘Update’ button at the bottom-right of the gallery interface.

Once the gallery has been updated, the image button or non-interactive image you have removed from the Resources Gallery will no longer display in the slideshow.

Note: Removing images from a Resources Gallery will remove them from the ‘Slideshow’ panel, but the files themselves will still exist in the Resources module in case you want to use them again in the future.