Presentation

Site Defaults

Site Banner Image

(front page banner, when user is not a member of a programme site)

This is set in code, and has specified fall back image that can only be changed by a modification to the theme.

The intention is that this would ultimately fall back to a faculty specific image in the case where the user does not have a programme specified in their profile (i.e. staff over multiple programmes). FUTURE

Module Presentation

All modules on corp.myplace follow the same underlying course format.


Module Banner Image Specs

The module banner image will be displayed on: 

As the image will need to adapt to various placements and screen sizes, there isn't one specific size that will work for all images.

Things to consider when selecting the banner image:

  • Avoid text on image or other functional information
  • The image should be treated as a decoration only
  • Any part of of  the image could be cropped at a specific screen size

What works best:

  • A large image ideally with width between 1800px and 2500px
  • 72dpi resolution (please do not use images optimised for print)
  • Where possible without loosing quality, less than 150kb size after compression (please compress images before uploading)
  • Central area of focus
  • A decorative image that can be cropped at different sizes without losing meaning

The image below shows how an example, size of the image below is:

  • width 2100px;
  • height 1400px;
  • ratio 3:2


Images and page speed

Please use compressed images

Large images can have a big impact on page speed. Please ensure that all images are compressed before uploading.
There are a range of tools that can be used to compress images, for example TinyPNG https://tinypng.com/
To use the tool simply upload the images (single or multiple) and download the compressed version. The operation can be repeated to increase compression.

Depending on the dimension of the images, please aim at maintaining the file size at a maximum of 80-150 KB for medium photos, and a maximum of 250-300 KB for very large images such as large banners.
Please never use images larger than 500kb.

Other tips:

  • Only use images optimised for web
  • Never use large images that are optimised for print
  • If using image editing software, save the image for web
  • Edit the image to reduce the dimensions to the size that is necessary
  • Consider high density retina screens when dealing with smaller images. For example for a small image of 300x300px use 600x600px if possible


Reference Numbers

In line with SOL guidelines, each activity can have a reference number assigned (see below)

The icon on each section allows you to renumber all of the activities within the section based on their position.
Please note that the first section in a course module, usually welcome or introduction, has a section number of 0 (zero) and the position of the first section section can not be changed.
If using the automatic numbering, please leave any hidden sections last so that they won't impact the automatic counting.

The reference number can be manually edited in the activity settings under the "Presentation" category.

Activity Tiles 

The details displayed on individual activity tiles are controlled by the Presentation section within the activity's settings:

Module Resource Image

This is the image that will be displayed on the activity card, please not that is image is meant to be decorative and there is not an option to add alternative text. Please do not use this image to communicate information that is not mentioned in the card title or label. Please avoid using images of text. If the field is left blank, the theme will automatically use the course module image in the activity cards.

Note:
There is no required image size but please consider the following:

  • it's recommended an aspect ratio and minimum dimensions of 300x130px (600x260px best size for retina screens).
  • activity images are decorative only, please do not use informative images or images of text
  • the image will resize at different screen sizes, please assume that parts of the image will be cropped differently at different screen sizes
  • please do not use images that are larger than necessary
  • compress images before uploading


For example, the following image has an original size of 600X400px, and the dark area outside of the yellow border will be cropped.



The portion of the image highlighted in purple will be visible at most screen sizes, but it may be cropped in few cases. Therefore, the central clear area is the safe area where the focus of the image should be.

Images and page speed

Please use compressed images

Large images can have a big impact on page speed. Please ensure that all images are compressed before uploading.
There are a range of tools that can be used to compress images, for example TinyPNG https://tinypng.com/
To use the tool simply upload the images (single or multiple) and download the compressed version. The operation can be repeated to increase compression.

Depending on the dimension of the images, please aim at maintaining the file size at a maximum of 80-150 KB for medium photos, and a maximum of 250-300 KB for very large images such as large banners.
Please never use images larger than 500kb.

Other tips:

  • Only use images optimised for web
  • Never use large images that are optimised for print
  • If using image editing software, save the image for web
  • Edit the image to reduce the dimensions to the size that is necessary
  • Consider high density retina screens when dealing with smaller images. For example for a small image of 300x300px use 600x600px if possible

Duration

This will display a small label with a duration icon on the tile's image. This should be used to communicate how long the activity will take. Typically this would only be used with resources that have a playback duration, such as video or audio. 

Reference Number

The Reference Number is used to provide a consistent numbering scheme for each activity in the course. There is an option on each section to automatically re-number each activity based on the order of the activities. However you can change it manually here.

Presenter / Authors

This will display an author / presenter on the tile, which could be different from the person who created / added the activity.

Main Content Type

This drop down allows you to provide an additional hint about the sort of content the activity will present. Setting this will affect the icon that is displayed on the mid-right part of the activity's tile.
The activity type is automatically detected from the Moodle activity module that is being used. However, for some activity types (e.g. pages), it may be necessary to specify they type of content (e.g. video).