Admin users (Global administrators or Content administrators) can add user defined thumbnails to items in the Catalogue. Civica recommend a 3:2 aspect ratio for these thumbnail images. Images that use the 3:2 aspect ratio will render without cropping in the learner portal, however, to optimise the user experience, these images may be cropped when viewed in our mobile Apps (note, although they may be cropped, using the suggested aspect ratio ensures they will not be skewed). This is because the mobile apps optimise the experience to make use of all of the available screen space, creating a more immersive experience for your users, whereas the learner portal may present white space around items where necessary to preserve the aspect ratio.
The remainder of this article provides some samples of how an image is rendered when viewed on a variety of different devices with differing aspect ratios and pixel densities. All of the samples shown below are screenshots taken on real devices, and using a standard image with the native resolution 1024 x 682, which matches the 3:2 aspect ratio that we recommend.
This is our sample thumbnail image; note that this contains coloured boxes, which should make it easier to identify the displayed, and therefore cropped areas, of the image in each of the samples below. The sizes indicate the extremities of the box in which they appear.
Screen shots are provided below for the following devices (note: only those devices with screen size and resolution details are currently included, other devices listed will be added soon)
Device Name | Operating System | Device Type | Screen Size | Screen Resolution |
Acer Iconia Tab B1 | Android | Tablet | 7" | 600 x 1024 |
Google Pixel C | Android | Tablet | 10.2" | 2650 x 1800 |
Huawei Mate 20 | Android | Phone | 6.53" | 1080 x 2244 |
Huawei Mate 20 Pro | Android | Phone | 6.39" | 1440 x 3120 |
iPad 2017 | iOS | Tablet | 9.7" | 1536 x 2048 |
iPad Air 2 | iOS | Tablet | 9.7" | 1536 x 2048 |
iPad Mini 2019 | iOS | Tablet | 7.9" | 2048 x 1536 |
iPhone 6+ | iOS | Phone | 5.5" | 1080 x 1920 |
iPhone 6s | iOS | Phone | 4.7" | 750 x 1334 |
iPhone XS | iOS | Phone | 5.8" | 1125 x2436 |
Lenovo Tab 4 10 | Android | Tablet | 10.1" | 800 x 1280 |
Motorola Moto E5 | Android | Phone | 5.7" | 720 x 1440 |
Samsung Galaxy A3 | Android | Phone | 4.5 | 540 x 960 |
Samsung Galaxy J3 | Android | Phone | 5" | 720 x 1280 |
Samsung Galaxy S5 | Android | Phone | 5.1" | 1080 x 1920 |
Samsung Galaxy S7 | Android | Phone | 5.1" | 1440 x 2560 |
Samsung Galaxy Tab S5e | Android | Tablet | 10.5" | 1600 x 2560 |
Samsung Galaxy S10 | Android | Phone | 6.1" | 1440 x 3040 |
Acer Iconia Tab B1 - Screen size 7.0 inches, screen resolution 600 x 1024 pixels
Library view
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
Google Pixel C - screen size 10.2 inches, screen resolution 2560 x 1800 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
Huawei Mate 20 - screen size 6.53 inches, screen resolution 1080 x 2244 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
Huawei Mate 20 Pro - screen size 6.39 inches, screen resolution 1440 x 3120 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Downloads Page
Search
Lenovo Tab 4 10 - screen size 10.1 inches, screen resolution 800 x 1280 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
Motorola Moto E5 - screen size 5.7 inches, screen resolution 720 x 1440 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
Samsung Galaxy A3 - screen size 4.5 inches, screen resolution 540 x 960 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
Samsung Galaxy J3 - screen size 5.0 inches, screen resolution 720 x 1280 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
Samsung Galaxy S5 - screen size 5.1 inches, screen resolution 1080 x 1920 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
Samsung Galaxy S7 - screen size 5.1 inches, screen resolution 1440 x 2560 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
Samsung Galaxy Tab S5e - screen size 10.5 inches, screen resolution 1600 x 2560 pixels
Library View
Library View My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
Samsung Galaxy S10 - screen size 6.1 inches, screen resolution 1440 x 3040 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
iPad 2017 - Screen size 9.7 inches, screen resolution 1536 x 2048 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
iPad Air 2 - Screen size 9.7 inches, screen resolution 1536 x 2048 pixels
Library View
My Learning - Library View
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
iPad Mini 2019 - Screen size 7.9 inches, screen resolution 1536 x 2048 pixels
Library view
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item In a Curriculum
Downloads Page
Search
iPhone 6+ - Screen size 5.5 inches, screen resolution 1080 x 1920 pixels
Library View
Library View - My Learning
Item Landing Page from Library
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
iPhone 6s - Screen size 4.7 inches, screen resolution 750 x 1334 pixels
Library View
Library View - My Learning
Item Landing Page from Library View
Item Landing Page
My Learning Tile
Item in a Curriculum
Downloads Page
Search
iPhone XS - Screen size 5.8 inches, screen resolution 1125 x 2436 pixels
Item Details Page from Downloads
Item Details Page
Item in a Curriculum
Library Details Page
Library View - My Learning
Library View
Root of Downloads Page
Root of My Learning
Search
Comments
0 comments
Article is closed for comments.