Creating showcase items and timelines

A showcase item is a panel or button that displays text and typically an image. Showcase items can optionally link to other pages.

Creating a showcase item

Showcase items are all created in a similar manner but there are specific details for each type described later.

Initally, edit the page you want to use for the showcase item and enter any text (headings, images and links) thatyou want at the top of the page.

Put the cursor at the end of this text wehere the showcase item(s) should appear.

Click on the EWPH Showcase Item button above the edit area and select your item type from the dropdown list (see later for details).

A table will be inserted into page with hints about what to place in each cell. The table rows and cells are shown using dashed lines.

It is important that you only change the table cells created for you. Do not:

• add or delete table rows
• add or delete table cells
• put any text or images between different tables

When the page is displayed any superflous text or errors will be shown in red at the bottom of the page. As long as you only edit the given table cells everything should work fine.

Any changes to table cell alignment, cell colour or classes will be ignored (except Timeline items below).

In the description boxes for the items you can format the text as you like: headings, bullet/numbered lists, colored text or background are all supported. You can insert images (see How To insert a single picture) but you cannot insert a link (except for landscape items).  Please do not nest tables within the cells (it really doesn’t work well).

To remove a showcase item any cell in the table and click on the table edit icon on the editor toolbar (its the icon that looks a a spreadsheet) and click on Delete table. Warning: this will not ask for confirmation so the table and all your text will simply disapper, so be careful.

Creating different Showcase Items on the same page

If you want to use multiple showcase items such as a landscape description first followed by a timeline then each group of different showcase items must be wrapped in a start and end line as follows:

• Before the first showcase item table create a new line with the text [ewph-showcase]
• After the last item create a new line with the text [/ewph-showcase]

Use these start end markers around each group of showcase items that you want to add to your page. You will find an example of this approach on thsi page and the main page.

Managing showcase item links

Some showcase items create a placeholder link typically called Continue Reading or Page Link (these will normally appear as blue underlined text). If you do not want to create a link then leave these lines unedited (or delete them). 

To setup a page link you left click on the text (in blue) and a popup will appear with the dummy link (#) shown and a pencil icon for editing the link. Click on the pencil and you will be able to edit the link. You have to basic choices:

1. For other EWPH web pages just delete the # sign and type in part of the page title to search for pages that match that title (letter case insensistive): for example, entering “how to” will findall of the how to guide page. Select your page from the list and (important) click on the blue icon with a bent left pointing arrow to confirm your change.
2. To link to another web site go to the page you want to link to and click in the URL bar at the top of the browser window and copy the sected text (Ctrl-C). Paste the saved URL to the link edit box replacing the # symbol (Ctrl-V) and (important) click on the blue icon with a bent left pointing arrow to confirm your change. As a matter of style if you link to another web site you shoudl open a new tab page. You can do this by using the properties icon (the star/wheel icon to the right of the save changes arrow) and check the open link in new tab box and click Update.

It is important that you click on the blue icon with a bent left pointing arrow to confirm your change otherwise they will be lost.

To cancel a change just click anywhere outside the popup box.

You can change the text for the link by clicking on the link and entering your new text but it may be easier to click on the pencil and then settings and enter the text in the popup window.

Using showcase images

You can add images to the timeline description fields and use the image alignment (see How To insert a single picture) to center of left/right align if you wish. Large pictures will be shrunk to fit within the timeline box. Use the medium sized image size when inserting from the media library as the timeline boxes will typically be about 40% of the width of a PC window, and the 

When working with showcase panels (square or tall) the picture ratio is set to 16:9 (HD tv size) and, if necessary, the edges of the image are cropped to fit the panel. Small images will be scaled up to fill the panel which may not look good if the original is very small. 

An ideal size for your images is 640×360 and the media library and photo archive have been configured to create medium sized images that are 640 pixels wide. When adding an image to a showcase panel select the medium size. Images larger than 640 pixels wide will be scaled down to fit (and may be cropped). This is normally the behaviour you want. If you forget to select the image size or want to check the size used then select the image (left click), click on the pencil icon to edit the image, and in the image Size drop down list choose medium and Update to save your changes. 

If you do not want the images to be cropped, or want small images to keep their original size (rather than expand to fill the showcase panel) you can tell the panel to keep the orginal aspect ratio and size for small images. Do this by selecting the image (left click) and in the popup window click on the pencil icon to edit the image and in the Image CSS Class field enter the word keep and clcik on Update.

Visually it is better if all of your showcase panels have images that are the same height which is teh default behaviour. If you need to manully resize or crop an image to get select a part of a large photo you want to see then ther are free photo editing package such as Microsoft Paint or IrfanView (the Teddy Bear icon on the history laptop) avaiable on a PC.

If you need to crop an image or you have a local image that is not suitable for storing in the photo archive than use the Media Folder Library to upload your picture to a folder. A lot of the showcase panels already created use the history/images folder to store ad-hoc showcase panel pictures.

Showcase Item Types

Timeline items

Timeline items display as a vertical timeline with a date marked on the timeline and alternate from left to right going down the page.

A time line item table has three rows with the first row split into two cells, The first cell is teh date entry text to be inserted in the timeline date box, the second cell is the title for the timeline. Enter he text you want for these items (you can set the title to blank if you wish). Formatting changes to these cells will be ignored.

In the second row enter the text for the rest of the timeline description. You can format the text and insert images. You cannot use web page links to the text description.

Update the link in the last row (see above) if you want – no link will be dispalyed of the page if this row is left as is.

To change the colour of a timeline entry select any cell in the table and click on the table edit icon on the editor toolbar (its the icon that looks a a spreadsheet) and click on the Table properties menu to display a popup of options. 

Click on the Class box and select a colour scheme from the list – the default is the black borders giving a simple greyscale layout – the grey rowlines are the same greyscale. The other choices are based on the colours red, green, blue, yellow and purple. It is up to you how you use, or don’t use, colours to identify different timeline concepts.

Square, Tall or Portrait items

These timeline items are displayed in rows on the web page fitting as many items into a single row as possible.

The tables have three rows. The top row is for the picture: replace the text add media here with your picture – see page on how to add a single picture. You can leave the image row blank if you simply want a panel of text.

The second row is for the rest of the timeline description. You can format the text,  and add headings but as a matter of style it’s best of you don’t add extra images. You cannot use web page links to the text description.

The third row is for the link if you want to link to another page. A panel without a link is a convenient way or presenting a small amount of information without creating a new page. Update the dummy link (#) to point to the page you want to show (see section above on managing links) leave the Page link entry unchanged to not show anotehr page. The text for the link (Page link) is ignored when the panel is created as the panel is the link.

The different panels represent the amount of text for the description:

• square – landscape image and short text useful for buttons linking to other pages
• tall – landscape image with more text usefule for putting text with the image without necessarily linking to another page
• portrait – portrait  image (such as a person’s headshot) with a small description and optional link

Landscape items

A single row with two side by side cells either, or both, of which can be used for either text or images. There is no link associated with a landscape showcase item but, unlike other showcase items, you can use links with the text description.

Landscape items dow not need to be wrapped with the [ewph-showcase] [/ewph-showcase] marker lines.

Facts items

These items display as a single line of carousel items: you can move from fact to fact usung arrows at the start and end of the row, a slider ordots below the row (exactly how depends on which browser you use). 

The top row is for the fact title and the second row for the description which can contain the usual buttlet list, coloured text and images. There is no link associated with a fact showcase item but you can use links with the text description.

 

Return to 'How To Guides'