skip to primary navigationskip to content
 

How to build the teaser home page

When you first switch your display to the teaser home page the screen you’ll get will be similar to this:

teaser home page default

 

The ‘Manage portlets’ screen for the Teaser home page allows you to add component portlets in various areas of the page, and looks like this:

teaser hp manage portlets

What you can add

You will need to prepare and upload the images you want to use on your home page – they need to be at the following sizes:

  • home page carousel: 883 x 431px (note that a caption covers a 50px strip at the bottom of the image)
  • teaser image: 250px square
  • teaser portlet: 349 x 125px

Make sure you optimize the images so the files are as small as possible, especially if you are using a carousel containing several. If in doubt about sizing and optimizing images, please get in touch with  for help.

Carousel

To insert an image or images for the carousel, go to the pop-down and select ‘Carousel Image Portlet’:

adding carousel image

You will then see a screen like this:

insert carousel image

  • browse to select the image you want to add
  • add a caption for the image if you want. It will be added on a 50px high black band overlaying the bottom of the the image.
  • Add image title (which will be shown when the pointer hovers over the image) and the alt text for the image. Either could contain the credit for the photo – the alt text ought to be descriptive for those who use a speaking browser.
  • add either an internal or external link for the image – this is where the user will be taken if they click on it.

When you save this configuration, you will see the item has been added under the Carousel section of the portlet screen:

carousel item added

To add another item, go to the pop-down menu again, so you build up a list of items. If you want to delete an item, click on the orange cross on the right of the line. You can deselect items for the carousel by clicking on ‘hide’ to rotate a selection, and you can reorder them by clicking on the arrowheads.

Portlets on the right

The portlets shown on the right side of the home page will be inherited through all folders and pages unless this inheritance is blocked. It can be useful to consider this when laying out the home page.

When you select the 'Add portlet' pop-down list, the options available look like:

right hand portlets

This is the full list of portlets – some of these are also available in the third column or under the teasers. This is what they are all for:

  • Calendar portlet: Adds the standard Plone calendar.
  • Carousel portlet: This is still in the list because existing old-style carousels still work at the moment, but you can’t add new ones like this. Use the carousel at the top of the page.
  • Collection portlet: Collections are dealt with in a separate session.
  • Events: Along with separate but similar portlets for News and Jobs, this portlet collects the titles of Events and displays them as a list with a link to the full entries. If you add an Events portlet you can select how many items to display - you should leave the Workflow state as configured, unless you have special reasons to do otherwise.
  • Feedmixer and RSS Feed: These portlets are both for adding RSS feeds to your page. The first allows you to mix two or more RSS feeds together, while the second allows you to just insert one feed. When adding a Feedmixer portlet, since the links for the different feeds look the same, you need to be careful that you give the portlet an accurate title. Be aware that there may be quite long titles and displaying more than 4 or 5 items could take up quite a lot of space.

         To add a single RSS feed portlet, the set-up screen is very similar but only a single rss feed can be added. Do be aware that this publishing system will not publish badly structured feeds - the Feedmixer portal will not work at all if one of the feeds is badly structured.

         The RSS portlet has been set up to recognise RSS feeds from talks.cam and alter the footer text accordingly. Additional information is available about finding the URLs of RSS feeds is available.

  • Link box: To create a link box you just need to add the URLs and link text to the portlet. The order of the links can be changed by moving lines up and down with the arrow icons.
  • Quick upload portlet: Allows you to upload a batch of items into the current folder. Needs to be enabled for any folder requiring quick upload. There is more information about settings for the portlet at http://plone.org/products/collective.quickupload
  • Recent ploneboard conversations and Review list: These portlets will only work either if you are using ploneboard or if you are an admin user who moderates other user's submissions. They are included in the right-hand column but aren’t appropriate below the content.
  • Static text portlet: This is useful if you need to make a long-term announcement or add a block of text that refers elsewhere for full information. A static text portlet can be used to add just an image or to add an iframe. If you add an iframe into a static text portlet you need to paste the code while the wysiwyg editor is in ‘html mode’.
  • Teaser portlet: This can be used instead of a static text portlet as it is better formatted, with a specific size of image it expects.

Because the portlets in the content area can only be added to the home page, you do not have to worry about the settings in the 'Block/unblock portlets' area of the page. When portlets are used in the right hand column these settings are important: if you don’t want inherited portlets to appear in a folder, select  Block against ‘Parent portlets:’ and then save the settings. Leave the ‘Group portlets:’ and ‘Content type portlets:’ settings as they are.

Teasers (on the left under the main picture)

To add teasers to the home page, go to the pop-down and select ‘Teaser Portlet’:

teaser portlet box

You will then see this configuration screen:

teaser portlet config screen

The options are pretty self explanatory:

  • the heading, any accompanying image and the text
  • the choice to make the teaser horizontal or vertical
  • the type allows you to add an icon if the teaser is for video or audio content
  • you can add a link to an internal item or an external url
  • you can replace the ‘Read more’ link with other text if it is more appropriate.

As usual, you will need to save the item – you will then see that item listed under the teaser heading on the home page portlet management screen. To add another, repeat the above steps. When you have added some more, you can reorder them using the arrowheads or hide some of them (by clicking on 'hide') to change a selection.

Portlets in the third column

If you want to add some portlets in the third column of the page, the choice is limited to the following:

third column portlets

You add them as detailed above.