The Cruise Home template displays four top-task panels, a feature article, homepage tabs built from the top level menu and three news and event panels.
Site Logo
The site logo appears centred at the top of the page. It is picked in the subsite configuration.
Top Task Service Directory
The background of this section of the page is either a colour provided by the site's CSS, or an image. To use an image, relate a "background" image type to the home page.
Up to four articles can be displayed. These are the child articles of the "Service directory article" chosen in the Home template article extras. If you don't pick a service directory article, the section will be hidden.
Each block in the menu uses the target article's best link text and will include a page icon (uses the page icon media definition) if the target article has one. The "primary" icon is displayed initially. When the menu expands to show the second level menu, the secondary version of the icon is used.
We recommend these articles use the List template, but they don't have to.
There are two "modes" the four blocks can operate in, controlled by the "allow links" setting in the Home template article extras.
Allow Links - "No"
This mode exists for backwards compatibility - we don't recommend using it as it can cause some unexpected behaviour.
In this mode, clicking on a block always expands the second level menu. It will do this whatever template the block article is using, and whether or not the block article has child articles. This can mean the menu will expand to reveal nothing.
Allow Links - "Yes"
This is the recommended mode.
If an article in the menu has child articles of its own, clicking on the menu item will reveal the second level menu (screenshot below). This is the behaviour whatever template the article in the menu is using.
If the article has no child articles, the menu item acts as a link to that article. This means you can put redirects and single articles into the menu.
Second Level Menu
Clicking on a top level article that has child articles of its own will display up to six of those child articles in a second level menu.
The text for each item in this menu is taken from the best link text of the article in the menu. If there are more than six items in the menu, a "View All" item appears in position seven. Clicking this takes the user to the parent services menu item. For this reason we recommend top task articles use the List template, but they don't have to.
For example, in the image above, clicking "View All" will take the user to the "Pay" article, which will display a list of "Service 1 A", "Service 1 B" etc.
View All
A "View all services" button appears beneath the menu, which links to the article you picked in the Home page extras.
The text for the button is set in the "services directory link" text box of the Home template's article extras. If no text is entered into this box, the text will be taken from the target article.
Site Search
A search bar is displayed next to the top tasks. It behaves as already described in the Page Header and Top Level Menu article, except that the box is always visible - there is no need to click on the search icon to expand it. You can change the text that appears above the search bar in the Home article extras.
Featured Task
The featured task article is set in the Home article extras. You can choose whether it appears beneath the top task menu (as in the screenshot at the top of the page) or between the home tabs and news blocks. If it appears below the tabs, the image will be used as a background to the text, as in the screenshot below.
The chosen article's title, summary and related image, if present, are displayed. The whole panel acts as a link to the full article.
Home Tabs and Main Menu
In the article extras of the Home template you can choose whether the site's main menu appears in the usual header position, or as a series of tabs (the "Residents", "Business" and "About" tabs in the screenshot at the top of the page). If you choose to display tabs you can also choose whether the child articles of the homepage provide the content for them, or you can select articles from anywhere in your site.
The tab panel behaves as follows. Clicking a tab displays the child articles of that menu item in a list. The text for each item is the best link text of the article. If a tab article doesn't have any child articles, clicking the tab takes you directly to that article. Beneath the lists of child articles is a link to "view all" which takes you to the article providing the content for that tab.
Take care over the number of articles and length of their titles. The tabs area is designed to show a maximum of four tabs - having more than four will arrange them as an accordion. Having a large number of articles, or articles with long titles, will cause the main menu to wrap onto multiple rows.
News Panels
Up to three panels can be displayed in this block. Each panel is created by relating an article to the homepage. The behaviour of each panel depends on the template the related article is using.
Default
Related articles using the Default template display content from a single article with its summary. The article title, image and intro/summary text populate the panel. The whole panel acts as a link to that article.
List
Related articles using the List template display content from the first article in the list and a link to the full list. The panel title is the title of the List article and acts as a link to the list. The related image, title and summary are taken from the first article in the list and act as a link to that article.
Redirect
Related articles using the Redirect template can link to an external site or a media item, or be used to embed a social media feed.
Links and Media
If the redirect article has no body text, the title appears at the top of the panel, followed by the first related image and intro/summary text. The panel will link to the first related link or media item.
Embedded Content
If you add body text to the redirect article it will be output instead of the title, summary and image. This means you can add a script inline to the body text to embed a social media feed or video in the same way as you would when embedding content into the main body of any other article.
For example, using Twitter's embedding code generator at https://publish.twitter.com (opens new window), the embed code for the GOSS Interactive Twitter account is:
<a class="twitter-timeline" href="https://twitter.com/gossinteractive">Tweets by GOSSInteractive</a> <script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Share this page
