Post + Calendar 4 Instructions

The ‘Post & Calendar’ panel displays a short introduction to events taking place at your school or district, supported by a visually engaging list of calendar events. It consists of the following features inside a Container element:

• 'Featured News' Story: A single featured news story or announcement that displays at a large size to attract the visitor’s attention. It is powered by a single Post element with the story displaying a thumbnail image, story title, short text summary and a ‘Read this Article’ link. The visitor can click on the story to view the full details in a pop-up.

• 'Latest News' List: A list of two recent news stories and/or announcements powered by a single Post element. Each story displays a thumbnail image, the story title and a ‘Read More’ link. The visitor can click on a story to view further story details in a pop-up.

• Calendar List: A list of upcoming events from one or more school calendars. This is powered by a single Calendar element. Each event in the list displays the event title, its date and time, the event location and a ‘Read More’ link. The visitor can click on an event title or ‘Read More’ link to view further details about it in a pop-up.

• ‘View All News’ Button: A button at the bottom of the panel that takes the visitor to the page on your website displaying all news stories.

• ‘View Full Calendar’ Button: A button at the bottom of the panel that takes the visitor to the page on your website displaying the full calendar.

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

To update the title of the ‘News & Calendar’ panel:

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 ‘News & Calendar’’ 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.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

The featured story is powered by a single Post element displaying the latest post from one or more selected boards in the Posts module.

To reconfigure the board (or boards) powering the featured story:

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 ‘News & Calendar’ panel.
5. Hover over the Post element displaying the featured story 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’ 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 the title or ‘Read More’ link for the featured story, the full details of the story will open in a pop-up. By default this pop-up will display the following content:

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

To reconfigure the details shown in the story 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 ‘News & Calendar’ panel.
5. Hover over the Post element displaying the featured story 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 feature options you would like to show in the story 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 to modify its size, shape and alignment within the pop-up.
10. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: The content on display in the story pop-up includes categories and tags by default, but adding these details to a post is entirely optional. The tags and categories will only show in the story pop-up if they have been added to the specific post in the Posts module.

The featured story is powered by an individual post added to the Posts module. 

To add a new featured story, begin by uploading a thumbnail image for it:

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 new thumbnail 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:
• Click into the ‘Title’ field and add a short title for your image (this is for internal use and will not be seen by the visitor).
• Click into the ‘Alt Text’ field and add a short description explaining the contents of the image. This is used by screen reading software to describe the image for visitors who are unable to see it.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended image size for the post thumbnail is 800px (wide) by 716px (high).

With the post thumbnail uploaded, add the 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 the featured story. If you have configured the featured story to display from multiple boards, select the most suitable board for the content in your post.
4. Click on the ‘Create Post’ button at the top right of the Board interface.
5. Add the content for your new post:
• Click into the ‘Title’ field and add a short title for your story.
• Click into the ‘Body Content’ content editor and add the full content of the story.
• Open the ‘Summary’ panel and type a short description in the content editor to introduce visitors to the story. We recommend adding a maximum of 20 words here to maintain consistency with the original design.
• Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button to select the image you have uploaded for the thumbnail.
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 as the featured post automatically as long as it has the most recent publish date of the posts in the board or boards that have been set to display in this Post element.

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

The ‘Latest News’ list is powered by a single Post element displaying the latest 2 posts from one or more selected boards in the Posts module.

To reconfigure the set of posts on display in the ‘Latest News’ list:

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 ‘News & Calendar’ panel.
5. Hover over the Post element displaying the ‘Latest News’ list 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’ 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 the title of a story in the ‘Latest News’ list, the full details of that story will open in a pop-up. By default this pop-up will display the following content:

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

To reconfigure the details shown in the story 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 ‘News & Calendar’ panel.
5. Hover over the Post element displaying the ‘Latest News’ list 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 feature options you would like to show in the story 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 to modify its size, shape and alignment within the pop-up.
10. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: The content on display in the story pop-up includes categories and tags by default, but adding these details to a post is entirely optional. The categories and tags will only show in the story pop-up if they have been added to the specific post in the Posts module.

To add a new story to the ‘Latest News’ list, begin by uploading the post thumbnail:

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 new thumbnail 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:
• Click into the ‘Title’ field and add a short title for your image (this is for internal use and will not be seen by the visitor).
• Click into the ‘Alt Text’ field and add a short description explaining the contents of the image. This is used by screen reading software to describe the image for visitors who are unable to see it.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended image size for the post thumbnail is 512px (wide) by 512px (high).

With the post thumbnail uploaded, add the 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 the latest news stories. If you have configured the ‘Latest News’ list to display stories from multiple boards, select the most suitable board for the content in your post.
4. Click on the ‘Create Post’ button at the top right of the Board interface.
5. Add the content for your new post:
• Click into the ‘Title’ field and add a short title for your story.
• Click into the ‘Body Content’ content editor and add the full content of the story.
• Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button to select the image you have uploaded for the thumbnail.
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 ‘Latest News’ list automatically as long as it is one of the 3 most recent posts (based on its publish date) within the board or boards that have been configured to display in this Post element.

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

The list of events in the ‘News & Calendar’ panel is powered by a single Calendar element that displays up to 3 upcoming events taking place within the next 30 days from one or more selected calendars in the Calendar Manager.

To reconfigure the calendars on display in the Calendar list:

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 ‘News & Calendar’ panel.
5. Hover over the Calendar element and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ General Settings’ in the ‘Edit Calendar Element Settings’ window.
7. Click on the ‘Calendars’ dropdown and select the calendars that you want to feed into the slideshow.
8. Optionally update the fields specifying the number of items to display and the date range this should be restricted to.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Calendar Element Settings’ window.

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

Tip: To learn how to add new events to a calendar, please visit the Knowledge base article on Uploading Calendar Events.

To update the ‘View All News’ and/or ‘View Full Calendar’ button at the bottom of the ‘News & Calendar’ panel:

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 ‘News & Calendar’’ panel.
5. Hover over the Container element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ at the bottom of the ‘Edit Content Element Settings’ window.
7. Click into the ‘Footer’ Content’ content editor.
8. Update the existing text for the button you want to update, making sure not to remove the link already applied to it. 
9. Right-click on the same link and choose ‘Edit Link’ from the action menu.
10. Select the desired link type from the top of the ‘Link’ properties window.
11. Update the link settings to set up a new link destination for the button.
12. Check the ‘Open link in a new tab’ checkbox if the updated link opens a page that is external to your webpage.
13. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
14. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.