Hi All,
I am not sure if anyone has done this before but we put a layout builder into Adaptable using Block regions for the front page.
You can see a video demo on the plugin page at the moment:
https://moodle.org/plugins/theme_adaptable
I would be interested to hear from other theme developers on this, particularly the notion of starting to build things like sliders, featured courses etc into blocks as opposed to the them.
Inspirational Jeremy .
Block regions for marketing spots are definitely the way to go. They are more flexible and indeed HTML blocks support images easily via the editor. In some of my themes I have a dynamic horizontal column block region where you can set the number of columns and the code works out the rest - like when a row has less blocks than the number of columns or when a new row is needed. Essential has kept its older method to allow upgrades to be seamless - however.... this may change now.
I have in the past created a block whereby you could specify the FontAwesome icon for the header too. Therefore blocks are more flexible and transferable between themes.
I really like the layout builder and preview .
Thanks Gareth
The nice thing is Its really easy to implement, when its finished it would be really easy to port into other themes and if that happens it may spur others to start making more blocks speficically for use on home pages.
It will be interesting to see where this one goes!
Definitely agree that much of what we have been building into themes (because it is 'expected') could and probably should be built in html blocks, giving far more flexibility to it. That's especially true now bootstrap features are available to make some of those things easier to add - which wasn't the case when we started building themes with carousels and so on. However, the one thing I would say is that it is often easier for someone with little design and certainly little coding experience or confidence to drag and drop a couple of images onto a settings page and a bit of text, rather than concerning themselves with the html code to do the same.
It's also worth bearing in mind that (almost) every theme that has those features also has the ability to select not to show them, in which case the important feature then becomes the block regions to allow people to build those blocks AND to put them where they want them - full width or smaller sidebars. That would give admins the ability to choose whether to use the theme version (for simplicity) or a block version (for better control).
Its one of the reasons why flexibase has so many options in terms of block regions as well as its layouts (not to expect anyone to use them all at once, but to provide that flexibility of where to put things). Because that uses flexbox for its layouts, the 'horizontal' regions will allow multiple blocks added side by side and will resize them according to how many are in the region.
Its a different approach to a similar user requirement to your layout builder - which I think is a great feature, taking the block regions further forward again! I'd love to add it as one of the 'portable features' I have been playing with in FlexiBase as I continue to develop that (will need to have a play and see how it integrates with the flexbox layouts )
Richard
Hi Richard,
Thanks for your advice, I had been thinking of removing the marketing spots completely but had already realised that was going to be a bit of a pain for some people.
I think I will do as you suggest, leave marketing spots in and add the layout builder as a separate feature. Both can be enabled / disabled and it will mean we can release it sooner as we wont have to worry so much about the consequences of removing existing features.
Hi Jez,
This idea of yours is not new. Shaun Doubney and myself were trying to achieve something on these lines with the AARDVARK THEME. We did for a very short while manage to get custom block regions into Moodle Themes. However, when docking blocks was brought in this broke the themes.
At that time we also had the ROCKET THEME which Julian Ridden built, and in some ways that I think could be described as the first theme to incorporate blocks as mechanisms for adding features.
That was I think Moidle 2.2 and it took until 2.5 or 2.6 to get the blocks back on track. so we missed three versions. Thankfully, this is now easier to do and thanks to Andrew Nicols block regions if docked create dynamic body classes, side-post-only, side-pre-only and content-only as well as any customised block region body classes. which is perhaps still might be problematic for responsive layouts.
So if like my recent Morecandy & GoLogo themes in my GitHub, which I am currently working on, where both have various block regions. GoLogio as two full width upper-level and lower-level block regions which are both span12 where you can add a single HTML block that you can add your own contents to, including a Carousel, by just copy cut and paste bog standard BOOTSTRAP 2.3.2 HTML like the ones in the example pages that come with the Bootstrap source code download.
So my GoLogo theme is all pretty much a manual set up, so I would love the idea of making it capable of dynamic stackable block regions like your Prototype In the video.
Fantastic...well done BCU boys!
Cheers
Mary
Thanks Mary
I know other themes have used blocks for a long time, but I think this idea may be useful for a couple of reasons:
Once finished I think it could simplify the work of theme developers as by dropping in a generic settings page and choosing the defaults you can setup any layout you want and allow users to customise it. The rest of the code is a single function in a renderer. As it uses arrays and loops to build everything you can easily add more layout settings, switch to 9 columns instead of 12 etc.
I am sure there are other approaches and a "proper developer" would be able to improve this.
The thing I am really interested in is what more could be done with blocks themselves. I always liked the idea of Flexbase. BCU have a really good University Portal using a tiled layout pulling information in from different systems. Very few Universities (including the one I now work for) have anything like that and it seems to me a lot of that functionality could be delivered through custom blocks.
The other thing which I touched on was blocks specifically of use on Moodle home pages like featured courses, sliders etc. I had been thinking for a while it would be good if you could add plugins to themes to make this easier, blocks are another approach to this.
Anyway, I will try and make this code more generic (easier to port) as I integrate it back into Master and post back when done.
Hi Jez,
I think the work you are doing here is fantastic and a real breakthrough. I hope you did not misread my post? I thought I would add a bit of history concerning Custom Block Reagiins in themes, as I see the Layout Builder as building on that early work in the Aardvark 2.0 theme we were doing at that time, and I include Richard Oelmann and JohnSt (New School Learning) in this, as they had some input to that project too. Without which your idea here might not have been fully realised.
I love it when boundaries get broken, its a sign that the Muse is at work whispering her ideas on the wind...
I am really looking forward to this project becoming a reality in Moodle.
Cheers
Mary
I think I might be in the minority on this when I say I am not sold on this as being good for our learners.
Our needs are much different coming from a K-12 background. We are very much concerned about workflow and making things obvious for users as to where to go and what to do. This idea makes it infinitely more confusing and harder to process what the user is to accomplish on the homepage. As more elements are added to the initial pages it only adds to the cognitive load a user must overcome to complete a task.
Our feedback shows that less is more and the themes I create for our site reflect this. When a user arrives at our Moodle site we want it to look pretty but not distract from the call to action.
When a user hits the homepage the call to action is to login. We implemented a full screen background and login form front and center. Logged in homepage call to action is get to your course materials or enroll in a course. We implemented the My courses dropdown as well as the icon navigation and search bar to help streamline finding and enrolling in course. In Pioneer theme the Icons and Searchbar can be made to appear front and center in the content area of the page as well as in the top navigation bar.
I realize this isn't the reality for everyone but we are very concerned about workflow and cognitive load on a user.
Moodle is a tool. Hailing from Dearborn the hometown of Henry Ford, we know a thing or two about complex tools used to build cars. With some tools it is not apparent what purpose they serve or how to use them due to the complexity and multiple moving parts. Unlike a hammer, whose purpose is to hit things and the design makes it obvious. We want Moodle to be a hammer - a nice looking hammer whose purpose and function is obvious. Anything else might be distracting and increase the cognitive load to accomplish the task at hand... learning.
That might be to simplistic of a response but the sentiment of getting a more concise workflow and call to action is conveyed.
Hi Chris,
I really like your themes and porting Social Wall support is still on my ToDo list!
I think what you say makes sense for K12.
At the University I work for Moodle is by far the most trafficked platform and doubles as a link directory / notice board hence adaptable has a lot of link menus, alerts, news ticker all of which can be targeted based on custom profile field for different faculties / staff vs student etc.
Your concept here is very much in line with the Joomla framework I am learning right now: Gantry.
The real power would come from Moodle HQ saying we want a theme framework and outputs from core various modules and blocks that can be placed in a theme layout via drag and drop by the user. Not just for the homepage but for any layouts the theme calls like 1 column, 2 column, dashboard, etc etc.
Then I could see Gantry "Particles" which would be things like a Logo, breadcrumbs, edit button, user menu, course content, all the blocks, course title, etc etc. Everything would be modular and the output rendered by the framework.
Chris,
Gantry is behind the idea of the layout builder. As some from here already know, I fight from long time ago to get a better theme layout and provide more flexibility in the development and the front end. And comparing moodle against other scripts, probably Joomla is the most advanced.
I worked almost all the Joomla frameworks and Gantry is one step forward of the rest (also used in WP).
The general idea could be applied to moodle as Jeremy demonstrated with the wonderful Layout Builder. Jeremy is doing a great job because the result is even better than expected so we can get something similar to Gantry that could help to create better moodle themes. It still needs a lot of work but we are very close to get it.
New frontpage layout, new blocks and especially, new admin page. All together to manage more powerful themes but easily than now.
I just sent a tweet to them to see what it would cost to implement Gantry with Moodle or at least discuss if it is possible. I may try through Rockettheme as well. We have been members for many years now as we run Joomla for our main district website.
The point I tried to make is you need deeper integration between theme and core to accomplish this. There should be a page layout editor and particles for data display from Moodle. Layouts could be applied to the pages used in the theme.
I'm not sure I'd want to see Moodle go right down to that level of granularity such as where to put a single button like the edit button Chris (might be a bit too small - I'd personally like to keep some consistency such as the edit button being part of the breadcumb row, the logo being part of the header, etc - on the other hand, to put it inline with breadcrumb, or in line with main menu, or... so yeah, maybe ), but in terms of being able to put blocks and content where we want it, I think that's a case of finding a way to simplify the use of block regions (like Adaptable has done) or extending the use of those regions and making them more central to the flexibility of the layout (as flexibase has done). Two different approaches with the same usability goal in mind - great to see if both approaches can develop into one much improved user interface, perhaps
What would be great is to see the front page broken up so that the different bits that become 'main content' right now are taken as separate content and make everything dragable into whatever region you want it to be in. Right now for example, flexibase has many custom block regions all around the main content area, and that allows the main content to be just about anywhere in a 5x5 grid of block regions (including the main content), but still the frontpage will put the course list in the same place as the news forum as the frontpage content section. It would be good (I think) to see each of those as a separate 'block' that could be positioned in any block region - and also to allow any block to be dragged into what is currently the main content area.
For me, I would probably use a lot of the features on my teacher professional development but very little on my K12 site. However, now that we can place blocks in whatever location we want, I would start by placing my login/logout block front and center.
One of the most common complaints when we switched to an old version of this theme was having to scroll down the page to get to the login block which users had got used to in the previous theme we were using, which I why I have adding options to let the sidebar run up higher on my todo list.
Chris
I think what you are talking about there is the design (and learning design of the site). While complex themes such as adaptable and flexibase offer the administrator (and to some extent the teacher) the power and flexibility to create what they want (and to go over the top in their design), they also offer the 'power' to be really simple and straightforward in presentation, layout and design.
I get the point about the hammer - though themes in Moodle are often more like a Swiss Army Knife. But just because they have 100 tools, doesn't mean you have to get them all out at the same time