Course formats: Grid Format

Maintained by Gareth J Barnard Gareth J Barnard
A modular and visual course format. Hides all topics and creates a grid of icons (one for each topic) with short titles. Clicking on an icon brings up the content from the corresponding topic.
4611 sites
93 fans

A modular and visual course format. Hides all topics and creates a grid of icons (one for each topic) with short titles. Clicking on an icon brings up the content from the corresponding topic in a "lightbox" style display.

REPORTING ISSUES: When reporting issues you MUST clearly state the full version and release of both Moodle and the Grid format as contained within their 'version.php' files - if not it takes me longer to figure out, often resulting in me asking for the details anyway and slowing the process of solving your problem down.  It really helps to upload and describe in detail the issue you are having on the 'Course formats' forum.

Screen cast:

More to follow as new icons have been added....


Screenshot #0
Screenshot #1
Screenshot #2
Screenshot #3


Gareth J Barnard
Gareth J Barnard (Lead maintainer): Maintainer
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Picture of Robert DeLonge
    Wed, 24 Jan 2018, 3:41 AM

    We have done some testing with different screenreaders (NVDA and JAWS) and are unable to have the screenreader work with the Grid format. Are there any plans to make the Grid format ADA friendly with an update in the future?

    Thanks, Rob
  • Gareth J Barnard
    Wed, 24 Jan 2018, 4:23 AM
    Dear Rob,

    Please forgive the rant I am about to type. Ok, firstly what version of the Grid format are you using? Secondly I'm only maintaining for M3.2+. Thirdly, what is ADA please?

    Fourthly I have spent literally days and days over many years attempting to make the Grid format accessible. And every now and then somebody asks the very question you've just asked but provides no evidence of any specific problem that is actually occurring. Only once has someone actually bothered to point out a specific issue and work with me to resolve it, hence the current M3.2+ versions. I cannot get a copy of JAWS because its commercial and there is no 'developer' version. I'm fed up, really fed up with this same comment happening over and over and over again and yet no supplied evidence of any failure, so if you have it with steps on how to replicate then please do share it with me and I'll stop fumbling around in a dark shed attempting to solve a problem I'm told that exists but cannot see.

    So 'plans' = yes in fact the 'plan' has been running for years. I have added keyboard control and spent many hours reading the ARIA specifications and undertaking best judgement in terms of code changes.

    So please do explain to me in detail the interpretation of the words 'unable to have the screenreader work'. In what way does it not work? Everyone says it does not 'work' but does not say what. I may as well think that the format does not work because it does not turn on the central heating when its cold for all that I'm aware of its 'faults' in this regard.

    I'm so fed up with this now that I may just quit maintaining this format all together.


  • Picture of Robert DeLonge
    Wed, 24 Jan 2018, 5:34 AM

    I understand your frustration. We are using Grid format on Moodle 3.2. ADA stands for "Americans with Disabilities Act."

    When we try to use a screen reader with the grid format, the screen reader stays on the Moodle course homepage and does not read or recognize the content that is displayed on the "lightbox" style display. It seems like the screen reader does know that the lightbox page exists. We typically test with NVDA because it is a free downloadable tool.

    Thanks for your time.

  • Picture of Paul Martin
    Wed, 24 Jan 2018, 11:52 PM

    A slight correction to what Rob said (we work together and I'm the Moodle server admin here): we're actually using Moodle 3.3.3+ in our production environment, as well as Moodle 3.4+ in our staging environment, and on the master branch for Grid. The issue persists in both environments.

    I do a fair bit of coding as well, so I understand your frustration with a "it doesn't work" type comment with no information and zero steps to reproduce. So if there's anything we can do to assist with this, just ask. We'll do what we can.

  • Gareth J Barnard
    Thu, 25 Jan 2018, 5:40 AM
    Hi Rob and Paul,

    Thank you for your reply and information. I have been thinking about this and understand where you are coming from in respect to the shade box. What I don't understand is the fact that there is keyboard control and therefore pressing Esc (apparently standard key for assisted technologies) brings up the shade box. Also the tab and left / right cursor keys navigate the grid boxes which all have ARIA descriptions that instruct the user and I always thought the screen reader software. So what happens when the user clicks on 'Esc' and the box is shown? Have your tests included a real user whom is familiar with the NVDA software?

    The more information the better please, along with real world workthrough examples and screen casts of use would help me to understand the issue. Please feel free to raise an issue on the GitHub account ( and post information there. I cannot promise I will solve the problem right away but I will read what you put and think about it.

    Kind regards,

  • Picture of Mariusz Bołoz
    Thu, 15 Feb 2018, 4:39 PM

    Thanks for the great plugin! Is there any way to make resized images smaller? For example original image is 80KB size and resized image is 325KB size

  • Gareth J Barnard
    Sat, 17 Feb 2018, 4:51 AM
    Hi Mariusz,

    If the input images are that small then they are too small for the grid box size which is why they are being increased. Therefore this would mean pixelation. So either use bigger source images or reduce the size of the grid boxes via the settings.

  • Picture of Mariusz Bołoz
    Mon, 19 Feb 2018, 8:13 PM
    Hi Gareth,

    thanks for response. The problem is following:

    INPUT IMAGE: size (pixels) 900x675, size: 101 KB
    RESIZED IMAGE: size (pixels) 384x288, size: 291 KB

    This is probably because of high value of quality parameter in resizing script.

  • Gareth J Barnard
    Mon, 19 Feb 2018, 11:21 PM
    Dear Mariusz,

    Fair enough. Please feel free to alter the code to suit your needs.

    Kind regards,

  • Picture of Dave Perry
    Wed, 21 Feb 2018, 11:25 PM
    Is there a way of download the grid images once uploaded? Or are they resized for good in the upload process?
  • Picture of audrey rippingale
    Thu, 22 Feb 2018, 6:40 PM
    Dear Gareth

    you really cheered me up and made me 'LOL', when i read your post dated 'Tue, Jan 23, 2018, 8:23 PM'.

    Please dont throw in the towel - I work with 2 developers and listen to similar rants on an almost daily basis. So I can play my empathy card.

    You do a great job and we are not worthy smile

    Have a fabulous day
  • Gareth J Barnard
    Mon, 26 Feb 2018, 6:42 AM
    Thank you Audrey smile You've really cheered me up :D.
  • Gareth J Barnard
    Mon, 26 Feb 2018, 6:50 AM
    Hi Dave,

    The original files are stored in case the grid boxes change and then the displayed image is recreated from the original. To see the original, edit the grid box in the same way you used to upload the image in the first place and you'll see it there.

  • Picture of Dhandapani MEDA
    Tue, 20 Mar 2018, 9:39 AM

    How to hide a selective grid in grid format

    thank you
  • Gareth J Barnard
    Tue, 20 Mar 2018, 8:35 PM
    Hi Pani,

    Turn editing on, hide the section, turn editing off.

Please login to post comments