Archive for the ‘Images’ Category

New image cropping tool

• See a video guide to the image cropping tool

Ensure you are logged into the website and on the page where you would like to add your image, with your cursor in the specific page area where you wish to display your image, then follow this step by step guide:

Before you start you need to be logged in and on the page you would like to add an image.

Open the editor by clicking on the ‘Edit content’ link for the area you would like to add the image.

1. In the editor, click on the position you would like the image (the cursor should flash in that location)

2. Select the picture icon on the toolbar

3. Upload image form

• “Browse” to find the image you would like to upload
• Enter your “Alt” text – this should be a short piece of descriptive text about your image to help speaking browsers for the visually impaired.
• If you would like to add a caption to the bottom of your image, enter the text in the “Caption” field.
• Select “Upload”. This will open the image crop tool selection area.

4. Image crop tool selection

• Select one of the placement options for your image. This opens the Image cropping tool.

Note: The image crop tool is context sensitive and so the options here are limited to the area on the web page you want the image

5.  Choose your size and position on page

• When you click on your chosen image positioning and size the image the image cropping tool will open. This will import your selected image into the cropping tool. You should see the image you have selected fill the screen.

6. Adjust your image

• You can adjust your image to make it fit the selected final size by using the “image size” slider at the bottom of the screen:

Tip! If you move the slider too quickley it will not be able to adjust fast enough to capture your whole image. Move the slider at a steady pace.

7.  Adjust image height

• You can adjust the height of your final image by using the arrows at the top and bottom of the preview rectangle or by mannually setting the hieght at the bottom of the screen. You can also move thie preview rectangle one pixel at a time with the arrow keys on your keyboard.

8. Rest your image or return to image size and position selection

• The “reset” button will clear all of the image sizing changes that you have made in the image cropping window (using the slider, the prview rectangle and the manual height adjustment). The “Go back” button will take you back to the image size and position area, allowing you to choose a different set size and position.

9. Generate you image

• When you are happy with your size and position selection and any adjustments you have made, click on “Generate”. This will add the image you have created into your webpage with the correct size and position.

10.  Edit your image

• If you would like to edit the image after you have added it to your page, click on the image in the editor view, and the select the picture icon.  This will open the cropping tool and load up the existing image – you can then make adjustments.  When you have completed any adjustments, click on “Generate”.

Changing an image is straight forward. To edit an image that you have previously added to a page, please follow these steps:

1. Ensure you are logged into the website and on the page where you would like to edit your image
2. Select (click on) the image you would like to edit
3. Click on the picture icon on the tool bar
4. The update image screen will open, click on upload
5. Edit the image as necessary
6. Click on Generate

For help with adding an image to your web page please take a look at the FAQ blog

1. Upload the flash file using the upload a file wizard.

2. Add a HTML portlet to the page and enter in the following content.  Make sure to make the appropriate changes as indicated in this code.

<script>

jQuery(function(){

$.getScript(‘http://www.imperial.ac.uk/imedia/plugins/jquery.swfobject.min.js’, function() {

/* enter a class id reference for this flash app, e.g. pic-gallery.  If there are multiple flash files on a web page then this id needs to be unique. */

$(‘#xxx’).flash({

/* Enter in the flash filename.  */

swf   : ‘http://www3.imperial.ac.uk/fileupload/download/filename.swf’,

height  : 418,

width: 813,

expressInstaller:’expressInstall.swf’,

/* enter the id and name for this */

id: ‘xxx’,

name: ‘xxx’,

params  : { bgcolor:’#ffffff’,

/* if you want full screen capability change this to true */

allowfullscreen:’false’,

scriptAccess: ‘always’

}

});

});

});

</script>

3. Add the following into a content item area using the CMS editor:

<div id=”xxx”>
<!— It is advised to If you want a substitute content then we could advise you enter in an image and text here. —>
</div>

The image cropping tool provides a variety of image size options.  To help you select the best picture for your page, visit the web guide where the various picture sizes available are presented on a standard web page and embedded into the text.

Available image options

Create an image link

Capture the URL of the target page by highlighting the text in the browser Address box and copying it to the clipboard (CTRL-C).

Go to the page to hold the image link. In Edit Content, insert the required image as usual.

Select the image and click the hyperlink button on the toolbar e.g.

Than follow the instructions in How do I add a link page.