Randomised Graphics Admin

The random graphics function gives an opportunity to show site visitors a different graphic every time the Home Page is loaded.  It can be used to highlight products, services, events or areas of your web site.  Each random graphic can link the graphic to a specific web page, and text tags can be applied for site visitors who cannot view graphics.  Graphic files can be loaded via the admin interface or copied directly onto the server.

Care should be taken on two points when implementing random graphics:

• The graphics should always be the right size to fit into their intended space: forcing a graphic to resize reduces quality.

• Test the size of graphics and filenames you intend to use on a PC with add-blocking software (such as Norton Internet Security).  Certain filenames and filepaths (such as those with "banner" in their name) and certain width/height combinations may trigger your graphic to be blocked.

Maintaining random graphics with admin interface

1. As a logged-in admin user, click the Home Page Admin link from the Home Page, and choose the Randomised graphics Admin option.

2. Output this function to users' browsers can be turned on and off.

3. A column of icons down the right-hand side of the page allow you to add, delete, edit or re-order exchange rates.  (Bear in mind that the effect of your changes may vary according to your stylesheet settings.)

• Adding a graphic: Click the icon to add a graphic file.  A pop-up window will collect the details from you:

• Pic: to select a graphic file from your PC click Browse, select a graphics file from your PC and click Open.  The file location will be displayed in the adjacent text box

• Link: use this box to enter the target URL if you want your graphic to link to another location.  If you want to enter a relative URL, note that this should be relative to your Home Page directory.
  
  Note: a Link must be entered.  If you do not require the file to be linked to anywhere, enter # in the Link box which will reload the Home Page if the user clicks the image.

• Alt text: use this box to enter text which users with standard web browsers will see if they hover over the graphic with their cursor, and which users of non-graphic browsers will see in place of the graphic.

Add the graphic by clicking OK, or click  Cancel to close the window without adding a graphic.

Note: This function supports image file extensions.

• Deleting a graphic: Click the graphic in your list which you want to delete, and then click the icon.  You will be asked to confirm the deletion by clicking OK.

• Editing a graphic: Click the graphic in your list which you want to edit, and then click the icon.  A pop-up window will display the filename and a thumbnail image of the current graphic, and the any Link URL and Alt text associated with the image.  Click browse to select a replacement image from your PC or /and update the Link and Alt text entries.  Click OK to confirm the changes or Cancel to return to the Randomised graphic Admin screen without saving the changes.

• Re-ordering graphics: although only one graphic is output each time the Home Page is created, you may want to reorder the list for ease of reference.  Click on a graphic in your list which you want to reorder, and click the or icon to move it up or down your list.  

1. Random graphics can be previewed before committing any changes you have made.  

2. To confirm any changes you have made, click Update.  (Clicking the Home Page or Home Page Admin links will also confirm your changes.)  To cancel any changes you have made since the last update, click the Cancel Changes link.

Maintaining Random Graphics through your server's file system

1. Adding/Deleting Image Files: the library of random graphics is stored in the images/graphics/ sub-directory of your Home Page directory.  Files can be copied in and out freely, but will only be included in Home Page if the filename is registered in the links.txt file.

2. Edit the links.txt file: each graphic is registered on a separate line (the order is not important).  Each line has three fields, enclosed in double-quotation marks and separated with a comma.  The fields should contain "graphic_filename","link_URL","Alt text".  Enter "#" for the link URL if there is no link is required.

Technical Details

These technical details are intended for web designers when setting up a stylesheet.

The sample HTML output below shows how the random graphic is output.  If customised output is required for your home page implementation, please contact the developers.

• In the output Home Page, the random graphics function is contained between the comments <!--Random graphic--> and <!--Random graphic end-->, containing a main DIV block with class and id="random_banner" containing the linked graphic.

HTML Output
 

<!-- Random graphic-->

<div id="random_banner">

    <a href="en/team/index.html"><img src="images/graphics/graphic_filename.jpg"

        border="0" alt="alt text">

        </a>

</div>

<!-- Random graphic end-->

Sample Stylesheet Implementation

The stylesheet is individual to each implementation.  The code below is just an illustration of how it may be implemented.

#random_banner {

    position: absolute;

    top: 100px;

    right: 100px;

    width: 180px;

    height: 230px;

    overflow: hidden;

    z-index: 1;

    }