Adding a PDF, Powerpoint or MSWord Document

Construct an Image Button

We have uploaded the file and discovered it's absolute URL. We now need to find a nice way to allow our visitors to download the file. We simply link to the file as if it were any other file on the web, using the link manager when editing an article.

It is easy to link to the file using a text link - like this, or just paste or type the absolute link into the article and the software will automatically turn it into a link, like this: http://www.yourwebsite.com/images/stories/test2/exact_file_name.pdf

But if that is all we do then we are a bad, bad web author. We need to clearly communicate to the visitor that they are in for something a bit different if they click on the link.

We need to communicate to the visitor:

• The type of file
• how big it is
• If PDF, how many pages

We also need to have the link open in a new window.

All this can be done in the link manager while editing the article (Alt text is handy, but not everyone will see it), or by modifying the link text - eg download the 10 page PDF here (1.6mb).

Using an Icon as the Link to the File

XYZ_file.pdf 1.5 mb

Most authors will want to use the best way, and that is by using a small graphic icon as the link trigger - just like you see on the right.

You may need to refer to other resources to get help on formatting tables, but essentially:

Insert a table with the following properties:

A width of about 100 pixels. Do not specify the height. Never change the proportions by dragging the handles in the editor - this works in MSWord, but not a good idea on the web.

• Right aligned, if you want.
• 1 column, 1 row, or use more if multiple PDFs
• A border of 1 pixel, solid, colour of white (or whatever your background is).
• OK that & check in the editing window.
• Padding 10 - this keeps the contents nicely spaced
• Margin 10 - this stops content 'outside' the table from knocking up against it.

Put your curser in the table, then click the table cell properties button. Give the table cell the following properties:

• border - colour it something visible. The border properties of size and style are taken from the table border properties set earlier.
• background colour - you your liking.
• halign = centre - make everything centred, instead of the default left aligned.
• valing = top - only needed if you are including more than one PDF / Cell horizontally.

Sourcing an image to use as the image icon.

Google "pdf icon" or something. Make sure the image is the right size. Save whatever image you use (dont just copy/paste into the editor), and upload it using the JCE image manager.

Insert Image Icon

Insert the Image icon - place the curser in the cell and click the image manager button (which usually looks like a little polaroid pic. Hover over editor buttons for their name).

• Paste the URL to the image, or select/upload one you have saved elsewhere.
• Border = 0 - because when we add a link to the image, a blue underline/outline will be added by default unless we specify this property here.

Click once on the image that now appears in the editing window & use the arrow button on keyboard to place the curser to the next space, then do a SHIFT + ENTER to create a line break <br> (we dont want the paragraph spacing here).

Type in any data that might be useful - file name & size etc.

Create the link to the file

Click and drag to select the whole image as well as the text. We will use this as the link that people click on to open the file. Click the link manager button & paste in the absolute URL to the file.

Change the link "target" to "_blank" (or "opens in a new window").

Save/Apply and test.