Creating Screenshots

It's important to have a properly formatted and edited screenshot BEFORE adding it to WordPress. The best screenshots provide just enough context to reliably direct a users focus to a specific step, process, or menu item. Screenshots should not display the entire window of an application (unless otherwise applicable).

Effective, and useful guides use screenshots to supplement written instructions, not to replace them. It's crucial that Knowledge Base guides are accessible, catering to a variety of users. The more effective a guide, the more a user is able to self-help, and the fewer support requests to IT.

Example of an Effective Screenshot:

Example of a Poor Screenshot:

Adding an Image

1. Prepare the image and log into WordPress.

Your image should be adequately annotated, with relevant content circled or boxed, with arrows pointing to relevant buttons, and with the image cropped to only depict the step and any necessary context for that step.

Please ensure your image is one of these types: JPG, GIF, PNG. Other formats should be converted beforehand to one of these accepted formats

Ensure that you know the filename and location of the image to be added in advance.

2. Position the cursor in the content.

Position the cursor carefully within the content, where the image is to be added.

We strongly recommend positioning the cursor directly under each step in the guide you're writing. Avoid positioning the cursor in between the text itself or you may get strange results. You can align the image relative to this position later.

3. Add Media

Click the Add Media button (above the toolbars)

4. Upload Files

Select Upload Files if adding a new image or Media Library to select an image which you’ve uploaded before.

Click Select Files and locate the file on your computer to be uploaded. WordPress will now import your image to the Media Library.

As suggested, your new image can also be dragged and dropped into the box, instead of using the ‘Select Files’ option.

5. Adjust the options before inserting

When the image has been uploaded, ensure you consider and set the options presented (using the help notes below).

Then press the Insert into Page/Post button.

Add Media dialog box Options

• Title: A short text description of the image
• Caption: Not required unless your design supports the display of image captions
• Alt Text: Usually the same as the title
• Description: Usually not required
• Alignment: As required. None usually works better when the image is positioned on a blank line (paragraph). Left and Right works best when the image is being positioned with text or headings. The available text will wrap around the image automatically. Center is often avoided. Read our separate supplementary guide on positioning images in WordPress to better understand how this works
• Link URL: Leave blank (None) or select Media File if the image is to be linked to the full size version (this allows the user to enlarge the image). You can also link to any web address (URL) of your choice. This could be to another page in your website or an external web page.
• Size: Choose as required. If the sizes displayed are not appropriate for your design and layout, you may need to speak with your web designer. NB – If the image is too large for the containing element, this may cause the layout to break.

Edit an existing image…

If you wish to edit the options for your image, click the image once and then click the ‘Edit’ button (pencil icon) which appears. Alignment options can also be changed quickly here. There’s also a button to delete an image (displaying a cross).

The Media Library

All the images uploaded to your website can be viewed and edited in the Media Library. Click Media in the left hand navigation menu of the dashboard to view them.