Documentation – working with images

Images are key to adding interest to the website.  Most if not all pages on the IDRC Alumni site have images.  This page will tell you how to add images to a page.Typically, you will need to crop and/or resize images before you can add them to a page.  These two tasks can be done separately or, in some cases, simultaneously.

NOTE:  the images below of the software are indicative, but may not match exactly what you will see using your own software.

Why crop an image

There are two reasons to crop an image:

  1. It may be far too large or contain more than you wish to portray.  Similarly, when simply resized, it may be too small.  Cropping will help keep the main items in the image larger when space is limited.
  2. Images should usually portray one thing, and one thing only.  e.g., if the image is of a person, the background should be minimal, and not distract from the person.

id=”crop-resize”>Cropping and Resizing Images simultaneously

You can both crop and resize an image if BOTH the width and height of the desired resulting image are known.

The best tools for doing this are Adobe Photoshop or Adobe Photoshop Elements (referred to below as simply “software”).  Proceed as follows:

  1. Select the cropping tool if it isn’t already active, by clicking on cropping tool.  The cropping tool should then then be displayed below the Adobe logo in the menu bars.
  2. Set the size (width and height) in pixels in the width and height fields in the top left of the menu bar:
    cropping sizes
    Note: some software may look more like this:
    cropping sizes
  3. For example, to set the size of the final cropped image to 300 pixels by 187 pixels (the size of images on the home page), fill in the width and height fields as shown:
    cropping sizes
  4. Now crop the picture.  Place the cursor (the cropping tool) in either 1) the top left corner of what you want to keep, and drag the cursor to the bottom right corner of what you want to keep, or 2) the bottom right corner of what you want to keep, and drag the cursor to the top left corner of what you want to keep.  The selected area will be highlighted and surrounded by a dashed border with handles in the corners (and in some software also in the centre of each of the four sides ).  e.g.
    cropping sizes
    You can drag any handle to improve the cropping of the image.
  5. If the result is what you want, click on cropping sizes.  Otherwise, click oncropping sizes and repeat step 4.  If acceptable, the final image will look like this (and the size will be adjusted as per the settings entered in step 3 above):
    cropping sizes

Cropping Images

To crop an image without concern for the final size, proceed as follows:

  1. Select the cropping tool if it isn’t already active, by clicking on cropping sizes.  The cropping tool should be displayed below the Adobe logo in the menu bars.
  2. Click on cropping sizes in the menu bar if there is a cropping sizes button). Otherwise, ensure that the width and height fields are empty:
    cropping sizesOtherwise, make sure that the width and height fields are empty.
  3. Now crop the picture. Place the cursor (the cropping tool) in either 1) the top left corner of what you want to keep, and drag the cursor to the bottom right corner of what you want to keep, or 2) the bottom right corner of what you want to keep, and drag the cursor to the top left corner of what you want to keep. The selected area will be highlighted and surrounded by a dashed border with handles in the corners and in the centre of each of the four sides. e.g.
    cropping sizes
    You can drag any handle to improve the cropping of the image.
  4. If the result is what you want, click oncropping sizes.

Resizing Images

To resize an image, proceed as follows:

  1. Click oncropping sizes in the menu:
    cropping sizes
  2. Click oncropping sizes in the drop-down menu:
    cropping sizes
  3. Click oncropping sizes in the subsequent menu:
    cropping sizes
  4. You will see:
    cropping sizes
  5. Make sure that the fieldcropping sizes is checked. The cropping sizes in the above image indicates that cropping sizes has been checked.
  6. Set EITHER the width or the height field to the desired value.  Do not set both fields, or the image will become distorted.  When you change the width value, the height value will automatically change.  Conversely, when you change the height value, the width value will automatically change.
  7. Click on cropping sizes

Inserting an image into a web page

  1. Use a software to copy the image from your hard drive to the website, using FTP (File transfer protocol). FileZilla is a popular free client software you can use if you have nothing installed. The following images are from FileZilla
  2. All images are kept in folder /public_html/wp-content/uploads. Select this folder in the FTP client by clicking on Select public_html, then Select wp-content, then Select uploads.
  3. You may now have to create a folder to hold your image, or select an appropriate existing folder. e.g., Alumni bulletins are kept in folder “bulletins.”
  4. Drag the image file from your hard drive into the selected folder in FileZilla.
  5. On the page where you want the image to appear, insert this code in the appropriate location:
    <img src=”/wpcontent/uploads/folder/image” alt=”brief description”>
  6. Replace folder with the name of the folder into which you dragged to image
  7. Replace image with the name of the image file.
  8. Replace brief description with a very short description of the image (for screen readers used by blind site visitors).
  9. If a border is desirable and is not shown by default, add this parameter to the <img> element:
    style="border: 1px solid #0065b5;".
    e.g.:
    <img src="/wp-content/uploads/2021/annual_report_2019_2020_e.png" alt="Cover of the IDRC annual report" style="border: 1px solid #0065b5;" />

Adding a border to an image

Adding a border to an image will help set it off better. This is especially true if the image contains a lot of white space or text.

To add a border to an image, one needs to add the following code to the <img> HTML element.
style="border: 1px solid #0065b5;".
If there is already a style attribute specified, add the border: 1px solid #0065b5; information to the attribute, separated by a space.
e.g.:
<img src="/wp-content/uploads/2021/strategy_2030_e.png" alt="IDRC’s strategic plan to 2030" style="width: 200px; border: 1px solid #0065b5;" />
This code produces this image:

IDRC's strategic plan to 2030