Summary
Use your own logo and brand in the LearnUpon portal. Each image has a recommended size and aspect ratio.
Image features are available to all customers.
The eCommerce store uses the same size and resolution of images, but you set your store branding separately from your portal. See eCommerce: add your brand with color, logos, images and video.
Image basics
For best results, LearnUpon recommends:
- use PNG or JPEG files. The PNG format is designed for logos, graphics and graphs. The JPEG format is intended to share photos online
- use high resolution images to avoid pixelization or blurriness on retina displays
- for logos, choose images with transparent backgrounds
- for image filenames, avoid white spaces and characters like parentheses, that can cause issues with uploads
When you upload images, LearnUpon opens the image resizing tool. You can crop and resize images to fit the dimensions required, and add alt-text to ensure you meet accessibility standards. See Images: crop images and provide alt-text.
Tip: see LearnUpon's Web accessibility statement: WCAG 2.0 and 508 standards
Logos: header logo, squared logo and mobile app logo
LearnUpon lets you set the look and feel of your portal with branding tools.
The following screenshot shows the 3 logo options. This portal example displays the logos against the header color, picked on the same page. See Brand your portal.
Header logo
For headers, LearnUpon recommends images at least 322 px wide and 72 px high.
The header logo appears in the navigation bar on every page of the portal, and is a navigation tool, to return to your dashboard.
Landscape style logos produce the best results. Use an image with a transparent background, no padding or spacing.
The application scales the image automatically, to provide the best quality image and logo across all devices.
Squared logo
The square logo appears in your portal:
- on smaller screen sizes
- as the favicon for the browser tab
- in your portal footer, if you have a white-labelled portal
For the square logo, upload an image at least 72 px square.
Mobile app logo
This logo appears in the iOS and Android apps.
For this image, LearnUpon resizes the logo to 40 x 40 px and 80 x 80 px for different screen types.
Login screen
You can add text, an image or a video to the login screen. Recommended image size is 730 x 600 px, though the space is flexible.
See Customize your login page.
Tip: Preview your image result on the login screen before publishing externally.
User profile images
The profile image is optional, based on portal settings. See Portal setup: users' general settings.
For user profiles you can use a high-res image in any shape. The cropping tool provides a roundel for resizing. LearnUpon recommends starting with a square image.
The following screenshot shows the image cropping tool, set for a user profile.
Course images
Course images appear:
- on the learner's dashboard for any course they are enrolled on
- in the course catalog
- in your eCommerce store
LearnUpon recommends uploading at least 1 image per course or learning path, to serve as a thumbnail image.
For course and learning path images:
- ratio is 16:9
- minimum recommended size is 800 x 450 px
You can use LearnUpon’s cropping tool to resize larger images.
See Add images for a course or learning path.
The following screenshot shows 2 course images uploaded to a course, with 1 set as the thumbnail image.
Multimedia banners
Multimedia banners combine images, videos from Vimeo or YouTube, and text, with a call to action button, on a background color of your choice. These banners appear on the learner dashboard.
The image appears to 1 side of the text.
These banner images are 1294 x 640 px.
See Set up dashboard and catalog banners for full instructions.
The following screenshots shows a multimedia banner when you set it up in portal settings.
Image banners
Image banners are use static images, plus your own messages. You can provide links to content like a new course or an announcement. These banners appear on the learner dashboard.
Image banner size is 1540 px x 320 px, and up to 300 KB in size.
The following screenshot shows an image banner from the portal settings page.
Forums
Forum topics include thumbnail images, up to 96 x 96 px. You can select from generic graphics or upload your own images. See Enable forums for your portal, and add topics.
Forum posts can include cover images, up to 696 x 354 px. See Forums: a learner's view.
Gamification badges
LearnUpon provides default badges for gamification, or you can add your own.
Badge image sizes are up to 360 x 360 px. See Create, assign, and edit gamification badges for instructions, and a downloadable file of default badges.
The following screenshot shows some default level badges with custom level names.
eCommerce: Hero Image
A hero image acts as a background image for the top section of the store page.
The optimal size for a hero image is 1400 x 520 px and under 200 KB. LearnUpon centers the images for all screen sizes.
An image less than 1400 px wide loses quality on wider screens. You can use a wider image for higher quality.
Email: banners for custom email templates
Banner images you associate with custom email templates are ideally 600 px wide, and up to 200 px in height. Max size is 500KB, aka 0.5MB.
See: Manage banner images for email notifications.
Email: images stored as resources for templates
Add logos or other images as a resource, then embed them in email templates.
Image sizes are flexible, and you can set them within the email using HTML.
See: Add images to your custom email templates.
Certificate images
You can award certificates to your learners after they complete courses. The fields from their user profile, and custom user data, provide text content.
Certificate images size is 3462 x 2401 px. Use high resolution images of at least 300 dpi.
See the sample certificate attached to this article.
See: