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.
(Click image to enlarge)
The following items make use of this window:
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.
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.
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.
Copying an image file directly from a folder or desktop does not work with Click n Paste.
To rename an image, click on an image to select it and then click the ‘Rename’ button at the bottom of the window.
A popup message will appear, allowing you to type in a new name for the image.
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.
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.
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!
To resize an image, click on an image to select it and then click the ‘Resize’ button at the bottom of the window.
The following window will appear:
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.
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.
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.
This option is currently not working. If it is fixed at a later date this section will be updated with more information.
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.
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.
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.|
|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.|