Menu

Work with images

  • UCL's Imagestore for copyright-free images.
  • Important information about images - read first!

Adding an image consist of 2 steps:

  • Step 1 - upload the image
  • Step 2 - add the image to the web page

Step 1 - Upload an image into Silva

  1. Create a folder called Images - you only do this once and place it at the root of your site. You can delete the index page as you will never need it;
  2. Go into the Images folder;
  3. Click on the drop-down list at the top of the page;
  4. Select 'Silva Image';
  5. Click on Browse to find the image;
  6. Select the image;
  7. Give it an id and title;
  8. Click 'Save'.

Step 2 - Add an image to a web page

  1. Go to the page where you want to add the image;
  2. Click on image in the right-hand panel;
  3. Click get image reference;
  4. Navigate to your Images folder;
  5. Select the image.The image should now appear in your page.

Make your image a link

  1. Select the image - this should show the image editing option to the right
  2. If it's an internal link, click on get link reference to find the relevant link
  3. If it's an external link, paste the URL in the relevant box and click on update image

Align an image

There are different alignments available:

  • Default - the image will sit on the left
  • Align left - same as Default - the image will sit on the left
  • Align right - the image will sit on the right
  • Align centre - the image will sit in the centre
  • Float right - text will float round the image, but you need enough text for the image to float!
  • Float left - text will float round the image, but you need enough text for the image to float.
  1. Select the image.
  2. To the right, choose the relevant alignment.
  3. Update the image.
  4. Save and publish.

Resize an image

The middle column in Silva is 504 pixels wide. The side columns are roughly 200+ pixels.

However, for a site to download quickly, it's best NOT to have images larger than 500kb. Please resize the images before putting them on Silva.

If an image is a bit too large either in scale, you can resize it within Kupu.

  1. Ensure you are in editing mode on the relevant page.
  2. Click on the image to select it and a Toolbox will open on the right-hand side.
  3. Click on the edit image... link
  4. To make the image smaller you can change the percentage in the text box next to scaling.
  5. To make the image smaller using pixels, type in the pixels e.g. 100x75 or 250x175.
  6. If you are not sure how to do the ratio, you can type 100x* where the * will calculate the correct ratio. Alternatively, you can type *x100.
  7. Click 'change'.
    Note
    The change will NOT be visible until you Save and Preview the page.

Animated gifs

You can use Animated Gifs in Silva, but make sure that if you need to resize the image, you do this OUTSIDE Silva.

Failing this, the animation won't work in Silva.

Where to find images?

  • You will need appropriate permissions for each and every image you put on a web page – that includes images taken from Google Image Search!
  • You can buy images, but first check UCL’s large and free(!) ImageStore
  • Images that were made by students at UCL for a competition (you will need their permission!)
  • Images are not expensive to buy at e.g. iStockphoto.com
  • The Wellcome Trust has an image archive, but you need to pay.
  • Getty Images has good images, but you need to pay.
  • Creative Commons has both free and paid for images.