Images can be added to various places on a course. To ensure that any images you use are fit for purpose and appear the way you intend them to, we've got some recommendations.
A photographic page background image, and vector images on a narrative component.
Background Images
Background images should be 2000 pixels wide and 1440 pixels high, and should be used as:
Menu backgrounds
Page backgrounds
Article backgrounds
Get creative with your background images! The highlighted area on the screenshot is a blank article with an image made up of the background colours of the articles that are above and below it.
Full width images
Full width graphics should be 1024 pixels wide and 400 pixels high, and are useful for the following components:
Graphic component (full width)
Reveal component (full width)
Hidden Hotspots component (the graphic for this component must be 1024px wide)
Hot Graphic background (it is recommended that background images be 1024px wide, but the height can vary)
Half width images
Half width graphics should be 512 pixels wide and 400 pixels high, and are useful for:
• Accordion component
• Branching component
• Flipcard component
• Graphic component (half width)
• Graphical Multiple Choice Question
• Narrative component
• Reveal component (half width)
• Stacker component
• Yes/No component
• Hot Graphic pins
• Mentor extension
When using half width images, the magic number is 512; all images should be at least 512 pixels wide. Using an image that is under 512 pixels wide will force Authoring - Library Content to resize the width of the image
to 512, also forcing the height to be resized. This can potentially lead to blurry images or images appearing incorrectly.
The carbon menu
The carbon menu is ideal for using imagery as menu items. For the menu items, half width sized graphics should do the trick, but this will depend on how many menu items there are. For instance, 512 pixel width x 400 pixel height images will appear fine on a nine-page carbon menu, but on a six-page carbon menu they will appear slightly cropped. We recommend using imagery where the detail is centrally positioned, so that if cropping does occur the image isn’t negatively affected.
512x400 images on a six-page carbon menu.
512x400 images on a nine-page carbon menu.
The badges extension
The Badges extension displays a badge in four different states: achieved, unachieved, hover and selected. There are two recommended image sizes for badges. The first recommendation is for an image that is 100 pixels wide by 400 pixels high - this image should contain four 100px by 100px images. Each of these four images represents a different state for the badge:
| • the top image should be the ‘unachieved’ state, • the 2nd image should be the badge in its ‘achieved’ state, • the 3rd image should be how the badge looks in its ‘hover’ state, • the bottom image should be how the badge looks when it is clicked on, or selected. |
Alternatively, you can create one badge with the dimensions 100 pixels by 100 pixels, which Authoring - Library Content will apply different levels of brightness to, to achieve the four different required states.
| An example of a 100px by 100px badge image: |
Logos
There are a few different places in Authoring - Library Content where you can add logos:
Navigation logo
Loading screen logo
Mobile logo
Cinnamon menu logo
In summary
1. A background image added to the course page - 2000px by 1440px (a background
colour class has been added to the first article to make the title and content stand out).
2. This graphic was added to a full width graphic component. It was exported as a png with a transparent background and its dimensions are 994px by 215px. It has been automatically resized to 1024px, but as the image is of good quality its appearance is not affected.
3. The half width graphic on the narrative component is 512px by 420px. When using multiple images together (on a narrative, for example), the important thing to remember is to keep the sizes consistent.