A showcase item is one one:
- timeline entry
- showcase panel (tall or square)
A showcase panel contains an image and text and is used to showcase brief information (for eample the history home page).
A showcase panel may link to another page and is used to navigate around the web site.
A timeline item is displayed vertically with a line linking each timeline entry.
Creating a showcase item
Showcase items are all created in a similar manner but there are specific details for each decribed below.
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.
Pu the curse 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 you item type from the dropdown list.
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 suplerflous 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, colour or classes will be ignored (see note about 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) or links (see note about links below). Please do not nest tables within the cells (it really doesn’t work well).
You can insert showcase items above and below existing showcase items but you cannot add any extra text at the end of the items unless you use the advanced fatures.
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.
You can use different showcase items on the same page so you could start with some showcase panels followed by a timeline.
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 just 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:
- 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.
- 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 on the page.
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.
Timeline items
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, insert images and extra links if you wish.
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 or Tall showcase panels
The showcase panel 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 black 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 or links.
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.
Advanced usage
If you want to do more than place the same types of showcase items at the end of a page you will need to use a shortcode to mark the start and end of your items.
To do this put the following text on a line of it’s own immediately before the first table and after the last table:
[ewph-showcase] your extra text here… [/ewph-showcase]
Type the square brackets and text in carefully exactly as shown ottherwise it won’t work and your displayed page will look wrong or may show an error message.