2

Get a free set of course catalog images, including a fallback option, to create consistently designed course overviews in no time with our Dash plugin. 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.

With Dash, you can set course category images across platforms for your created course categories. Simply drag and drop the images into the category.

 Tip: If the images appear cropped in a viewport, just increase the pixel height of the images to fix this:

.dash-block-content img.img-responsive {
    max-height: unset; /* default is 120px; unset removes a maximum height */
}

You can enhance this solution by adding your own styles, for example:

/* class: zoom-hover — slightly zoom in a card on hover */
.block_dash.zoom-hover .dash-container .dash-block-content .card {
  transition: transform .2s;
}
.block_dash.zoom-hover .dash-container .dash-block-content .card:active,
.block_dash.zoom-hover .dash-container .dash-block-content .card:hover {
  transform: scale(1.02);
}

/* class: bw-hover — display images in black/white unless on hover */
.bw-hover .dash-block-content img.img-responsive {
    filter: grayscale(1);
}
.bw-hover .dash-block-content img.img-responsive:hover {
    filter: grayscale(0);
}

/* class: *-ar — set aspect ratio for image size */
.mobile-ar .dash-block-content img.img-responsive {
    aspect-ratio: 9/16;
}
.video-ar .dash-block-content img.img-responsive {
    aspect-ratio: 16/9;
}
.square-ar .dash-block-content img.img-responsive {
    aspect-ratio: 1;
}
.tall-ar .dash-block-content img.img-responsive {
    aspect-ratio: 2/3;
}
.wide-ar .dash-block-content img.img-responsive {
    aspect-ratio: 3/2;
}

/* class: tiny-img — make the image tiny (50px) */
.tiny-img .dash-block-content img.img-responsive {
    max-width: 50px !important;
}

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:

In addition to the ready-made images, we also provide SVG icons. These can be recolored and customized with your own background, making it easy to align with your company’s branding.

Using the powerful Dash block, you can completely change the layout, content and style of pages like the front page or the dashboard. At the heart of the Dash framework is a powerful query builder. Dash makes data available from various data sources, such as courses, users, completions, site logs and more. This data is then displayed using layouts such as grid, slider, masonry or tables and comes with many powerful customisation options like filters, conditions and full control over the fields displayed. Additional dashboards can be setup to cater for the specific needs of your target groups and/or roles. This gives you the ability to adjust the layout and structure of your Moodle site to what makes sense for your particular use case.

Learn more

Download the our ready-to-use course category image packages "minimal" here.

Download category icons: minimal (SVG) to create your own custom course category images here.