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:
11100 sites
253 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 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.


Screenshot #0
Screenshot #1
Screenshot #2
Screenshot #3
Screenshot #4
Screenshot #5
Screenshot #6
Screenshot #7
Screenshot #8


David Watson (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS


  • Wed, May 29, 2019, 3:22 PM
    Thanks Pamela. To answer your question:
    - pages will open in modal windows (pop ups), unless the site admin has disabled this feature site wide by unchecking "Page" under Site Administration > Plugins > Course Formats > Tiles > Modal modules > Page
    - you could also post the video as a "URL" activity and set "Display" to "embed". If you do that with plugin version 3.3.x, the video will display without a modal window. If you do that with plugin version 3.7.x (currently in "beta" but I hope to upgrade to "stable" in the next few weeks), you will see a modal window, unless the Site Administrator disables modal windows for URL activities by unchecking Site Administration > Plugins > Course Formats > Tiles > Modal resources > URL (Display: Embed)

    I hope that makes sense. If you want to send me a screen shot of the issue you have using the pop up, please use the "Contact developer" button above to message me and I will email you back.
  • Thu, May 30, 2019, 10:55 PM
    Hi, thanks for amazing plugin!
    In adaptable theme the subblocks images no redirect for the content, just the text contains the link.
    In the boost theme this does not occur.
    Can i help me?

    Sorry for my english.
  • Thu, May 30, 2019, 11:24 PM
    Thanks Gilbert I will address that in the next version of the beta (in the next few days)
  • Fri, May 31, 2019, 12:15 AM
    Thanks David, I use the beta version. The new funcionality "upload new image" in the course block is fantastic. Is possible to replicate the same funcionality in the subblocks?
  • Fri, May 31, 2019, 9:29 PM
    If I manually mark an activity as completed, it does not show in the tile.
  • Fri, May 31, 2019, 10:40 PM
    The content becomes narrow when tiles are low amount. How to solve?
  • Wed, Jun 19, 2019, 8:43 AM
    Hi David,
    I love your plugin!
    Can I request being able to change activity icons, like tile icons?
  • Wed, Jun 19, 2019, 8:11 PM
    Thanks Jeremy I will definitely consider it for a later release (and photos for sub-tiles as suggested by Gilbert). Planning to let the dust settle for a while after the most recent changes though.
  • Thu, Jun 20, 2019, 11:44 PM
    Hi David,

    I'm really enjoying this theme as it works very well for more visual learners. However, I've the same issue as @Srikant Padhi where the tiles have to aligned themselves across the page but with a narrow area for content - this means when the drop-down occurs any embedded content (large images or videos as a Label) is quite narrow and thus are unreadable or have a scroll bar.

    Example 1: Course which has 10 tiles, these spread themselves across the page as 7 top row and 3 bottom. This means the drop-down fills the entire page/browser window. Great!

    Example 2: Course which has 6 tiles has aligned as 4 on the top row and 2 on the second. This means the drop-down for content is narrow and does not fill the page.

    Is there a fix for this? The loading page does appear before the tiles are displayed but this leads to the above issue. When I use the demo site I get 5 tiles across with the side-nav showing which shows more content, so I'm not clear on why this does it on my site! I'musing Fordson on 3.6.


  • Fri, Jun 21, 2019, 2:36 AM
    Hi Juli I sent you an email asking if you could help me with some screen shots. I did improve this in one of the recent Beta releases so, if you are not on the latest, it may help to upgrade. (I also messaged Srikant with the same request.)

    The workaround for the time being would be to deactivate "Fit tiles to screen width" under Site Admin > Plugins > Course Formats > Tiles > JavaScript. It comes from an experimental feature which probably needs a little adjustment.
  • Mon, Jul 15, 2019, 8:11 PM
    Bonjour, j'ai installé la version beta, j'ai remarqué lorsque l'on utilise l'option photo en arrière plan l'indicateur cadenas (restriction) disparaissait ce qui est dommage.
  • Tue, Jul 30, 2019, 4:57 PM
    Azaming plugins
  • Tue, Jul 30, 2019, 6:08 PM
    Hi David

    Firstly, congratulations on such a fantastic plugin.

    We are testing our the course format and I noticed a couple of anomalies. We are using your 3.70.13 release and we also use the Lambda theme.

    What we are noticing is that tiles are showing a progress status even when no content is included. I'm sure this isn't right, and I'm sure this wasn't the case with the previous version (before images were possible). Also - when selecting the % display option - we're not seeing the circle display in the Tile; it's a bar at the bottom.

    Finally, can you confirm if there is an option to show new content has been added to a section? This is possible in the Grid format and would be hugely useful.

    Thanks - Dan
  • Tue, Jul 30, 2019, 6:25 PM
    Sorry - 2 more queries!

    1. Is there a way to remove the 'Your Progress ?' element that resides at the bottom of each section? This seems redundant now and - when the ? icon is clicked - nothing happens.
    2. When we use Tiles for Activities/Resources we see a strange effect where the resource icon eg. PDF icon, displays multiple times when hovered over. This is inside the tile. Could this be a theme conflict?

    Thanks again.
  • Wed, Jul 31, 2019, 2:58 AM
    To answer the last few questions:
    - Jérôme: For photo tiles I didn't include all of the elements which are displayed on standard tiles. I thought it better to let the photo show as much as possible and too many things hovering on top it didn't look good when I tried.
    - Mina: you could do this by adding custom styles to Site Admin > Plugins > Course Formats > Tiles Format > Other > Custom CSS. If you know CSS or have someone who can help you with it, you can override colors here.
    - Dan: progress on photo tiles - I just introduced progress for photo tiles as a new feature, so thanks for the bug report. I have pushed a fix for this up to Bitbucket just now to hide progress if there are no activities to complete, as with standard tiles. I will add it to moodle.org soon as a new version. You also spotted that, on photo tiles, it's not yet possible to use radial % progress indicators, only fractions. This is intentional for now, until I complete the additional feature. If you prefer to deactivate progress display on photo tiles, you can do that under Site Admin > Plugins > Course Formats > Tiles Format > Photo tiles. The hover issue is I believe specific to Lambda theme and doesn't sound hard to fix for a developer with access to the theme, but I don't have it. Finally the 'Your progress' thing - I am adding a class to this element in the next release. After the next release, you can hide this item by adding the following text to Site Admin > Plugins > Course Formats > Tiles Format > Other > Custom CSS: .format-tiles .completionhelp {display: none;}

    I am proposing to take photo tiles out of beta soon so if you have found any issues in testing, please let me know. You can use the 'Contact developer' button above to contact me by email.
Please login to post comments