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
- Cropping and resizing images
- Cropping and resizing images”
- Resizing an image
- Inserting an image into a web page
- Adding a border to an image
Why crop an image
There are two reasons to crop an image:
- 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.
- 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:
- Select the cropping tool if it isn’t already active, by clicking on
. The cropping tool should then then be displayed below the Adobe logo in the menu bars. - Set the size (width and height) in pixels in the width and height fields in the top left of the menu bar:
Note: some software may look more like this:
- 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:
- 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.
You can drag any handle to improve the cropping of the image. - If the result is what you want, click on
. Otherwise, click on
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 Images
To crop an image without concern for the final size, proceed as follows:
- Select the cropping tool if it isn’t already active, by clicking on . The cropping tool should be displayed below the Adobe logo in the menu bars.
- Click on
in the menu bar if there is a button). Otherwise, ensure that the width and height fields are empty:
Otherwise, make sure that the width and height fields are empty. - 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.
You can drag any handle to improve the cropping of the image. - If the result is what you want, click on.
Resizing Images
To resize an image, proceed as follows:
- Click on
in the menu:
- Click on
in the drop-down menu:
- Click on
in the subsequent menu:
- You will see:
- Make sure that the field
is checked. The 
in the above image indicates that has been checked. - 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.
- Click on
Inserting an image into a web page
- 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
- All images are kept in folder /public_html/wp-content/uploads. Select this folder in the FTP client by clicking on
, then 
, then 
. - 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.”
- Drag the image file from your hard drive into the selected folder in FileZilla.
- 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”> - Replace folder with the name of the folder into which you dragged to image
- Replace image with the name of the image file.
- Replace brief description with a very short description of the image (for screen readers used by blind site visitors).
- 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:
