How to add images

Introduction

In this article, we’re going to show you how to add images to your pages.

Top tips before you begin

• Images are a super way of adding meaning to your text, and making your pages more engaging for learners. Although it might not always be necessary, aim to include at least one image per page.
• Try and keep to a consistent graphic style – if you’re using illustrations, try to stick to illustrations – likewise, if you’re using photographs, try to stick to photographs.
• If you’re working with a two column layout, consider the following:
  • Symmetry is beautiful. If you’re putting an image in one column and your text/interactions in the other, aim to have your image the same height as the content in the other column to create an evenly balanced page.
  • If your image is just for decoration, put your image in the left-hand column and your text in the right. If your image is part of your instructional content, put your text in the left-hand column and your image in the right. This will help ensure your page flows beautifully for learners accessing their course on mobile devices.
• If you’d like to add clickable areas to your images, use the labelled graphic interaction instead of an image block.
• Nimble Author supports the following image formats:
  • *.jpeg
  • *.jpg
  • *.pjpeg
  • *.png
  • *.gif - please note that when working with GIFs:
    • It is not possible to resize or adjust the image with Nimble Author.
    • When a learner accesses the page, the GIF will play automatically, and on a loop.

A note on image sizes

If you're creating images to use with Nimble Author, here are the following sizes they will be displayed at within the course, on a full size page:

• Single column page - images display 700 pixels wide
• Two column page - images display 476 pixels wide
• Logos in the branding settings - display at 270 pixels wide.

So you should avoid creating images smaller than these sizes, otherwise images will be resized, and may look softer.

DPI of the image isn't really relevant in Nimble Author, as that's more of a factor when printing image, but we suggest the web standard of 72 pixels/inch. 

Video

Watch the video to learn more:

Adding an image to a page:

To add an image to a page:

1. Whilst editing a page, drag and drop an Image () block from the Add content section of the side menu and onto the page.

2. Select the Image block.
3. From the toolbar, click the edit () button.

Choosing an image

You can upload your own image or use one from the Nimble library.

Uploading your own

4. Click the button and select the image that you’d like to add to your course. You’ll see a progress bar whilst the image uploads.

5. Once the image has uploaded, click the image and then click the button in the bottom-right of the screen.

Selecting from the Nimble Library

Nimble Author provides instant access to a carefully curated selection of illustrations and photographs. To select an image from the Nimble Library:

6. From beneath the Choose an image asset heading, select Nimble Library.
7. Double-click on the folder that you’d like to browse.

8. Click the image you’d like to use and then click the button in the bottom-right of the screen.

Changing the height of the image area/cropping

You can change the height of your image/crop the image:

9. Click and drag the handle on the bottom of the image up or down.

Resizing the image within the block

You can resize the image within the block:

10. Click and drag the slider on the toolbar left or right.

Repositioning the image within the block

You can reposition the image within the block.

11. From the toolbar, click the button.
12. Click on the image and drag it until it’s positioned as you’d like.
13. Click the button once you’re finished.