Figures and graphs can be inserted into your report or proposal as image files (JPG/GIF/PNG).
You can create your figure or graph with many applications (e.g. Word/Excel/PowerPoint). Copy the image and paste it into an image editing program (e.g. MS Paint or Paintbrush for Mac) and save it as an image file (JPG/GIF/PNG). Now you can upload that file to your media library.
Why can't I copy and paste from Word?
Word processor files with images are much larger than web pages and the image is stored in the file with the text or a reference to where the image is on your computer. Web pages do not store the images in the same file as the text. They are stored and delivered separately and the browser assembles the page and displays it to the viewer. Therefore, you must upload each image separately.
Insert images into your report or proposal
Figures, graphs and photographs are all images. To add an image to your report or proposal:
- Click on the "Add Media" button:
- Note: Not all report or proposal text fields support images. If there is an "Add Media" button at the top left of the text field, then you can add images to that text field.
- In the upper left, there are two tabs Upload Files and Media Library.
- If you have previously uploaded your image, then click the Media Library tab.
- If you haven't uploaded the file, then select the Upload Files tab.
To upload an image
- Click on the Upload Files tab.
- Click the Select Files button
- Select the file from your computer
- Click Insert into Post.
After the file has uploaded, complete the following fields:
Title
The title is used when searching for images in the Media Library. The filename is automatically set as the title, but it is better to change it to be a more descriptive title. It is also used on the image's attachment page.
Alt Text
Alt text is used by browsers for visually impaired users and search engines. Enter a description of the image so the visually impaired will know what information the image is conveying.
Caption
The caption will be displayed below your image. Leave blank if you do not want a caption below your image.
Alignment
There are 4 alignment options:
- None - the image will appear "in-line" based on where your cursor was when you clicked the "Add Media" button. One line of text will be on the same row as the image.
- Left - the image will be positioned to the left edge of the text area and the text will wrap around it to the right.
- Right - the image will be positioned to the right edge of the text area and the text will wrap around it to the left.
- Center - the image will appear in centered in the text area and no text will appear on either side of the image.
Link to
There are 4 "Link to" options:
- None - the image is not linked.
- Media file - the image is linked to the full size image. This is useful for thumbnail images or if you want the user to get large image, but the page only shows a smaller version.
- Attachment page - a page with the image and the title and description. Please do not use this option.
- Custom URL - the image is linked to another web page. Please do not use this option.
Size
Depending on the size of the image, there may be several choices:
- Thumbnail
- Medium
- Large
- Full size
Please use this size option to resize your image. After your image has been inserted into the proposal or report, you will have the option to click and drag the image to resize it. However, that can cause issues because the actual photo size (determined by the above choices) does not change. It is better to set the image to a proper size instead.
Example: If you choose the Medium image size and then make the image larger by dragging its corners, WordPress stretches the existing image instead of using a larger version. This can reduce image quality and make the image look blurry.
When to use Full Size:
- Do not use the full size image if your image is very large (over 1000 pixels wide).
- Use full size when you have a chart or graph so that readers can read the text.
- Use full size if you have already resized the image before uploading the image to the Media Library.
- This is ideal for faster page loads and less storage space on the server.
If the image needs to be viewed full screen, then you can change the "Link To" option to "Media File".
Insert the image
After you make your selections, click the "Insert into post" button.
Once the image is in your report/proposal, you can drag it around to place it where you want. You can change the placement by clicking on the image and selecting one of the alignment options:
If the image is too small or large, then please avoid resizing the image by clicking and dragging. Instead, change the image file size:
- Click on the image.
- On the pop-up menu, click the pencil icon.
- In the Display Settings section, click on the Size dropdown.
- Select a different size.
- Click Update in the bottom right.
Inserting Audio or Video
When linking to or uploading a video or audio file, you agree to provide captions in order to meet accessibility compliance requirements.
You have the following options to provide captions:
- Upload the video to your own YouTube channel and turn on auto-captioning. Add the YouTube link into the project report.
- Send videos to your regional communication specialists to upload to the regional YouTube channel which provides auto-captioning and ask the regional communication specialist to add the YouTube video into the project report.
- Include transcripts along with videos or audio when uploading them to the media library. Insert the videos or audio files and upload the transcript (TXT or PDF) using the Add Media button into the project report.
When inserting video, MP4 and WEBM videos will be embedded. MOV files will be inserted as a link to download the file. If you need help converting your video to MP4 or WEBM, contact help@sare.org.
Deleting Media Files
To delete a media file:
- Go to the Media Library (https://projects.sare.org/wp-admin/upload.php).
- Select the file to be deleted.
- Click the "Delete Permanently" link in the lower right corner.
Please use this cautiously. If any other pages are using the file, they will be broken.
Rotating Images
Occasionally, the software you use to view an image on your computer rotates it automatically (based on information stored from your camera) when you view it, so an image that is stored sideways appears correct on your computer. When you upload it, it appears sideways. To correct this, edit the image using the following steps:
- Go to the Media Library (https://projects.sare.org/wp-admin/upload.php)
- Click on the image to view it
- Click on the "Edit Image" button under the image
- Use the image editing buttons to rotate or flip the image:
- Click on the "Save" button to save your rotation - for large images, this may take a minute or two.
- Click on the "Update" button to save your changes.