Tiles format
Course formats ::: format_tiles
Maintained by
David Watson
A course format which displays course topics as "Tiles", in a grid rather than as a list. When clicked, tile content is displayed under the tile with an animated transition. The layout adapts to different screen sizes and orientations. Within each tile, activities can also be set to display as "sub-tiles". For each tile, the teacher can pick an icon from a predefined set, or upload a background photo.
Latest release:
12477 sites
4k downloads
279 fans
Current versions available: 3
Key features
- Tiles are used to show course topics and activities
- Animation is used to expand tiles to reveal content
- Icons or photos on each tile increase visual appeal
- Modal windows (animated pop ups) to show content
- Colours for tiles are customisable
- Theme compatibility is broad (Boost, Clean, Essential, Moove and Adaptable).
- Easy to switch into Tiles from other formats (e.g. Topics, Grid) without changing course content
- User friendly (e.g. tile icons are provided and don't need to be uploaded)
- Mobile responsive (adapts to different screen sizes and orientations)
- Progress shown on tile with % in a circle, or as a fraction

Moodle 4.0: The beta version of Tiles for Moodle 4.0 will be released in May 2022. The stable release is likely to follow in June 2022. Significant changes will be needed, so existing released versions of the Tiles plugin will not work with Moodle 4.0. if you want to use Tiles with Moodle 4.0, you will need the update.
Moodle 3.9: If you are running Moodle 3.9, it is essential that you use the Moodle 3.9 (or higher) version of the Tiles plugin. The Moodle 3.7 version is incompatible (following a change to Moodle core) and will cause you problems. You can see which version of 'Tiles' you are running under Site administration > Plugins > Plugins overview > Course Formats > Tiles Format.
Contributors
David Watson (Lead maintainer)
Please login to view contributors details and/or to contact them
One of our clients has requested that we adjust the Tiles course format to prevent it from navigating to the tiles section of the course page upon landing. We attempted turning off JavaScript navigation but then noticed some visual artifacts.
Please advise whether the above could be achieved easily. The client specifically requested that the user lands at the top of the page so that they can see the course title and description area.
I managed to disable it by commenting out line 678-684 and line 977 in tiles/amd/src/course.js:
Line 678-684:
// if (openTile !== 0) {
// tileFitter.init(courseId, openTile, fitTilesToWidth, false);
// } else {
// // Set focus to the first tile (not section zero).
// $(Selector.TILEID + "1").focus();
// tileFitter.init(courseId, null, fitTilesToWidth, false);
// }
Line 977:
// $("ul.tiles .tile").first().focus();
You will have to compile a new .min.js version for tiles/amd/build, or replace the min.js version with the modified version from tiles/amd/src.
This is probably not a good fix for this problem, and it will have to be done manually after upgrading the plugin etc., but without the option within the plugin to disable the automatic scroll, it is a must for us, to do it like this for now.
Tried using #tile-2 border-top-color: to change the color for my second tile and everything works fine but if i try to change another one, doesn't work.
I have a Moodle version 3.8.2+ (Build: 20200408) and I have this plugin installed in version 3.9.0.13
2020080613. The problem arises when loading an image for the tiles, they randomly disappear after a while. The system does not throw any error message. Any recommendation to solve this problem?
¿Hay alguna forma de definir el numero de mosaicos por fila?
Ya he visto que el Admin puede definir el ancho de los mosaicos como CSS, pero seria muy interesante que en cada curso se pudiese definir cuantos mosaicos se quiere en una fila.
Aportaría mucho a la estética del curso.
Gracias.
Nieves