Requires Dash Plus
Explore our sets of course catalog images, including a fallback option, to create consistently designed course overviews in no time with our Dash plugin (Plus). Even if some courses don’t have their own images, displaying category-specific images, which you can set as defaults, is an effective way to achieve a cohesive look across your catalog.
How to use course catalog image design packages
- Install our Dash Plus plugin.
- Download our free design package of course catalog images
- Define your custom course categories within your LMS: Site administration/courses/Manage courses and categories
- Assign your courses to your course categories.
- Add the course category images to your categories via drag & drop here: Site administration/Blocks/Dash
- For your Dash block, select the data base “courses”
- Configure your Dash block e.g. as a grid layout and define the fields “background image” or “Image URL field” to show the category image
See our designs in action!
We have created a demo course using our design packages. Feel free to explore it!
Want to match colors with your CI?
If you want to customize the colors of icons or backgrounds, we also provide category icons as vector files (SVG), allowing you to adapt our designs to your branding guidelines.
How to create your own designs
What size format should the files have?
As course category images are usually displayed only in a Dash block, they don’t need to be very large. However, due to responsive design, the viewport, and individual Dash block configurations, it’s challenging to provide a recommendation that suits all cases.
Our course category images with backgrounds are 500x345px. Depending on your use case, you may adjust the size
Which file types are best to use?
Use jpg, png or gif files.
What needs to be considered when designing course category images?
If you want to integrate icons or visuals make sure, that there is enough space around it. The display of the images within a Dash block will be different depending on view ports and configurations, so that parts of the images will be cropped. Simple color schemes, patterns, and even photographs should work as well.
Always design a fallback image, as there can be missing categories.
If you use animated (GIF) files, make sure they are not too vivid, as this can be overwhelming in a grid layout. We recommend using animations sparingly – only for a few or even just one course category – if you want to highlight content with animation instead of relying solely on color.
What can you do, if your images are always cropped in one or more viewports?
If the images appear cropped in a viewport, just increase the pixel height of the images to fix this:
You can enhance this solution by adding your own styles, for example:
You can add these styles to the the raw SCSS of your theme (look at the settings of your theme, which can be found in the appearance section of the site administration).
In order to make it super easy for teachers to use these styles, just add the name of the class to the “CSS classes” setting of the Dash block, which can also be found in the website administration, under plugins > blocks > Dash.
Bonus tip: Moodle already uses a lot of styles, just to name a few:
Need some more inspiration?
Check out our product demo courses. We now have a dedicated plugin hub for each of our premium plugins. These hubs are product courses directly on our Moodle Demo Site. We offer demo courses on features and full showcases for inspiration and examples. Additionally, there are already several videos with instructions and information about the products. We are continuously expanding and adding more informational material to the hubs.