# Image Cover

<figure><img src="https://1694021061-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuVFZPn6NWEBzyt3Pl8h6%2Fuploads%2Fi5Ls57dngVbQVJUmgNxj%2Fimage.png?alt=media&#x26;token=59d491e1-a915-494d-a8d8-1bf259ac4476" alt=""><figcaption></figcaption></figure>

## What is an Image Cover?

The Image Cover page accommodates an image with or without a text overlay.&#x20;

## Quick steps: how to create & edit an Image Cover page

1. **Open Authoring.** Create or open a [Learning Story](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types/learning-story), [Assessment](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types/assessment) or [Survey](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types/survey) [content type](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types).
2. **Open the Editor.**
3. **Add an Image Cover page.** Select the + icon and choose  Image Cover from the Add Page options.&#x20;
4. **Edit the Image Cover page.** Select the page to view [Page Options](https://everyday-digital.gitbook.io/authoring-docs/story-and-page-settings#what-are-the-page-options), and select Update to add and edit content. Add an [image](#what-are-the-best-dimensions-for-an-image-cover) and text overlay (optional).
5. **Format text and image layout and style.** Enter a text overlay (maximum 24 characters) and use the available [Settings](#image-cover-settings) as desired.

## Image Cover Settings

### Text Settings

**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 & Fill Settings

**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.&#x20;

* **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.

### Colour & Effect Settings

**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

### Mobile Device Settings

**Screen Adaption  (Mobile Only)**\
Set how the image should appear on screen:&#x20;

* Rotate to Fit, or
* Clip to Center,&#x20;
* Clip to Left, or&#x20;
* Clip to Right.&#x20;

{% hint style="info" %}
If you do not want your image to be clipped on mobile view, you should select Rotate to Fit.
{% endhint %}

## Image Cover Tips and FAQs

### What are the best dimensions for an Image Cover?

**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).&#x20;

### Which formats are accepted for the Image Cover?

Images must be in .svg, .jpg or .png format.

### Why is my image being cropped or cut off?

**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).
