skip to primary navigationskip to content
 

'Teaser' home page structure

 

There are two types of home page in Falcon. The first, which is selected by default when a site is created, is a basic page that you can edit in the usual way. You can add a large image (or several to make a carousel), which will appear at the top of the page.You can also add portlets on the right hand side of the page.

The second option for a home page is the ‘Teaser home page’. It is a modular design that is split into four columns.

  • The image or carousel spans three columns.
  • Beneath that are two ‘teasers’, which occupy two columns either in a vertical or horizontal configuration.
  • The third column under the image can be occupied by several portlets, including event listings and RSS feeds, or a third teaser.
  • The fourth column is reserved for the usual right-hand column portlets.

The footer is built from four columns of contacts or links, but these don’t all need to be filled

 

To populate all of these slots, you need to click on ‘Manage portlets’.

Carousel portlet

To create a carousel portlet:

  • Under carousel, click on ‘add portlet’ and select ‘Carousel image portlet’.
  • Click ‘Browse’ and select an image you’ve uploaded. Images for this part of the home page need to be 883 pixels wide and 431 pixels high.
  • Add a caption for the image. This will appear in a black band overlaying the bottom 50 pixels of your image, so make sure this won’t obscure anything essential in the image – for example, a sign or other text.
  • Add an image title and alt text for your image. The former will appear when the pointer hovers over the image. The latter is required for accessibility, and should be a useful description for those who use a speaking web browser.
  • Add a link for the image, if you wish. This is where the user will be taken in they click on it. It could be a link to a page on your site, which you can add in the ‘content item’ field by clicking on ‘browse’ and selecting a page from your site contents. Or it could be an external link, which you enter in the ‘external url’ field. Remember to include ‘http://'.
  • Click save. Your first carousel item now appears under ‘Portlets assigned here’. You can go ahead and add another carousel item by clicking on ‘add portlet’ and repeating the process. When you have more than one image, navigation arrows will be overlaid on the bottom right of your image. This is another aspect to bear in mind when cropping your photos.

From the ‘manage portlets’ screen, you can delete, temporarily hide and change the order of your carousel images. When users arrive at your page, it will always display the first image first, and slowly cycle through the items on your carousel. It’s usually best to keep the number of images fairly small – for example, three or four.

Teaser portlets

For the teaser portlets:

  • Under ‘teasers’ click on ‘Add portlet’ and select ‘Teaser portlet’.
  • Select an image for your portlet. The recommended size for teaser images in the first two columns is 250 pixel squares.
  • Add an image title - this becomes the 'alt' text that describes the image for those who can't see it.
  • Define teaser text that will appear beneath or to the right of the image. If you leave this blank, the portlet will display the description from the content item you have selected as a destination when people click on the ‘Read more’ link.
  • Choose a display configuration – either horizontal or vertical. If you choose ‘vertical’, you’ll need to remember to have two teasers with this setting to fill the row.
  • You can use the ‘type’ setting to displaying an icon if the teaser is for video or audio content.
  • You can link the teaser to either a content item on your site (for example, a folder or page) or an external link. Once you’ve selected your link, you may customise the wording of the ‘Read more’ button. For example, you might want it to be ‘Watch the video’ if it is a link to a video.
  • Then save your changes. Your portlet will appear under the teaser heading on the home page portlet management screen. On this screen, you can permanently delete, temporarily hide and re-order your teasers, once you have more than one.

Portlets in the third column

For the third column under the carousel, you have a choice of portlets: events, jobs, news, a single RSS feed or a feed mixer that combines several RSS feeds, or even a third teaser portlet.

It’s best to balance the number of portlets in the third column with the number of teasers in the first and second columns, to keep your home page even.

Portlets in the fourth column

For the fourth column, you have a wide selection of portlets to choose from.

  • Calendar: Adds a standard calendar.
  • Collection: Allows you to show the RSS feed from a collection. Collections are created to make a list of items that share certain characteristics. You can find out more about them on the Falcon help pages.
  • The events, jobs and news portlets collect the titles of items in those sections of your site and display them as links to the relevant pages. In each of them, you can set the number of items you would like it to display.
  • The RSS feed adds a single RSS feed to your page, while Feed mixer allows you to combine several. Note that the titles might be quite long, so displaying more than 4 or 5 items could take up a lot of space.
  • The link box displays a set of links you define, either to internal items on your site or external URLs. A selection of social media icons are available for external links.
  • A quick upload portlet allows you to upload a batch of items to the current folder – for example, photos.
  • Recent ploneboard conversations and review list will only work if you are using a ploneboard forum or if you are an admin use who moderates other users’ submissions.
  • The social sharing portlet provides buttons that enable users to share links to your page via social media. By default, it is based on the sharing ID and targets configured in the site customisation setup – which you can get to by clicking on you user name, and site setup. You set a local sharing ID for the portlet if, for example, one part of your site uses a different one.
  • A static text portlet can be used to display text (for example, long-term announcement), an image or an iframe (for example, containing a video). There is an option to not display the title of the portlet.
  • Teaser portlets in the fourth column are similar to teaser portlets in columns 1 and 2, but require an image that is 349 pixels wide and 125 pixels high.
  • The oEmbed portlet allows you to display external content such as the University map, or a video from the Streaming Media Service, YouTube or Vimeo. All you need to do is add the URL for the content. There is an option to display the title of the portlet and some text or omit it.