In this guide, we’ll show you how to add images to your Steps through the Authoring Tool. If you’re wondering why you should add media to your Topics and when, take a look at our article Add media to your topics - when and why for more insights.
Adding an image by URL
If the image you'd like to add is already hosted on the web, you can add the image with its URL.
1. In the Authoring Tool, while editing a Step, scroll down to the Step Options Panel. Then, in the WYSIWYG editor, click the Image icon to bring up the Image Properties Panel:
2. If you already know the URL of the image, enter it into the appropriate field. If you don't know the URL, right-click the image on the web, choose "Copy image address" (on Chrome), and then paste it in. You'll know it worked when the Width and Height are automatically filled in after a second or two.
Uploading a new image
If you're a Standard PRO or Enterprise user, you can upload a file directly to Inline Manual through the Authoring Tool. We support JPEG, PNG, and GIF images. There's a maximum file size of 5MB and maximum width and height of 2600x2600 pixels. You can upload 250MB of images in total.
Images can also be uploaded through the Inline Manual Portal. Check out our guide on the Files tab for more information.
1. While editing a Step in the Authoring Tool, scroll down to the Step Options Panel. Then, in the WYSIWYG editor, click the Image icon to bring up the Image Properties Panel:
2. Click the File browser button.
3. Next, click the Upload File button.
4. Click the Choose File button, then choose an image from your files. After you choose an image, the title will be filled in automatically, but you can change the title within Inline Manual. Below the title field, you can add tags, separated by commas. Adding tags can help you sort through your uploads quicker in the future. When you're done, click the Upload button.
5. Once the file is uploaded, you'll still have to select it from your list of uploaded images to add it to a Step.
Adding an uploaded image
In the Authoring Tool, you can see all of the images you've previously uploaded through both the Authoring Tool and the Inline Manual Portal.
1. In the Authoring Tool, scroll down to the Step Options Panel. In the WYSIWYG editor, click the image icon to bring up the Image Properties Panel:
2. Click the File browser button.
3. With the File browser open, if you have already uploaded images, you'll see a list of them. You can choose from tags added to your images when you upload them with the Filter by dropdown menu. You can sort your images alphabetically or by date added with the Sort by dropdown menu.
4. Click the image you'd like to use, and you'll be taken back to the Image Properties Panel with its Inline Manual URL already filled in.
Once you've added an image, there are a few options to look at before clicking the OK button:
- Alternative Text - Add alternative text for better accessibility and to have text visible if the image doesn't load properly.
- Width/Height - The width and height of an image are automatically detected when it's added but can be changed to suit your needs. Toggling the "lock" button to "unlocked" allows you to change the width and height however you like, while the default "locked" mode maintains the original image's width-to-height ratio. You can use the "refresh" button to set the width and height back to that of the original image.
- Expandable - If you've changed the size of your image, you can check this checkbox to make the image clickable within your Step. Once clicked, it will display the image at its original size. This is especially useful when using a large image; you can keep the Step a manageable size while giving users the option to see the full-sized image.
- Alignment - Choose the image's alignment within the Step.
When you're done, press the OK button, and the image will be added to your Step!
Changing a Step's width
After adding an image, you may want to adjust the width of your Step to better accommodate it. You can do this through the Misc panel in the Authoring Tool. Learn more in our Misc panel guide.