Image Browser

Whenever you're inserting an image element into a page, the Image Browser window will appear. This window shows all the images stored in a course’s directory, and allows you to select images to insert into your current page, as well as to import new images, rename existing images and delete them.

Image browser

(Click image to enlarge)

The following items make use of this window:

Upload an image

To upload an image into your course directory, you have three methods:

The first method's the easiest - just click and drag an image file from your computer into the Image Browser and it'll upload the image into the browser upon releasing the mouse.

Image drag and drop

The second method is to use the Basic uploader in the bottom left of the window - click the ‘Choose File’ button and another window will appear allowing you to select your file from there. Once you've selected your image, click Open to confirm your choice, then click the ‘Upload’ button to import it into the browser.

Image upload process

The third method is to use the Click n Paste tool, right above the Basic uploader. If you're using image editing software such as Photoshop, Paint or others, you can select and copy an image from within those programs, then click in the specified area and paste the image using the paste keyboard command (Ctrl + V) and it will be imported into the browser.

Image 'click n paste' process

Copying an image file directly from a folder or desktop does not work with Click n Paste.

Renaming an image

To rename an image, click on an image to select it and then click the ‘Rename’ button at the bottom of the window.

Rename button

A popup message will appear, allowing you to type in a new name for the image.

Rename an Image window

Simply type in the name and click ‘OK’ and the file will be renamed. There is no need to add the file extension, it will be handled automatically.

Deleting an image

To delete an image, you can either hover the mouse over it and click the trash button icon, or click on the image to select it and then click the ‘Delete’ button at the bottom of the window.

Delete button 1 Delete button 2

Either option will give you a popup message to confirm the deletion before it is carried out, giving you a chance to back out if needed.

When deleting or renaming images, this does not affect any code referring to said images throughout the course - you will still have to go back to your pages and edit/delete any mentions of them manually!

Resizing an image

To resize an image, click on an image to select it and then click the ‘Resize’ button at the bottom of the window.

Resize button

The following window will appear:

Resize an Image window 1

From here, we have several options:

The Column resize options on the left allow us to select from a range of suggested sizes based on the width of the right hand column on a page. Since said columns depend on the width of the course window when played, if you are planning a smaller width than the default display you can adjust the Course width slider to get image sizes that will better fit your needs.

Resize an Image window 2

Once you see a size you like, simply click it to create a copy of the image in that new size.

The Fixed resize options on the right allow us to select from a small range of sizes with preset widths (240px, 160px and 120px), as well as to type in a custom size of our choosing.

Resize an Image window 3

To pick from the 240px, 160px or 120px sizes, simply click them to create a copy of the image in that new size. If using a custom size, type your preferred width or height into the appropriate fields and click the ‘Apply’ button and a copy in that size will be created.

All sizes will keep to the original image’s aspect ratio. Typing in a custom width will change the height automatically and vice versa.

Editing or enhancing an image

This option is currently not working. If it is fixed at a later date this section will be updated with more information.

Image CSS

This area in the top left corner of the Image Browser allows you to add some additional settings to an image to affect its appearance and position when played in the course.

Image CSS panel

You can select multiple features at a time and they will be added to the front of the code when inserted, if you wish to remove them at a later time without reinserting the image.

Box-shadow will be the most common option you encounter, as it is placed in Single and Right-hand images by default.

Image box-shadow comparison

These options are detailed below:

Image CSS: Appearance in code: What it does:
Box-shadow box-shadow Adds a white border and a faint drop shadow effect around an image.
Bounce in rp-bouncein Upon opening the page, the image starts off-screen and rapidly bounces into view from above.
Fade in rp-fadein Upon opening the page, the image starts hidden and fades into view at a gentle pace.
Fade in fast rp-fadeinfast Upon opening the page, the image starts hidden and fades into view at a rapid pace.
Blind in rp-blindin Upon opening the page, the image starts hidden and quickly reveals itself from top to bottom.
Slide in rp-slidein Upon opening the page, the image starts with 0 height and quickly expands to full height from top to bottom.
Pull-left pull-left Image is positioned at the left of the content area. Text and other content wraps around the image.
Pull-right pull-right Image is positioned at the right of the content area. Text and other content wraps around the image.
Scale-image scale-image ...to do...
Play-button play-button Adds a white border and a strong drop shadow effect around the image. A thin grey border appears whenever the mouse hovers over the image. Useful for indicating a button or clickable image.
NOTES:
  • Images with pull-right effects and Right-hand images are NOT the same - pull-right only goes to the right of the standard content area, not the right hand column if one is present. See Grid and Right-hand images for more information.
  • Captioned image, split images do not feature the Image CSS panel. Page / grid / column backgrounds, SCORM image selection and Header backgrounds do, but will not work properly if used.