Snap offers an advanced and intuitive way to manage your cover images for the front page and your courses. The tool gives full control over how these images are displayed.
What has improved?
The functionality introduces an image editor directly into the course interface. This allows you to preview, select, and save the portion of the image you want to display, ensuring it looks exactly as you envisioned.
How does the new image editor work?
When you click the "Change cover image" button, a modal window will open with the following features:
- Upload an image: With just one click, you can select a new image or change an existing one.
- Preview: You'll see a preview of the image you've uploaded.
- Selection and Cropping: You can use a selection box to choose the part of the image that will be displayed as the cover. The selection box can only be moved vertically to help you choose the best portion.
- Save: Once you're satisfied with your selection, click "Select image" to save the changes. The portion you selected will be what's shown in the course header and the front page cover.
What happens to the original image?
The original image you uploaded is not modified or cropped. The system saves the position and cropping information you selected and applies it as a background to the cover. This is important because the original image is used in other parts of Open LMS, such as the Featured Courses page.
How do I delete a cover image?
When you click "Change cover image", if there's already an image loaded, you'll see a button to "Delete image". Clicking this button will remove the cover image from the course.
Why does my cover image look different from the selection in the preview?
Previously, there were some issues where images looked different after being saved or when accessibility messages appeared. This bug has now been fixed. The image displayed on the course cover is now exactly the same as the one you selected in the editor, regardless of the saving status or the presence of alerts.
What about the ratio on the homepage and categories?
Improvements have been made to ensure that cover images on the main page, login page, and categories are displayed correctly. The Open LMS team has defined an ideal aspect ratio to ensure they look optimal on high-resolution screens:
- Aspect ratio of 3:1 (2400 x 800px) for homepage cover images.
- Aspect ratio of 6:1 (1920 x 320px) for course and category cover images.
Display behavior on mobile and small screens
To ensure a consistent and accessible experience for all users, we have updated how course cover images are displayed across different screen resolutions.
- Screen width over 992px: The course cover image remains visible with a slightly optimized font size for the course title. The option to upload or change the image is available in this view.
- Screen width under 992px (tablets and mobile): To prevent accessibility issues, such as images being improperly cropped or interfering with text legibility, the course cover image is not displayed. In these resolutions, only the course name is visible, and the option to change the image is disabled.
This prioritizes a clean, accessible, and functional interface, ensuring that course information remains readable on all devices without visual distortions.
| >992px | <=992px |
Example of 700px |