Course formats: Tiles format

Maintained by Picture of David WatsonDavid 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.
1755 sites
84 fans
Current versions available: 1
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
Please favourite and support future improvements by donating!

News 21 May 2019

Version 3.7.0 has just been released as a "beta". It allows for tiles to have photo backgrounds and has various other improvements. Read more and see the demo site here or download the 3.7.0 code here

Please contact me with any issues arising from your testing.  I will carry out any bug fixes, aiming to upgrade it to a "stable" release within the next few weeks.  I have marked it as compatible with Moodle 3.7.  I'd like to thank WU Executive Academy in Vienna for sponsoring the photo tiles feature and kindly agreeing to share it with the community.

If you do not wish to test the beta version, please use the most recent stable version (3.3.6) instead for the time being.


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


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

Comments RSS

Show comments
  • Picture of Jérôme DUBRUNQUEZ
    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.
  • Picture of Anil Kumar
    Tue, Jul 30, 2019, 4:57 PM
    Azaming plugins
  • Picture of Dan Jeffries
    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
  • Picture of Dan Jeffries
    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.
  • Picture of David Watson
    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 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.
  • Picture of Dan Jeffries
    Wed, Jul 31, 2019, 5:58 PM
    Huge help - thanks David. I forgot this was Beta.

    One other thing I noticed. When doing a User Tour on a course that uses the Tiles format, the CSS seems to override. The pop-up boxes show a blue header and black text, which is different to how the User Tour looks on, say, the front page.
  • Picture of Gabriel Rivadeneira
    Fri, Aug 2, 2019, 12:39 AM
    Hello David, I sent an email with this message, I send it again here if it is easier you can check it.
    This course format is great.

    Personally, I believe that it increases usability and user experience when browsing. Thank you so much for sharing it.

    I wanted to make a query, you have thought about enabling the option so that not only the pages and PDFs are displayed in a modal window, but that this is for all resources, such as lessons, tasks, questionnaires, in short all activities What does moodle handle?

    I think that by incorporating this detail, it would be the best way to navigate the contents.

    Thank you for your time and your response.
  • Picture of David Watson
    Fri, Aug 2, 2019, 5:12 AM
    Hi Gabriel I did consider this, but there is quite a lot of work involved (more for some activity types than others). I have no immediate plans to add any other activity type modals, but if any institution wants a particular activity and is able to sponsor development, that would obviously help.
  • Picture of Gabriel Rivadeneira
    Fri, Aug 2, 2019, 5:23 AM
    Hi David, could you try to see the feasibility of obtaining funds.

    You have an estimated cost that would involve including forums, tasks and glossaries. This would help me a lot.

    Thank you
  • Picture of JAYESH PUROHIT
    Tue, Aug 6, 2019, 2:05 PM
    Thank you for providing the information
  • Picture of Jatin Kumar
    Sun, Aug 18, 2019, 10:35 PM
  • Picture of Roland Fines
    Tue, Aug 20, 2019, 9:18 PM

    While this plugin does work very well, and is regularly updated, I agree with @Gabriel here, it is completely confusing that some resources/activities open in a modal window and others don't. But I guess the real issue here is the broken navigation model in Moodle, that I hoped to bypass using this plugin.

    How did you guys ended up configuring your module? How can we get the learner back from an activity into the course view (where the tiles are visible)?

    Thanks for any suggestion
  • Picture of Vishal E
    Wed, Aug 21, 2019, 5:56 PM
    why i can't mark the label for activity completion? in other course formats, it is possible, not in this.
  • Picture of Vishal E
    Wed, Aug 21, 2019, 7:27 PM
    i observed two things regarding completion tracking..
    1. when sub tiles are used for activities, labels don't even show checkbox to mark it complete.
    2. when subtitles are not used, labels do show checkboxes, i can mark them. but on homepage, on main tiles, these are not counted.
  • Picture of Roland Fines
    Wed, Sep 11, 2019, 9:27 PM
    Hi this rules is not specific enough and affect all buttons inside a course page.

    .format-tiles .btn:hover { background: inherit; }

    Could you make more specific so it doesn't affect all btn?

1 2 3 4 5 6
Please login to post comments