Content - images and documents

Images and documents can be attached to content using the facilities provided on the create/edit screen. However, this process requires a number of steps.

Images

1. Selecting images to upload. Only PNG, GIF and JPG images of up to 4MB can be uploaded onto the system. This may mean you need to resize/crop/process images that are large (eg. direct from a digital camera). Once you've processed an image, use the 'Browse' button to find it on your computer, then click 'Upload' to begin uploading.

2. Image processing. This is an automatic stage undertaken by the system. Images uploaded onto the system that are larger than 1000x800 pixels will be automatically scaled to fit within these dimensions - you CAN upload images that are larger... they will simply be resized. This is to save disk-space and optimise the website's performance.

3. Captioning. Once complete, an image upload will allow you to enter a caption in the two boxes provided ('Alternate text' and 'Title') - the text can be the same for both. It is always best to enter something here describing the image, even if you don't want a visible caption to appear - the text in these boxes will appear if the image cannot be loaded or if a visitor is using a 'text-reading' browser for the blind/partially-sighted. Making the text entered in these boxes appear as a visual caption is discussed in step 5 below.

4. Image placement. Once the image has been uploaded, it needs to be attached to the main body field of the content so that it is visible. This can be done using the 'Insert' button next to the uploaded file - follow these steps:

   a) Select an option from the 'Style' drop-down box. 'Medium' will resize the image to 300px high/wide (whichever is the longest dimension). This is best if you wish to align the image left or right and wrap the text around. Full_width will resize the image to take up the full width of the content area (roughly 650px wide) - no text-wrapping is therefore possible with this option.
   b) Position the text cursor in the 'Body' textbox where you'd like the image to appear. If you want to wrap the text around an image, position the cursor above the text you wish to wrap.
   c) Scroll back to the uploaded image and click the 'Insert' button. You'll see that the relevant HTML image code has been pasted into the 'Body' textbox where your cursor was positioned. If you wish to move the image, you can simply cut and paste this code to a new position.

5. Borders, captions and alignment. You can create a border, include a caption and/or align the image using keywords, known as 'classes'. Each inserted image code has a space for additional class keywords:

<img src="image-path" width="300" height="161" alt="Alternative Text" title="Title" class="image-medium" />

Remove the image-medium keyword and replace with one or more of the following options:

• border. This will place a green border around the image.
• caption. This will display the caption entered in the 'Title' field underneath the image.
• left or right. This will align the image left or right and wrap the text around it.

A right-aligned medium image with a caption and a border should therefore look like:

<img src="image-path" width="300" height="161" alt="Alternative Text" title="Title" class="border caption right" />

Note: more than one image can be uploaded to a content page or blog entry. Likewise, if you wish to reuse an image on another page you don't need to upload it again - since it is already in the system, simply copy and paste the image code from the page where it was originally uploaded.

Documents

1. Selecting files to upload. Normal document files up to 20MB can be uploaded in the following formats: doc docx pdf txt xls xlsx. Additional formats can be added if required - contact Heritage Technology (pat [at] heritagetechnology.co.uk). Use the 'Browse' button to find the document on your computer, then click 'Upload' to begin uploading.

2. Download link text. Once complete, an document upload will allow you to enter a short text description in the box provided to act as a link for users to click. It is best to make this a descriptive as possible: "Download the 2014 report" is always preferable to "Click here".

3. Document placement. Once the document has been uploaded, it needs to be attached to the main body field of the content so that it is visible as a download link. This can be done using the 'Insert' button next to the uploaded file.

   Position the text cursor in the 'Body' textbox where you'd like the document link to appear. Document download links are often best displayed as a bullet pointlist (see Markdown for help on creating bullet lists). Scroll back to the uploaded document and click the 'Insert' button. You'll see that the relevant HTML image code has been pasted into the 'Body' textbox where your cursor was positioned. If you wish to move the link, you can simply cut and paste this code to a new position.

4. Link text alteration. The download link text entered in step 2 above may sometimes require alteration once it is visible in context. Rather than re-inserting the code, you can alter it directly by changing the highlighted section indicated below:

<a href="Document path">Download the 2014 report</a>