Image Cover
Create a full-page image with text overlay.
Last updated
Create a full-page image with text overlay.
Last updated
The Image Cover page accommodates an image with or without a text overlay.
Open Authoring. Create or open a Learning Story, Assessment or Survey content type.
Open the Editor.
Add an Image Cover page. Select the + icon and choose Image Cover from the Add Page options.
Edit the Image Cover page. Select the page to view Page Options, and select Update to add and edit content. Add an image and text overlay (optional).
Format text and image layout and style. Enter a text overlay (maximum 24 characters) and use the available Settings as desired.
Text Layout Type Choose Heading & Sub-Heading or Heading & Text. Heading & Sub-Heading consists of a small heading with a maximum of 24 characters and big heading with a maximum of 45 characters. Heading & Text consists of a big heading with a maximum of 45 characters, and a short paragraph of text with a maximum of 144 characters.
Text Position Choose the heading text position: Center, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, or Bottom Right.
Text Colour Select from the available options.
Text Shadow Select Yes/No.
Position Determines the origin where the image must be anchored when the image fills the screen. Image Fill Determines how the image must fill the screen.
Full Width / Height (Default) Fills the screen with the image until width and height of the screen is covered. Ideal for non-critical or aesthetic images.
Full Width Fills the screen with the image until the width of the screen is covered. Ideal if the width of the image is more important to see than the height.
Fill Height Fills the screen with the image until the height of the screen is covered. Ideal if the height of the image is more important to see than the height.
Contain Width / Height Ensures the entire image is visible on screen and will automatically adjust width and height.
Image Orientation Landscape, Portrait, Auto.
Filters Choose from: None (Default), Inkwell, 1977, Amaro, Brannan, Crema, Moon, Perpetua, Toaster, Nashville, X-Pro II, Ghost
Background Colour Choose a colour to overwrite the theme default.
Blend Out Choose None (Default) or Yes. If Yes, then the image edges will be blended into the background.
Image Effect (Non-Mobile) For the desktop and tablet view, you can add image effects which include: None (Default), Shadow, Framing or Framing with Shadow
Screen Adaption (Mobile Only) Set how the image should appear on screen:
Rotate to Fit, or
Clip to Center,
Clip to Left, or
Clip to Right.
If you do not want your image to be clipped on mobile view, you should select Rotate to Fit.
Insert a landscape image at 1900px (w) x 1268px (h), and a portrait image at 800px (w) x 1200px (h). If your image is not the exact size, it will automatically be cropped and resized depending on the image orientation you select (portrait and landscape are cropped, whereas auto will only resize).
Images must be in .svg, .jpg or .png format.
If the image does not fit on the page, some settings may need to be adjusted. When the image is always required to be contained in the view on Mobile and Desktop, the best option is to use Contain Width & Height. The other options won't work across screens.
Since mobile ratios vary so constraint would be the only option to use to keep the image in view across devices.
Make sure that under Mobile Device Settings, the Screen Adaption settings is set to None (Default).
