Advanced: Image template

Key Takeaway: There are lots of advanced customisation options you can apply when utilising an Image template.

In the How to: Image template article we reviewed the basic information you need to use an Image template in your lessons. This article explores advanced configuration options available to help customise your template. While this information is not required for using the Image template, it can be useful for those of you who want to create the most visually appealing lessons possible.

The size field lets you control at what size your uploaded image displays in the app. While it is best to experiment with different sizes to see what suits your content, it’s useful to understand how different configurations work. With that in mind, let’s have a look at what’s available:

Size

The size field.

Selecting X% resizes the image to display at that & of the screen’s width. For example, if you chose to set the size to 80%, on any device there will be space to the left and right of the image, totalling to 20% of the screen’s width (with the remaining 80% spent on the image). This can be useful if you want to add some padding to your image; having it touch the sides of the screen is generally not the most attractive way to display your images.
The use of the % size also ensures that the image be viewable on any device - e.g. it will always take up 80% of the screen (even if it was initially quite a small image).

Initial can be useful if you want to ensure your image doesn’t undergo any resizing (perhaps you are concerned about the decreased visual fidelity associated with increasing an image’s dimensions), with the understanding that since the image does not resize, it may look smaller on bigger screens. Similarly, it may lead to images being zoomed in on smaller screens if larger images are used.
When setting the size to initial, be sure to check out how the content looks on different devices using the device selector underneath the content preview window.

Contain is great for when you don’t have time to check how your image will display on different devices - the image will resize to fit on whichever device your learners access their lessons on. Similarly Zoom is perfect for leaving the image size up to your users - they can double tap or pinch the image to zoom in and examine your image in greater detail.

The background colour field allows you to configure the colour which appears behind the text which pops up, or the colour of the background in lightbox mode (more on that later). Left unconfigured, the background colour defaults to being the same as that of the lesson’s colour theme. However in the case that this colour clashes with your image, or makes it hard to view, you have several different ways to change it using the background color field.

At the most basic level, you can enter the name of the colour you would like to use (e.g. blue) and Ed will set it to be that colour for you. If you want to be more specific, in the same field you can enter a colour’s hex code. For example, enter #46b4e9 in the background color field to set it as light blue.

Finally, using a colour’s RGB code you can set a level of transparency for the textbox to use. This can be useful to ensure learners who are accessing your lessons on smaller devices are still able to view the entire image while the textbox displays.
For example, the light blue colour mentioned above has the following RGB code: rgb(70, 180, 233), and putting this in the background color field would give you the same results as inputting #46b4e9. However, inputting rgba(70, 180, 233, .9) creates a light blue background for the text, at 90% opacity. Generally it is recommended to use high opacity (e.g. .8 or .9) to ensure that text is always readable, but this is for you to decide on a case-by-case basis.

Here it is also important to mention the Text color dropdown, which is used to choose either white or black text colour for the image caption. This may need to be changed depending on the background colour you select.

Background Colour

The background color and Text color fields.

There are some final minor options which you can configure when setting up an Image template.

Minor options

Other configurable fields in the Image template.

As with other templates, the prompt field can be configured if you would like to make it specific to your image (e.g. In the above example it could be set to Tap the image to learn more about Product X), but in 99% of cases it is best to leave the prompt in its default state.

Tap anywhere to continue Lets the user tap anywhere on the image to progress to the next slide, when there is no text content to review. This can be used to briefly and quickly introduce a specific topic within a lesson, like a cover image for the following content.

Using Lightbox mode brings focus to your image - any existing lesson branding is not displayed while the user is on this slide, and the background colour is set entirely to that in the background color field. Use this when you want your learners to focus entirely on the content of the image.

Finally, as with other knowledge transfer templates, the Image template can be narrated to help further engage your learners in the lesson’s content.

Load Comments